Saguaro Design System

Repay_

Brand Manual, Design System, Components/

2024

Repay, a leading provider of payment processing solutions, recognized the pivotal role of user experience (UX) and user interface (UI) in their product offerings. In response to the evolving needs of their users and the market trends, Repay embarked on a journey to revamp their Design System. The result was Saguaro, a comprehensive and cohesive system aimed at enhancing usability, consistency, and efficiency across their product suite.

Project

Role

Lead Product Designer

Period

2 years

Tools

Jira
Confluence
Figma

Challenges

Before the redesign, Repay faced several challenges in their UX/UI approach:

Lack of consistency: The existing design system lacked uniformity, leading to disjointed user experiences across different products.
Scalability issues: With the rapid expansion of Repay’s product portfolio, scalability became a concern, making it difficult to maintain a cohesive design language.
User feedback incorporation: There was a need to better integrate user feedback into the design process to ensure products aligned with user expectations and preferences.

Approach

Repay adopted a systematic approach to redesign their Design System:

Research and analysis: The team conducted extensive research, including user interviews, usability testing, and competitor analysis, to gain insights into user needs and industry best practices.
Collaboration: Cross-functional collaboration between designers, developers, product managers, and stakeholders was prioritized to ensure alignment and synergy throughout the redesign process.
Iterative design: The redesign process followed an iterative approach, with frequent feedback loops and user validation sessions to refine and improve the design solutions.
Accessibility and inclusivity: Accessibility and inclusivity were core principles guiding the design process, ensuring that Saguaro catered to users of all abilities and backgrounds.

Implementation

The implementation of Saguaro involved several key steps:

Component-based design: Saguaro was built on a component-based architecture, with reusable UI components that could be easily integrated across different products.
Design language system: A comprehensive design language system was established, encompassing typography, color palette, iconography, and interaction patterns, ensuring consistency and coherence.
Documentation and training: Extensive documentation and training resources were provided to internal teams to facilitate the adoption of Saguaro and ensure adherence to design guidelines.
Continuous improvement: Saguaro was designed to evolve over time, with mechanisms in place for collecting user feedback and iteratively improving the design system based on user insights and changing requirements.

Results

The redesign of Repay’s Design System, now known as Saguaro, yielded significant benefits:

Enhanced user experience: Saguaro resulted in a more intuitive, cohesive, and user-friendly experience across Repay’s product suite, leading to increased user satisfaction and engagement.
Improved efficiency: The adoption of a component-based architecture and design language system streamlined the development process, enabling faster time-to-market for new features and products.
Consistency and scalability: Saguaro provided a foundation for consistency and scalability, allowing Repay to maintain a unified design language across diverse product offerings and adapt to future growth.
Positive feedback: Users and stakeholders responded positively to the redesign, praising the improved usability, aesthetics, and accessibility of Repay’s products.

The redesign of Repay’s Design System into Saguaro exemplifies the company’s commitment to delivering exceptional user experiences and staying ahead in a competitive market.

Consistency was the key

By prioritizing user needs, collaboration, and continuous improvement, Repay has successfully elevated the usability, efficiency, and consistency of their products, setting a new standard for excellence in UX/UI design within the payments industry.