When Singlife and Aviva merged, we inherited numerous disparate design libraries. I led the charge to redefine our design language, consolidate and recreate assets, and update existing components into a single, cohesive design system.
See below how I rallied a team of designers to establish this unified source of truth, all while managing our ongoing project commitments.
Role
UX/UI Lead
Team
4 UX Designers
Length
MVP in 8 weeks
Outcomes
100% adoption across all design teams.
Reduced design mock up and prototype ramp-up time by at least 30%.
From 10 to just 3 design libraries.
A comprehensive design system website with usage guides.
Strong design consistency guaranteeing a cohesive experience across every initiative.
Inconsistent CX
Our design teams used multiple, disparate libraries, resulting in inconsistent design language, styling, and principles across applications. This led to a fragmented and confusing user experience where our web and mobile interfaces looked, felt, and functioned differently.
Confusing design directions
Designers struggled with inconsistent wireframe guidance and arbitrary naming conventions for styles and components. This created confusion, frustration, and made it difficult to efficiently find or utilize design elements.
Developer challenges
Developers faced their own hurdles with diverse technologies and numerous component libraries. They frequently questioned the need for multiple, nearly identical components and sought solutions for sharing UI components across different frameworks and libraries.
Our strategy
Our objective is to establish a design direction rooted in our design principles and create the foundational elements for our building blocks. These will enable us to consistently produce high-quality interfaces through streamlined design and code processes.
Steps I took
✨ Design Principles as our guide and compass.
🎨 Foundation elements like colors and fonts.
🧩 Components as building blocks.
📐 Documentations like usage guidelines and a website for easy reference.
🔥 Fireplace is a dedicated time and space for feedback and more.
✨
Design principles
Our design principles take inspiration from what matters most to our customers, the core values of our brand, and our team's design values. These principles not only steer our course but also imbue our design system with personality, forming the bedrock for all our creative pursuits. They serve as a universally understood guide for crafting new components.
🎨
Foundation elements
Our foundation comprises key design elements: Tone of Voice, Colors, Typography, Iconography, Illustrations, Grids, and Spacings. We took care that every color, typography and spacings surpassed WCAG AAA standards, and more recently APCA ratings of at least 60 for contrast.
🧩
Building pieces
Our interface design is constructed using components as the fundamental building blocks. Each component type and version adheres faithfully to our core principles. Although designers have the flexibility to customize components for specific cases, certain attributes such as text styles, spacing, padding, and corners remain consistent.
Additionally, we provide templates, which are pre-designed pages containing sets of nested components. These templates serve to enhance design uniformity and minimize errors. We offer two types:
Template pages encompass both general and journey-specific screens, complete with preset paddings, spacings, and components for their intended purpose.
Component groupings assemble various components, making them valuable for new applications or concept exploration. For example, you'll find a set of input fields for forms or a variety of card sizes with commonly used components.
📐
Guides and resources
Every component page has detailed guides explaining its structure, style, and usage. These guides are part of the library as components themselves, making it super easy for designers to find and refer to them.
We also cooked up an in-house website for documentation, acting as a point of reference for designers, developers, and others. It's a one-stop shop for all the deets on our components, with text, images, and even live demos showing how each component rocks.
And if developers need a hand, they've got quick links to different Storybooks (React and Angular) and guides for code.
🔥
Fireplace
I started Fireplace, a cool bi-weekly gathering between designers for all things Design System. In these chats, we dive into stuff like where the Design System is at, adding new pieces, jazzing up design libraries, and more.
With time, Fireplace has become a sweet hangout where designers and others can soak up lessons from real-life cases and build that cozy community vibe.
The outcomes we achieved
100% adoption across team of 14 UX designers.
This meant every designer on the team fully embraced and successfully integrated the design system into their workflow.
UI design and prototype ramp-up time reduced by at least 30%.
Now, every designer can deliver polished design solutions faster. They can quickly create high-fidelity screens and prototypes for testing or team discussions.
From 10 to just 3 design libraries.
The 3 design libraries are Foundations, Components (Main) and Illustrations. Our components are also designed and setup to be modular and adaptable to cater to a wide range of identified use cases and beyond.
A consistent UX and UI experience.
All of Singlife's digital products now have a consistent design, guaranteeing a cohesive user experience across every initiative.
A consolidated storybook (React).
The developers' library has been updated and now serves as a comprehensive reference. It streamlines the development process, reduces errors, and ensures the final product aligns with the design system's specifications.