January 2024 - July 2024
(Releasing Q2 2025)
Internal Product
(Enterprise software)
UX Designer
UI Designer
Developers
Business Analysts
Product Managers
Power Users
I led the UX design efforts for a complex project that involved integrating payment configuration functionalities from an older platform into a modernized system. While doing so, I enhanced the UI, tackled design inconsistencies, and improved accessibility—ultimately reducing complexity and streamlining workflows. My guiding principle? Less is more.
This project required balancing legacy constraints with modern usability.While preserving the core framework, I restructured task flows, improved navigation, and successfully advocated for the integration of our in-house Alchemy Design System.
The platform lacked visual and functional cohesion. Different fonts, button styles, and icons cluttered the interface, and accessibility issues (low contrast ratios, inconsistent error handling) made navigation frustrating.
Through stakeholder interviews and a usability audit, I found that the platform had an excessive number of functions—many rarely used. I created a feature matrix, prioritized essential workflows, and worked with power users to determine which features could be streamlined or removed.
Originally built in the early 2000s, the UI felt antiquated. Instead of a costly rebuild, we selectively integrated key features into an updated platform while improving information architecture and task efficiency.
We Used a Design Thinking to ensure a user-centered approach:
1. Empathize – Conducted stakeholder interviews and shadowing sessions with power users to understand real pain points.
2. Define – Mapped out the most critical user flows and identified inefficiencies.
3. Ideate – Hosted collaborative white boarding sessions with developers and business analysts to explore solutions.
4. Prototype – Designed high-fidelity wireframes to gather early feedback from the dev team.
5. Test & Iterate – Validated designs through demos and made iterative refinements.
💡 Key Finding: During usability testing, we discovered that power users relied on a specific legacy feature that we initially considered removing. Instead of eliminating it, we redesigned its flow to be more intuitive and efficient.
Redesigning the information architecture by separating the tabs into card components allowed me to:
✔ Reduce cognitive load and allow users to quickly scan available functionalities.
✔ Simplified workflows to minimize unnecessary clicks and increase task completion efficiency.
To align with developers and business analysts and did the following:
- Used high-fidelity screens early instead of low-fidelity sketches
- Scheduled weekly design/dev syncs to ensure feasibility and adjust designs before development, reducing rework.
- Annotated designs in Figma to streamline developer handoff.
Before and after of the iterative design process.
Initially, I adjusted existing UI elements for accessibility. However, I saw an opportunity to increase consistency and scalability by integrating our Alchemy Design System. After advocating for its adoption, we successfully standardized UI components across the platform.
CSR styled UI and components and the new design system. I focused primarily on updating the typography and components; colors were already established.
Quirky menu, bloated UI and outdated UI
Before: The original UI was visually cluttered and inconsistent. Multiple button styles, font variations, and accessibility issues made it difficult for users to complete tasks efficiently. Important actions were buried, and the navigation lacked structure.
After: The updated UI applies the Design System, ensuring a consistent, modern, and accessible experience. Key actions are now clearly defined, contrast ratios meet WCAG standards, and the interface feels more intuitive without overwhelming users.
✔ Consistent Visual Language – Unified font styles, button shapes, and colors for a polished experience.
✔ Enhanced Accessibility – Increased contrast ratios, improved error messaging, and WCAG-compliant components.
✔ Better Information Hierarchy – Primary actions are more prominent, reducing confusion and increasing efficiency.
Quirky menu, bloated UI and outdated UI
Site map walking through three different task flows.
Before: The original flow was overly complex, requiring multiple unnecessary steps that increased user friction. Users had to navigate through redundant pages and unclear CTAs, leading to longer task completion times and higher cognitive load.
After: The redesigned flow minimizes friction by streamlining key actions into fewer steps. By introducing clearer hierarchy, improved navigation, and progressive disclosure, users can complete tasks 30% faster, improving efficiency and overall satisfaction.
✔ Reduced Clicks – Eliminated unnecessary steps, ensuring users get to their goal faster.
✔ Improved Clarity – Clearer CTAs and structured paths reduce confusion.
✔ Power User Validation – Iterated based on real user feedback, ensuring seamless adoption.
Quirky menu, bloated UI and outdated UI
Copying an existing user type's permissions
Uploading a file to a table
Creating a new billing product
Warning modal for disabling a user configuration
Updating the payment options for a biller
✅ 30% Reduction in Task Completion Time –Improved core workflows like editing biller accounts and creating new products.
✅ 100% Design System Adoption –Standardized UI elements, eliminating inconsistency and improving developer efficiency.
✅ WCAG Compliance Achieved – Addressed major accessibility issues, improving readability and usability.
Through testing with power users, we validated that the redesigned flows were more intuitive and required fewer steps. Improving efficiency would drive adoption and promote a positive image of the new designed platform
Balanced modern aesthetics with the platform’s conservative industry expectations by updating UI components without overwhelming existing users. I wanted to be mindful of that and ensure the UI has as strong a focus on functionality as it does on the design.
Using weekly design/dev syncs, Figma annotations, and power user insights, we built a more efficient, scalable, and user-friendly product.
This project reinforced the value of Design Thinking, cross-functional collaboration, and systematized design. By focusing on user needs while ensuring technical feasibility, we delivered a more intuitive, efficient, and accessible experience.
The redesigned CSR Payment Suite is set to release in Q2 2025, and I’m eager to measure its real-world impact post-release.
