Establishing a Cross-Platform Design System for Consistency and Scalability
Designed for cross platforms
Background
Context
As Singlife's digital presence expanded, the need for a consistent and efficient design approach across both desktop responsive and app platforms became apparent. While efforts were made to maintain a cohesive design language, challenges arose in ensuring consistency between the two platforms.
To address these challenges and streamline the design process, the Life Design System was developed. This unified framework centralises design assets, enforces design standards, accelerates time-to-market, and empower UX designers to shift their focus from repetitive tasks to more strategic initiatives.
My role
As Lead Designer, I spearhead the creation of the Life Design System. Key responsibilities included:
Defining the vision
Collaborating with design leads and key stakeholders to define the scope and objectives for the system.
Fostering collaboration
Facilitating close collaboration between designers, developers, and other stakeholders to ensure seamless integration and ongoing refinement.
Guiding design system architecture
Leading the design and development of core components, ensuring they were scalable, reusable, and aligned with user needs and business objectives.
Establishing governance
Establishing a clear governance structure, including bi-weekly meetings and a comprehensive Standard Operating Procedure (SOP) to guide maintenance, updates, and ensure consistent application of the system.
A key part of this role was leveraging existing user research and project-level insights to ensure the design system addressed the diverse needs of users.
Deliverables
Design System
Design Principles
Design Style Guide
Guidelines
Prototype
Outcomes
Achieved full adoption across a team of 10 UX designers.
Established three fully published design libraries: Foundations, Components, and Global Colours.
Developed modular, scalable components to ensure consistent user experiences.
Year
2023 (Continuous iterations)
A user-centred approach
Understanding user needs was paramount. We conducted user research, including interviews and usability testing on project level to identify the distinct needs of consumers and financial advisers.
Research findings revealed differences in how consumers and advisors interacted with products. Consumers, often less frequent users, required more guidance and support, while advisers, interacting with the platform daily, needed efficient and streamlined workflows.
To accommodate these diverse needs, we adopted the principle of "common ground with flexible application." This approach provides a foundation of shared components while allowing for adaptations to cater to specific user groups.
Example
Error display for fields in cards
Consumer
To minimise disruption and maintain a user-friendly experience, error feedback priorities clarity and conciseness.
Approach
Inline error messages
Displayed directly below the respective mandatory fields.
Card border
Highlighted only when fields are considered a collective unit within the card.
Error notification
Used sparingly, primarily when card content goes beyond the fold/viewport and obscures inline error messages.
Adviser
To support their need for efficiency, the design system prioritises clear and prominent error feedback for quick scanning and error identification.
Approach
Inline error messages
Displayed directly below the respective mandatory fields.
Card border
Highlighted to visually indicate the presence of errors.
Error notification
Displayed to provide an immediate and visible alert.
Core elements of the design system
These core elements – Foundations, Components, and Global Colours – work together to create a unified and consistent design language across Singlife digital platforms. This ensures a seamless and cohesive user experience while maintaining brand integrity and accessibility for all users.
Foundations
A robust foundation of typography, colour palettes, and grid systems to ensure visual consistency, accessibility, and brand recognition across all touch points.
Components
A comprehensive library of reusable UI components (buttons, input fields, modals, navigation elements) designed to meet the specific needs and expectations of different user groups, prioritising usability, accessibility, and an intuitive user experience.
Global colours
A centralised system for managing brand colours, ensuring consistent application and accessibility across all platforms, enhancing the overall user experience and brand perception.
Technical implementation
The development team utilised Storybook, a popular tool for developing and testing UI components in isolation. This platform provided a dedicated environment for building and refining components, ensuring they met functionality and performance standards. Storybook also facilitated collaboration by enabling designers to review and provide feedback on the developed components within the platform.
With these insights in mind, the next challenge was ensuring seamless integration into the development process. To achieve this, Storybook was used as a tool to bring our components to life and maintain alignment between design and development.
The governance framework helped ensure seamless coordination between designers and developers, facilitating the successful implementation of technical solutions like Storybook.
Impact and outcomes
While quantitative metrics are still under development, the Life Design System has already demonstrated significant positive impact:
Increased design efficiency
Designers have reported a noticeable increase in efficiency due to the availability of pre-built components, reduced design iterations, and streamlined workflows.
Improved design consistency
The system has significantly improved the consistency of digital experiences, resulting in a more cohesive and professional brand image.
Enhanced collaboration
The system has fostered closer collaboration between designers and developers, leading to more efficient and effective project execution.
Challenges and future directions
Continuous advocacy for the system's value and addressing emerging challenges are crucial for ongoing adoption and utilisation. Gathering feedback from designers and developers and iteratively refining the system based on their input is essential for its long-term success.
To quantify the system's impact more effectively, potential metrics, such as time saved on design tasks and the frequency of component reuse will be explored.
Recognising the dynamic nature of the digital landscape, the design system was built with scalability and adaptability in mind.
Modular design
Components were designed to be modular and adaptable, allowing for easy customisation and integration within evolving digital experiences. This flexibility ensures that the system can accommodate new features and user needs as they emerge.
Accessibility considerations
The system was built with accessibility in mind from the outset, adhering to WCAG 2.1 guidelines to ensure inclusivity for all users.
Conclusion
The successful implementation of the Life Design System has significantly enhanced design efficiency, improved user experience, and fostered a culture of design excellence within Singlife. This initiative demonstrates the successful implementation of a comprehensive design system that addresses key challenges and delivers significant value to the organisation.