Establishing a Cross-Platform Design System for Consistency and Scalability
As Singlife expanded its digital product footprint across web and mobile platforms, inconsistencies in design execution started to surface.
A unified design system was introduced to provide a scalable and maintainable foundation, bringing together web and app designs under a shared structure. This system aimed to reduce redundancy, improve efficiency, and align product teams toward consistent user experiences.
Design System
Design Ops
Cross-Platform
Component Libraries
10 UX designers, 2 UX writers, 2 managers, 1 lead developer
Aug 2023 - Now
Singlife
My Role
Leading design system initiative from strategy to implementation
As the lead designer on this initiative, my responsibilities included:
Defining the scope and success criteria for the system in collaboration with design leads.
Leading audits, component creation, and documentation to form the initial foundation.
Proposing component decisions and alignment criteria, backed by rationale.
Coordinating with lead developer on implementation via Storybook.
Supporting adoption by providing consultation to designers on usage and adaptations.
Allocation of component creation
Problem
Fragmented workflows and lack of shared collaboration models
Diagram of fragmentation in design systems
Fragmentation across platforms
Web and mobile designers had been designing in parallel, which led to duplicated components and visual inconsistencies. Without a shared library or single source of truth, alignment required frequent back-and-forth between designers and increased overhead for delivery.
No shared model for collaboration
Component creation was handled individually across projects. There was no consistent process for how or when designers should contribute to a central system. This made reuse unpredictable and limited design scalability.
Limited capacity for centralisation
Although the idea of a unified design system was welcomed, it wasn’t formally prioritised at the time. Designers were deeply involved in their own project work, which meant system contributions happened only when capacity allowed.
Solution
Building structure and consistency through centralised components and clear governance.
The Life Design System was developed to bring structure and consistency across platforms. The approach focused on centralising core components, establishing shared criteria for inclusion, and setting clear design rules to guide contribution.
Key elements of the solution included:
Audit and Alignment
A foundational audit identified common patterns and platform-specific variants. Shared use cases were aligned under a unified component structure based on clear criteria:
streamline across platforms,
no enhancements, and
only accept replacements.
Aligned components' specifications
Design Libraries
Three published Figma libraries—Foundations, Components, and Global Colours—offered a central resource for designers across the team. These covered typography, colour, grid systems, and a suite of modular, reusable components.
Design system files in Figma
Governance Structure
A lightweight SOP and review process were created to support the system's evolution. Component changes followed defined decision rules and required rationale and approval to ensure consistency and minimise unintended impact.
Governance flowchart
Component Guidance
Developers were engaged early through the creation of Storybook, enabling isolated development and faster feedback loops between design and engineering.
Storybook
Showcase: System Architecture
The foundation, decision-making, and flexibility that enabled scalable, consistent design across platforms.
System Foundations
The design system was structured around three Figma libraries, each serving a specific purpose while working together to create a unified experience across products:
Foundations
Defined core design tokens including typography, spacing, colour palettes, and grid systems to establish the visual foundation and support accessibility.
Components
Built a shared library of reusable interface elements such as buttons, form fields, cards, and navigation, each with consistent states and variants for flexible application.
Global Colours
Created a centralised brand colour system using semantic tokens, ensuring accessible and consistent use of colour across platforms.
This setup gave designers a shared foundation to work from, reducing fragmentation and aligning design across teams and platforms.
Design Consolidation & Criteria
During the system's creation, components were gathered from all platforms. To reduce redundancy and ensure cross-platform alignment, a set of criteria was used to decide what would be included in the new system:
Must work across platforms without relying on platform-specific styling
Only one version per component, no duplicates or feature-enhanced variants
Must have a clear, shared use case and documented rationale
This process helped streamline the system to include only what was essential and broadly applicable.
Consistency over time was supported through clear criteria and practical documentation, allowing the system to evolve without compromising its integrity. Documentation and Figma guidance supported designers working across projects, helping teams apply the system consistently and contribute new patterns when needed.
Flexible Implementation in Practice
The system was designed to support consistency without enforcing rigid rules. One example of this flexibility was in error handling for form cards.
For consumers
Less frequent users
Subtle inline messages and minimal visual disruption helped reduce cognitive load.
For advisers
Frequent users
Focused on speed and efficiency—stronger visual signals like outlined cards and notification banners were used to surface issues quickly.
Both approaches remained consistent with the core system, showing how it could tailor interfaces for different users while staying aligned on structure and interaction patterns.
Impact
Measurable improvements across team and platform consistency
Screenshot of Figma analytics
Achieved full adoption by 10 UX designers, embedding the system into daily design workflows across projects.
Reduced duplication of effort and improved overall design consistency across platforms.
Established the design system as the primary reference, enabling efficient creation from a consistent, scalable component baseline.
Validated strong team engagement and usability via an internal survey, confirming the system supports faster, more confident design work.
Improved collaboration with developers through Storybook integration, accelerating prototyping and implementation cycles.
Challenges
Post-launch realities and evolving team dynamics
Team capacity and shifting priorities
After the initial rollout, keeping the system updated became difficult. Designers were focused on ongoing delivery work and often lacked time to create or maintain components. System contribution became secondary to product responsibilities.
Low engagement with documentation
Although a structure was introduced for documentation, the habit didn’t stick. Designers rarely had bandwidth to update the system or log usage. The ‘Single Use Case’ reference page remained underused, which led to fragmented variants.
Reactive maintenance model
After the system’s initial rollout, personal bandwidth shifted significantly due to new responsibilities on a high-demand product track. Without a dedicated owner or structured support, ongoing system improvements naturally became less frequent. Instead, maintenance evolved into a consultative role, providing guidance to designers when alignment was needed or questions arose.
Learnings
Key insights from building design systems in real-world conditions
Foundational systems thrive with clear governance, but culture change takes time.
Contribution requires structure and capacity. Formal support, even lightweight, can greatly improve participation.
Starting small and proving value through one project helped set the tone for broader adoption.
A design system doesn’t have to be perfect at launch. It must be useful, usable, and open to evolution.
Next Steps
Ongoing efforts to strengthen and evolve the system
Efforts are ongoing to:
Strengthen documentation practices.
Encourage use of the ‘Single Use Case’ reference pages for better visibility and consistency.
Collect feedback to identify frequently reused components.
Continue promoting system relevance through consultation and support.
The system continues to evolve, but its foundation is firmly in place. It now acts as a trusted reference point for the team, supporting faster delivery, better alignment, and a more consistent user experience across products.