Dex - Payment management platform
About the project and my role
Dex is a cloud-based payment solution designed to empower businesses to effectively streamline payments management, including transactions, customers, funding, reports, and much more. When I came on board, the existing features were being migrated from the legacy application to this new application and it was built rapidly to meet users’ needs.
As an only in-house UX designer in the product team, my responsibilities were to -
Identify & improve usability issues.
Brainstorm solutions and build prototypes around user needs and feedback.
Collaborate with product managers to create scenarios and write tasks for usability testing.
Contribute to style guide.
While I worked on every feature of the application, sharing some of them below.
Design process
I worked in close cooperation with the product managers, user representatives, and stakeholders from the onset of the project which helped me develop an understanding of business & user needs. I followed a baseline process of two validation stages that helped me and the team understand and work towards creating a better and positive experience for our users.
Planning for data-heavy application
One of the main challenges was how to present loads of data with a simple, clean, and useful interface. We started by logically grouping information for each module. Cards were used to group related items together so it is more scannable to find information effectively. Eg: For customers, payment methods were grouped and billing/shipping addresses were grouped separately.
It was observed over time that it is painful for users to scroll up and down to look for specific information. Even though logically grouped, it was overwhelming for the users to see walls of information together.
We further iterated to minimize the cognitive load. This time we played around the layout and presented only the key information at first and rest of the information was tucked under multiple tabs. With this solution, we learned that users don’t mind the extra clicks as long as it is easy to consume and find what they are looking for.
Designing for use case scenarios
To build a desirable and high-quality product, it is important to consider all the possible actions a user can take and how the system will respond to the action. I was accountable to design not only for success cases but also include possible failure cases, exceptional cases, and alternative cases in user interaction.
It took us a couple of white-boarding sessions to illustrate all the possible scenarios a user can encounter when performing the given task. Once we were clear on how the system should behave, I designed the UI flow for further usability testing.
Conducting usability testing
After analyzing the use cases for any given feature, we used to come up with a prototype and conduct usability test with at-least 5-6 users over a period of 2 weeks. This offered insight into how satisfied users are with the product features and help us identify problem areas within the product before it is coded.
I collaborated with product managers in writing tasks, scenarios, hypothesis, and questions for the research and testing. Also contributed to usability testing report document which we later present to developers and stakeholders with all the research findings with further actionable items.
Responsive web design
After switching and syncing between sketch and invision for designing and prototyping, I finally made the switch to Adobe XD. Besides it being the all in one tool, I was excited for the in-built responsive resize feature of XD which allows you to resize groups of objects while keeping their placement and scalability.
Even it made the tedious process quick and easy, one of the challenges was to making it usable and perform well in all the screen sizes and devices. For all the key-screens, we adjusted the layouts and added the breakpoints with max and min width.
Style guide
I contributed to the style guide by maintaining and adding new UI components. We followed Google’s Material Design guidelines for best practices and proper implementation. We explored other styles as well, reviewing them with developers, gathering consequences and documenting the outcome into reusable components.
Key learnings
Through this project, I gained valuable insights:
I learned to think beyond the user interface, focusing on crafting meaningful and relevant experiences.
I realized the importance of involving developers and stakeholders early in the process. Collaborating with them through brainstorming sessions and sharing user feedback ensures a user-centered approach while allowing everyone to contribute to problem-solving.