Combining 5 legacy platforms into 2 Portals
Combining 5 legacy platforms into 2 Portals
Background
The client is a leading financial technology company specializing in payment processing and treasury management solutions. With a diverse clientele ranging from banks to fintech companies, The client’s services are critical for managing financial transactions, ensuring compliance, and optimizing cash flow.
When I was onboarded to their team as the sole Product Designer, the company was at a pivotal point. They were in the process of upgrading and expanding their suite of digital products to better serve their growing user base. My role was central to this transformation, as I was tasked with designing and scaling three key portals: the Dev Portal, Consumer Portal, and Merchant Portal. Each portal catered to a different user group, and it was imperative that they not only met user needs but also maintained consistency across the board.
Merchant Portal Welcome Screen
Business Challenge
The project presented several unique challenges:
Legacy Systems: CheckAlt’s existing portals were functional but outdated, with various usability issues that hindered user efficiency and satisfaction. The challenge was to redesign these systems without disrupting ongoing operations.
Diverse User Groups: Each portal served a distinct user group with specific needs. Developers required efficient tools for integration, consumers needed seamless access to their payment histories, and merchants required comprehensive transaction management capabilities.
Scalability and Future-Proofing: The design had to be scalable to accommodate future growth and the introduction of new features, ensuring that the portals could evolve with the company’s needs.
Security and Compliance: Given the sensitive nature of financial transactions, designing with security and compliance in mind was non-negotiable. Every user flow had to be airtight, adhering to stringent industry standards.
My Role & Contribution
As the sole Product Designer, my responsibilities spanned the entire product design lifecycle. I was involved in everything from initial research and user experience design to creating a scalable design system that could be applied across all three portals. This included:
User Experience Design: Redesigning user flows to enhance efficiency and usability.
Design System Development: Creating a unified design language to ensure consistency across all portals.
Stakeholder Management: Collaborating closely with various stakeholders, including developers, product managers, and client representatives, to align the design with business goals.
Scalability: Designing modular components that could be easily scaled or adapted for future needs.
Lead Designer, Staff Designer
6 Months (Oct 23 - Mar 24)
2 UX Engineers, 20 Developers, 4 QA Engineers, 1 Project Manager
The Impact
76
%
Dollars in direct revenue for the Epic Games Store in 2022
150
+
Dollars in direct revenue for the Epic Games Store in 2022
40
+
Dollars in direct revenue for the Epic Games Store in 2022
16
+
Dollars in direct revenue for the Epic Games Store in 2022
The landing Dashboard before and after
The Problem
The client faced significant challenges with their legacy web application, including:
Outdated technology struggling to keep up with growing business needs
Poor user experience due to difficult navigation and lack of essential features
Inefficiencies and errors hindering operational efficiency
Limited scalability restricting their ability to grow and deliver high-quality events
The Impact
While specific metrics are protected under our NDA, we can share the general impact our UX redesign had on key performance indicators:
User Engagement: Following the redesign, the average time spent on the platform increased significantly. Users were interacting with more features and spending longer periods navigating through the new modules. This increase in engagement suggests improved user satisfaction and a more intuitive interface.
Task Completion Rate: We observed a substantial improvement in task completion rates across various user roles. Event organizers, in particular, reported being able to set up and manage events more efficiently. The streamlined workflow reduced the number of steps required to complete core tasks by approximately 30%.
Customer Support Requests: After launching the redesigned platform, there was a noticeable decrease in support tickets related to usability issues. The number of "How do I..." queries dropped by an estimated 40%, indicating that users found the new interface more intuitive and self-explanatory.
Complete modal family for the payment app
Consumer app
User Research: Unveiling Insights in Constrained Environments
Despite limited user access, we conducted an intensive research phase to gain deep insights into the HCP event management ecosystem. Our innovative approach combined stakeholder knowledge with industry best practices:
Stakeholder Interviews: Conducted in-depth sessions with three key client stakeholders, employing the "Jobs to be Done" framework to uncover latent user needs.
Proxy Persona Development: Created data-informed personas based on stakeholder insights, utilizing the "Assumptive Persona" technique from Lean UX methodology.
Heuristic Analysis: Performed a comprehensive evaluation using Nielsen's usability heuristics and Shneiderman's "Eight Golden Rules of Interface Design."
Competitive Benchmarking: Analyzed 5 competitor platforms to identify industry patterns and differentiation opportunities.
User Journey Mapping: Developed detailed journey maps for each persona, highlighting pain points and moments of delight.
The Styleguide
Redefining Developer Onboarding: Beyond the Portal
The developer portal was crucial for our client to extend their APIs to financial institutions, enabling seamless integration of check processing services. the portal became a cornerstone of our client's API-first strategy, driving adoption and fostering partnerships with major financial institutions.
I extended the user experience to the often-overlooked yet critical touchpoint of the welcome email.
While designing the Developer Portal, I recognized that a smooth onboarding process is crucial for developer engagement and adoption. My approach went beyond creating an intuitive registration form; I extended the user experience to the often-overlooked yet critical touchpoint of the welcome email. By designing both the account creation interface and the initial email template, I ensured a cohesive and welcoming experience from the moment a developer discovers our portal to their first interaction post-registration.
I extended the user experience to the often-overlooked yet critical touchpoint of the welcome email.
The implementation team reported a 40% decrease in support tickets due to the portal's comprehensive documentation and intuitive navigation.
Marketing team leveraged the portal's user-friendly design in campaigns, highlighting our client's commitment to innovation and ease of use.
From custom Solution to White Label Product
After successful implementation for [Client Name], the payment process web app was adapted as a white label solution.
The robust and flexible nature of the design allowed it to be repurposed as a white label product
This allowed other businesses to use the core functionality while customizing the branding to match their own visual identity. For instance, [Fictional Company X] integrated our white label solution, adjusting the color scheme from the original blue and white to their brand colors of green and gold, and replacing our logo with their own.
The robust and flexible nature of the design allowed it to be repurposed as a white label product, expanding its market potential and demonstrating its adaptability to various business needs.
Within 18 months of launching the white label version:
23+ businesses adopted the solution
Processing volume increased from $5 million/month to $50 million/month
User satisfaction scores averaged 4.8/5 across all implementations
Integration time decreased from an average of 3 weeks for custom solutions to 3 days for the white label version"