Scalable Design and Streamlined Architecture for a Payment Solutions Platform
This third party logistics (3PL) company offers eCommerce solutions such as fulfillment, transportation management, payment processing and fraud detection. As the company has grown, disparate product experiences and outdated interfaces have become a barrier to converting and onboarding new customers. Through improved information architecture and a custom component library, we transformed an outdated, disorganized payment solutions tool into a streamlined, accessible, and scalable platform that retains customers and enables growth.
Role:
UI/UX Designer
Industry:
B2B eCommerce
Skills:
UI Design, Design Systems, Data Visualization
Key Outcomes
Improve information architecture and user interface design to streamline navigation and quicken task completion for customers
Create a unified dashboard with updated data visualizations to enhance usability and accessibility
Customize MUI React components in Figma to create a component library to be scaled across the entire suite of 3PL products
Payments dashboard before redesign
Payments dashboard after redesign
Approach
Discovery
Due to project limitations, discovery was limited to a product audit, competitive analysis, and informal discussions with stakeholders. We were given a list of feature requests from product owners based on customer feedback, but we needed to do a little more digging to understand the ins and outs of the product and gather our own insights and recommendations. I partnered with another designer to perform this research and we identified 3 main areas for improvement:
The navigation puts unnecessary work on the user by making fraud and payments separate
Separate dashboards and inaccessible data visualizations create hurdles in accessing data and reporting
Awkward and nonstandard UI patterns cause frustration and confusion
Product and component audit
Information Architecture
The current state navigation puts unnecessary work on the user by making fraud and payments separate, even though they share similar structures. We reorganized the IA through a series of object oriented user experience (OOUX) workshops with stakeholders, where we defined objects and relationships.
Through those workshops, we determined that fraud is metadata assigned to a transaction, therefore “Fraud” as a navigation item may not match users’ mental models. When a user is looking for a fraudulent charge, they would most likely be looking for the transaction first. For this reason, instead of having separate menus for “Payments” and “Fraud,” we proposed a single menu with a “Transactions” page.
The new objects identified in these workshops also allowed us to connect to other systems in the client's product suite, bringing interconnectivity to the system (on the frontend) that was lacking before.
OOUX workshop
Sitemap showing a singular "Transactions" page
Visual Design Exploration
As the primary owner of the user interface design, I performed a brand discovery and visual design exploration workshop to expand on the client’s minimal branding, set a visual style and tone for the product, and advocate for style changes that support accessibility (e.g. color contrast, readability of tabular data). Through the workshop, I gained enthusiasm, buy in, and trust from both the product and marketing teams.
Visual design exploration
Advocating for a typography change to enhance readability of tabular data
Component Library
I established a UI library in Figma with reusable color styles, type styles, components, and patterns. I introduced standardized and well proven UI elements as well as documentation to ensure that they are being used consistently and appropriately.
I designed and prototyped a collapsable navigation component to house the updated IA and consolidate key product navigation functions that were previously disjointed. Users can now easily switch between clients and products, and there is a clear delineation between the main navigation and administrative pages.
Component library in Figma
Exploring interactive states of the navigation component
Data Visualizations
I created a 12-color palette (perceptible for users with visual impairments) for categorical charts like pie and donut charts. I designed new data visualizations for specific metrics: settlements by wallet type, fraud and service claim chargebacks, total fraud attack dollars, fraud attack rate. I also modernized the component styles with improved data cards, trend pills, charts and graphs.
New data visualizations. The bottom right shows how each color remains distinguishable from one another when simulated with a visual impairment.
Results
Through our work, we transformed an outdated, disorganized payment solutions tool into an accessible and easy to navigate platform. The tool is visually cohesive and aligns with the company's brand and vision. The OOUX workshop identified ways to bring more interconnectivity across products, and the new component library provides a faster way to upgrade their entire product suite with the new look and feel.
The intuitive information architecture and consolidated dashboard reduces time navigating for the user and speeds up task completion
Accessible data visualizations enables access to key metrics and data points and improve reporting abilities for users
The component library sets Radial up for future migration of products onto one consolidated interface
Client Feedback
Sarah, I really, really enjoyed the way you led us from the beginning into the mood board. I learned a lot. I love the way you were on the ball and when you introduced the whole marketing team to the mood board, have us on board and understand your the rationale that was behind it.
You’ve been instrumental in bringing it to life. From day-1 you understood our need and translated it to an environment and functionalities that will delight our clients. Top notch!
Peer Feedback
Sarah's brand exploration was a foundational moment for us to create that alignment up front before jumping right into UI.
Sarah's thoughtfulness in her design work, particularly her detailed typography exploration during the mood boarding exercise, showcases her exceptional ability to convey complex design principles in an accessible manner. This not only educated our team but also added significant value to our client's understanding of the design choices.
