THERON is a design system framework created to encompass web components and visual patterns that can be reused by the design and development teams of various brands and products under Purpose Financial. It's also a digital ecosystem that allows cross-brand platforms to share the same digital experience.
In-house UX Designers, Managers, Frontend Developers
/01 Led the process of transforming the UI kit into a multi-brand Design System.
/02 Creating design assets in Figma and collaborated with developers to build the storybook components.
/03 Lead the process of streamline the company's hand-off process and define the governance strategy.
Initially, Purpose Financial had three brands—Advance America, Perch Loan, and Fortuna Credit. After Perch Loan was discontinued, Purpose Money was added, resulting in five separate web apps. This created inconsistent user experiences and inefficient use of engineering resources.
The multi-brand design system started as a design kit with visual patterns and reusable components for the PWA project. However, misalignment with brand identities and functions required an upgrade to create a cohesive global framework.
Each brand has a unique identity, leading to different looks and feels across services. However, a shared web component system is essential, along with sustainable and efficient digital asset management.
To tackle this challenge, I researched how organizations like Volkswagen Group and Advance Publications addressed similar issues. I found that maintaining brand individuality while ensuring consistency through shared web components was a common approach.
The UX team faced challenges in using design components and deciding when to create new ones. Some designers overlooked existing components, while others felt constrained by the design system, limiting creativity.
I worked with the team to create a simple decision tree, guiding design critiques and discussions on using the design system. This tool helped balance creativity and consistency, improving collaboration and decision-making.
The brand identity includes color, typography, logos, and digital assets, used as design tokens to create reusable components. This ensures consistency across products while preserving uniqueness and improving development efficiency.
I helped define the type scale for the Advance America project, building on existing brand typography. As the project evolved, we identified the need for specific type tokens, such as a distinct scale for loan Terms and Conditions, which we later incorporated into the brand identity.
To ensure consistent typography, I added detailed specifications to the brand identity documentation, covering font sizes, line spacing, and weights for headings, subheadings, and body text. This streamlined the design process and maintained a cohesive visual language across all products.
The button design, inherited from the Advance America design kit, followed mobile-first principles. Initially, four sizes and three emphasis styles were created, but as development progressed, the team opted for a flexible button width, improving adaptability and consistency across projects.
Form fields are essential in financial services, guiding users through key flows. To build trust, we enhanced form field components with ‘hint’ elements, ensuring clear instructions. This approach helps users make informed decisions and interact with confidence.
Carousels were widely used on Advance America’s legacy homepage for testimonials. In the PWA project, we introduced three new carousel types to improve mobile promotional content and system notifications. These components proved valuable and were successfully reused in other projects, including the Perch Loan website.
