⚠️Challenge

There’s no design system at Scene Health and the current design is unresponsive

• Aperia had a large product ecosystem, but there was no shared design system across teams. In banking, this matters because users need clear, familiar, and trustworthy experiences across every product and workflow.
• Without a design system, teams had to recreate patterns and components again and again. This slowed delivery and made it harder to keep the experience consistent, accessible, and reliable in a high-stakes banking environment.

🏆Goals

Aperia needed to

• Update the existing product with the new branding effectively and consistently.
• Speed up the mock-up speed of the design workflow.

Road Map

With multiple products across the Aperia ecosystem, maintaining consistency became a growing challenge. I built the design system to create a shared foundation that could scale across products, streamline collaboration, and improve the overall user experience.

Design System Basics

Building out of Tokens

• The token is the smallest pieces in the design system. They represents a design property or characteristic, such as color, typography, spacing, or shadow.
• Tokens are used to maintain consistency and streamline the design and development process within a design system. Every component in the design system is built out of various tokens. In our design system, we call tokens Foundation.

8-grid System

• Utilizing numbers like 8 to size and space elements makes scaling for a wide variety of devices easy and consistent. The majority of popular screen sizes are divisible by 8 which makes for an easy fit.
• The principle of 8pt Grid is that to use multiples of 8 to layout, dimensions, padding, and margin of elements.

Building Sample

Prior to building the library, I created mockup design options for key pages to ensure alignment with our rebranded tone of voice: motivating, supportive, energetic, and conversational. This allows stakeholders to visualize the new branding on both products effectively.

Building the Foundation (Design Tokens)

Aperia design system has two main components: Foundation and Component. Foundation is where we house all our design tokens, such as typography, color, and spacing. These foundational elements are crucial, as they serve as the building blocks of our library.

Building Components

Each project has a component library, a collection of reusable interface elements themed by their foundations file. Throughout the design system we reference different component types such as global, structural, content, data, and utility. It was critical to define the differences between component classes so that design decisions are efficient and accurate based on the context of the page.

I define how components look and work, then set them up in Figma. On the other hand, discuss with developers to unify component APIs to make it consistent with Figma Variants.

For all components, I would built out all of their states and combine them as variants. To a component, designers would simply search for the component name in the Assets panel, pull in the component, and adjust settings to their liking.

I also conducted a series of Figma workshops to help designers get on board with the design system.

This is component settings in action! It is super easy to use and allow designers to build hi-fi design extremely quickly. Components provide a standardize template for design consistency but also offer enough customization that help users to be creative with the design.

Copy Writing

I worked with technical writers to document the voice and tone we should use in our products and some common-case recommended verb pages.

Documentations

In the main documentation, we document all UI specs and behaviors of components to make sure all members will understand and on the same page.

In the Storybook documentation, we document the component APIs and list out some common use cases, what should developers notice and what props to use in each case.

Update All Interfaces

I revamped every screen in both products with the new design system, reconstructing hundreds of interfaces from scratch. This involved aligning everything with the 8-grid system and using auto-layout for easier editing and maintenance. While it was a time-consuming effort, it allowed me to gain a thorough understanding of the product.

Accessibility Assessment

Following the WCAG guideline 3.0, I thoroughly reviewed all screens to ensure they align with industry standards. I simplified contrast, clear plugin consistency, and made sure all design elements were easily visible to the end user.

Client Feedback

Alice Hoang

Lead Design at Aperia

“I’m so impressed! The design system has significantly improved the consistency and efficiency of our product development process. It reduced design duplication, streamlined handoff between teams, and accelerated delivery across multiple products.”

Leo Tang

Product Owner at Aperia

“I had the pleasure of closely collaborating with Tai during my time as a senior product owner at Aperia. From a product perspective, the new design system made it easier to scale decisions across the ecosystem. It brought alignment between teams, sped up delivery, and improved the overall quality of the user experience.”

Reflection

Key Takeaways

• Designing at scale is not only about creating components, but about creating a shared language across teams.
• In a large banking ecosystem, consistency improves both usability and trust.
• A strong design system reduces repeated work and helps teams spend more time solving meaningful product problems.
• Accessibility and documentation are core parts of the system, not extras added later.
• The success of a design system depends on adoption, governance, and continuous improvement over time.