Summary
The project aimed to completely redesign the UX & UI of an existing payment gateway platform. The existing platform lacked in multiple aspects and was no longer convenient for the users.
Problem
UI appeared archaic and didn't meet the requirements. IA was ineffective and required thorough examination (there were multiple duplicates of similar pages/functionalities across the site). POs received inquiries regarding the location of specific features.
Objective
The goal was to understand the needs of different user profiles and provide best possible experience while ensuring better understandability, scalability and accessibility.
Duration & year
5 months, 2024
Role
UX, UI, Research
step 1 of 5
The first step was to thoroughly examine the existing platform. This involved creating a detailed inventory of all pages and features to understand what was already in place.
13000+
users
3
platforms
10+
brands
420+
hrs
410+
screens
Understanding the platform
Internal interviews, benchmark reports, confluence documentations, and much more.
Refining the flow and connecting the dots during one of the stakeholder sessions.
Then i started grouping all the colour coded parts and pieces.
Only then i was able to define every colour coded category with simple, single-line description. It was a meticulous process of getting to the bigger picture through studying the smaller ones.
← Previous
Deconstructing the platform
With all things gathered, it was time to start analysing everything and identifying major/minor focus areas.
After developing flows and cataloging all screens, I began to color-code certain screens. In some instances, parts of the same screen were categorically distinct from the rest of the content.
Then i started grouping all the colour coded parts and pieces.
Only then i was able to define every colour coded category with simple, single-line description. It was a meticulous process of getting to the bigger picture through studying the smaller ones.
← Previous
Reconstructing the experience
After categorizing screens and organizing everything, I effectively created an inventory of all types of interactions and content, which I then had to reconstruct and systematically arrange.
At the end i had a bunch of short descriptions for everything in the platform. I added some titles that were very long, and decided to have card sorting tests with internal users.
I was only able to do this with 2 people, but it was very helpful and prepared a good foundation for the next step.
Building the IA
Finally once i got aligned with the stakeholders and shared all things together, i was able to come up with an extensive information architecture
Refining the IA was the most challenging part.
Merchants
The largest portion of users are merchants. These users are mainly focused on checking their payments, keeping track of payouts, and making sure everything is working for the customers.
Dashboard
Transactions
Sub-merchants
Navigation
Previous navigatgion was confusing and had repetitive titles.
Anatomy
After conducting a comprehensive audit of all content, my goal was to establish a uniform structure for various screen functionalities, maintaining consistency throughout the platform. As an example, "Detail screens," whether they are for straightforward account settings or transactions, follow the same structural hierarchy and anatomy, sharing identical visual characteristics.
Table view
Preview
Detail view
Anatomy in action
Design system
Themes
Colours
Typography
Icons
Sidebar
Top headers
