TSYS's Configuration Tool: A centralised hub for managing our financial products.
What is it?
An approach that makes it easy for our clients and internal administrators to consume, control and manage financial service portfolios, processing and products from start to finish across all issuing platforms. Being a Software as a Service product, it must work with a small number of Ul components, and serve a wide range of functionality for numerous teams. It's more like Legos, for lack of a better comparison. Although the Ul components are straightforward, they can be combined to cater to a variety of user needs.
- Intuitive, easy to understand action oriented object driven workflows
- Low Code: Self building UI with robust in-house design system
- Ability to self-serve for internal users and clients
- Responsive enough for the users to configure on the go on mobile devices
- Modern tool to sunset legacy applications
My role and responsibilities
Full Stack UX Designer: Brainstorming in collaboration with PO's, design team, product team and technology teams, Prototyping, UI Designing, Usability testing and Hand Off to developers.
Why was there a need?
As the only designer on this project, I had an opportunity to carefully watch the end users as they used this tool. And soon I realised there are numerous opportunities to reduce the complexity of workflows. I discovered there was another workflow that needed to be corrected first when I was taking care of one. And quickly realised that it was only a case of applying one bandage on top of another without addressing the underlying source of the issue. So I took an initiative to rethink various decisions made 5 years back and revisit them with a new modern approach.
- Workflows that were highly error-prone and resulted in fines and reputational harm
- Lack of consistency resulting in slowing the users tasks and productivity and increasing frustration
- Difficult for the new development team to integrate due to naming confusion due to lack of design thinking.
How it's done?
I therefore spent the time in three weeks going pixel by pixel to see what might be improved and learning what users wanted. What are the aches and pains? Which user flow is more logical? tried to find the unnecessary chores to automate. Make the computer work for you rather than the other way around.
- Re-define each pixel to break new boundaries
- For every UI component, adhered to the BEM naming standard
- 8-bit point system enforced to bring consistency to spacing
- Up until the application moved into production, I closely collaborated with the dev team, stakeholders, and POs.
The following Empathy Map also helps to know more about users and their needs.
Final Product
In Depth Case Study
If you'd like more information about this project, let's get in touch.(tsongade@gmail.com)