Payments & Fraud Platform
Creating a New, Scalable Payment Solutions Platform
ROLE
UX Designer
Duration
4 Months
Bringing forward a new vision with scalability in mind
Our client aimed to design a next generation digital interface that brought multiple portal interface under one unified experience.
Background
Our client, a leader in third-party logistics software, built its reputation on providing mid-market businesses with the tools to track and manage a wealth of critical data. Their suite of interfaces empowered clients with insights, helping them stay agile in an increasingly complex industry.
As their customer base expanded, so did their ecosystem of tools. They quickly developed solutions to meet emerging needs, but this rapid growth came at a cost—consistency. Clients found themselves navigating a patchwork of interfaces. What was once a competitive advantage—speed and adaptability—had now become a barrier. Instead of feeling empowered, users felt disoriented, struggling to move fluidly between tools.
It was clear the software needed to fundamentally evolve. The experience had to match the expectations of modern users while still supporting the sophisticated workflows that made it indispensable. Starting with their fraud and payments portals, our goals were twofold:
Introduce new features that addressed client-requested functionality, ensuring the tools remained competitive and capable.
Create a unified, scalable, rebranded experience that made navigating the ecosystem seamless, intuitive, and future-proof.
Fraud dashboard before redesign
Transaction search before redesign
My Role
During our time, my efforts were focused mainly on building the foundation of the experience through various UX exercises. These also served as the connective tissue between myself and the visual designer who I was working alongside. While under the supervision of a design lead as well, I was able to execute:
Annotating current-state user flows that served as a foundation for marking user experience shortcomings and opportunities
Performing and iterating upon a OOUX workshop and exercise to develop the scalable system
Creating a sitemap to validate the new navigational structure
Creating wireframes that would outline design decisions and potential reusable components to ensure alignment with our client and efficiency with my design partner
Even while remote, our team dynamic was bubbly, deeply collaborative and efficient. My efforts ended with supporting high-fidelity design and prototyping the final experience.
As of December 2024, our team got a preview of the work our client has developed thus far. Launch is slated for 2025.
A rocky start aided by some creative workarounds
Our first challenges
Every project comes with its quirks, and this one was no exception. Right from the start, we hit an unexpected hurdle: the client couldn’t connect us with actual users. Instead, we’d have to rely on internal stakeholders to relay insights—a less-than-ideal setup. But rather than flying blind, we found a workaround. We tapped into a key resource: their customer service team. These were the people on the front lines, fielding user frustrations daily. If anyone knew the pain points, it was them. This would be critical during our feedback sessions.
Then, just as we were finding our footing, another challenge emerged. The holidays rolled in, and most stakeholders took time off. We suddenly had access to the tools—but no one to answer our questions. That didn’t stop us. Instead, we got resourceful.
Annotated User Flows
To make sense of the system, I started by capturing screenshots of the entire experience, mapping out user flows to visualize the journey. Every interaction, every usability hiccup—I documented them all, annotating pain points along the way. I also dissected the navigation, comparing the fraud and payments interfaces to uncover redundancies and opportunities for consolidation.
This deep dive revealed some glaring usability issues:
Navigation relied too heavily on icons
Without labels, users were left guessing where each button would take them. Industry best practices told us that pairing icons with labels would eliminate ambiguity.
Inconsistent page titles added confusion
Navigation labels didn’t always match page headings, making it easy for users to lose their bearings.
False affordances led to disappointment
Some UI elements hinted at deeper interactions, but clicking them led nowhere. This broke user expectations around the ability to explore more data.
Competitor Research
While stakeholders were still unavailable, my design partner and I turned to competitor research. The tricky aspect of this was that these interfaces weren’t easily accessible. Still, we scoured the internet for insights into how other companies tackled similar experiences.
This research provided two key takeaways:
Understanding user expectations—not just what users needed, but how information should be structured visually.
Navigation insights—while some competitors used icon-only navigation, many employed dynamic solutions with expandable menus and icon-label combinations. This struck the right balance between simplicity and clarity, making navigation more intuitive. We knew this would be a game-changer for our project.
Figjam board of competitors
Rethinking the system using Object-Oriented User Experience
OOUX Presentation and Workshop
Object-Oriented User Experience (OOUX) was new to me, and I was eager to get my hands dirty. This project was the perfect opportunity. OOUX isn't just a UX framework-it's rooted in human psychology, making complex systems more intuitive and scalable. Given scalability was core to our client's efforts, this approach was an ideal fit.
I followed the ORCA process, breaking it down into four key steps:
Identifying Objects
I started with noun foraging, scanning the system for key entities and defining them by their core values so they were properly represented in the system.
Mapping Relationships
Once objects were defined, I focused on how they connected. These relationships shaped the system's structure, making navigation more predictable and interconnected.
Documenting Actions
Every object needed actionable interactions. I cataloged all possible user actions for each object, ensuring that when it came time to design, no essential functionality was overlooked.
Defining Core Content & Attributes
This final step captured each object's essential information. In a system filled with data tables, these attributes were crucial for designing filters and search parameters, making information retrieval more efficient.
Not only did I need to validate my findings with stakeholders, but I also had to introduce them to OOUX itself. Since this was a new concept for them, I created a structured presentation explaining what OOUX is, why it mattered, the steps I followed, and the insights we uncovered.
The response was overwhelmingly positive. The client quickly grasped our process, and our discussion shifted from learning the framework to applying it-sparking meaningful conversations about how these objects would shape the navigation experience.
Envisioning new structure though a sitemap and wireframes
Iterations and Sitemap Development
The OOUX workshops lasted about three rounds to cover the ground necessary to make uniform and informed decisions around the information architecture. Once those were completed, I led the effort on the creation of a formalized sitemap. This sitemap would serve as the backbone of our experience in a few different ways:
Outline the necessary items in the main navigation. This would serve as the new core of the experience for users, centering them around objects in the system.
Show the inventory of pages. Filters, table values and actions buttons would all be displayed in the diagram. This would drive a significantly improved structure to conversations with our client as we could more quickly iterate about what needed to be changed on these pages before moving forward, creating more alignment.
Show the interconnectedness of nested objects. In this new way of thinking, users would be able to now seamlessly move throughout the experience in different ways. Transactions discovery could link effortlessly to stores, customers and more to provide a richer exploratory experience for users.
Sitemap and page inventories
Low Fidelity Wireframes
With decisions around the information architecture based on our object-oriented approach in place, transitioning to wireframes was seamless. Since we weren’t using a design system, thinking systematically became critical. I prioritized designing pages with the most repeated components to ensure we could scale our high-fidelity designs efficiently.
Tables became our starting point. Tables were the most valuable and frequently used components in the system, forming the backbone of transactional workflows. By focusing on tabbed tables, we allowed for better context switching between different objects, such as fraud and payment features—previously separate but now unified.
Additionally, we had to account for administrators managing multiple clients. We restructured the side navigation by incorporating a client switcher, improving hierarchy and accessibility. This approach mirrored successful enterprise tools, allowing users to shift context seamlessly without breaking their workflow.
We also refined the top navigation, incorporating:
Breadcrumb navigation to reinforce user confidence
A global search feature for faster access to objects within the system, a more refined approach to a customer feature request
A contextual "create new" button for easy object entry based on the user’s workflow and current mental model
To round out the designs and meet our client's expectations around new features, I incorporated solutions around:
Blocking customer from completing purchase or pre-authorizing a high profile customer's purchase by implementing a customer object within the system, a net-new experience
Creating a refined dashboard experience that included 7 new data visualizations
Interactive visuals that would allow users to experience a "drill-down" experience
Each decision was annotated in wireframes, ensuring stakeholder alignment and streamlining the high-fidelity design process.
Annotated wireframes
Completing the new experience with micro-interactions and further refinement
High-Fidelity Design and Prototyping
As we progressed through wireframes, our systematic approach to creating repeatable components allowed us to transition to high-fidelity designs quickly. During this phase, I assisted the team with various design efforts and decisions. Two notable stakeholder requests emerged, pushing our designs further:
User-configured tabbed views
Originally designed for default table views, our tabbed table design evolved to support user-configurable views, enabling users to save custom filter settings. This added flexibility and efficiency, allowing users to quickly access relevant data.
Sales opportunities
Stakeholders wanted a way to surface sales opportunities within various parts of the experience. We implemented a state change in restricted menu items, allowing users to explore service details they weren’t yet subscribed to. Additionally, for users with access to payments but not fraud, we introduced a dashboard prompt and a preview within tabbed tables, enticing them to upgrade. This approach increased visibility and conversion potential without disrupting workflow.
Beyond these refinements, we polished the experience with micro-interactions, skeletal loading screens, and modal dialogues, enhancing usability and responsiveness. These refinements not only improved usability but also created a visually polished, intuitive system that exceeded our client’s expectations.
New navigation and interaction design
New dashboard loading animation and design
Example of a table and single item page (trasnaction)
Outcomes and reflections
Time Crunches and Updates
I framed this as a project that one of the most "refined" projects I have ever been on. And while the final product shows that, it doesn't tell the full story about what our team went through to get to that point.
Remember the shaky start due to the holiday season and our client’s absence? That setback put us behind from day one. To recover, we had to work fast without sacrificing quality. Through smart approach to the work and uncompromising execution, we regained dozens of lost hours. A huge win for our team operating under contract constraints.
In winter 2024, our client shared their progress, showcasing the fully implemented navigation and refined interactions we had worked so hard on. Seeing it come to life was rewarding. With additional pages rounding out the experience, the system is set to launch in 2025—we eagerly await the next update!
Wishes, hopes and dreams
While this project delivered a strong outcome, I see opportunities for further enhancement:
User Interviews: Deeply empathizing with users early on could have provided invaluable insights, setting the right course from the start.
Post-Launch Validation: Testing final designs with users to inform iterative improvements.
Continued Involvement: Personally, I’d love to stay engaged, ensuring the scalability of our system and seeing long-term impacts.