As Standard Life’s UX team expanded, we faced the challenge of maintaining consistency across a growing suite of digital products. To address this, I collaborated with another designer to create a comprehensive design system and document reusable UX patterns. This project aimed to streamline our design process, improve collaboration, and ensure a cohesive experience across all Standard Life digital platforms.

Impact

• Improved Consistency: The design system became the single source of truth for the UX team, to ensure design consistency designs across all products.
• Increased Efficiency: Designers and developers saved time by using pre-built components, reducing duplication of effort.
• Scalability: The design system allowed new team members to onboard quickly and maintain the same standards of quality.
• Adoption Across Teams: Workshops and documentation encouraged widespread adoption, leading to greater alignment across cross-functional squads.

The problem

With a growing UX team and multiple cross-functional squads working simultaneously, inconsistencies in UI components and design patterns began to emerge. This had an impact on our day to day work as we’re creating design debt that it was hard to fix.

• Slowed down the design and development process.
• Resulted in inconsistent user experiences across products.
• Increased the risk of duplicating efforts and design debt

Objective

To create a scalable design system that:

• Centralises reusable UI components and design patterns.
• Provides clear documentation for designers and developers.
• Ensures consistency and cohesion across all Standard Life digital products.

My role

I worked collaboratively with another designer to define, design, and document key UI components and UX patterns. My specific contributions included:

• Creating and testing UI components, including page layouts, cards, banners, navigation, content hierarchy
• Documenting UX patterns and guidelines to ensure consistency across the design team.
• Working closely with developers to align the design system with technical requirements on https://www.standardlife.co.uk/
• Advocating for the adoption of the design system across teams through presentations.

Steps to create a design system

1. Audit existing components and patterns
2. Define core components and UX patterns
3. Create a design system in Figma
4. Use Supernova to document each component and pattern in detail.

Examples

Cards

Cards were a critical component for displaying content summaries, financial information, and CTAs.

• Design Goals:
  • Maintain a clean, professional aesthetic aligned with Standard Life’s brand.
  • Ensure flexibility for various use cases (e.g., informational, interactive, or navigational).
  • Create responsive designs for seamless use across devices.
• Solution:
  • Designed modular cards with consistent padding, typography, and actions.
  • Documented detailed guidelines, which you can view here.

Hero banners

Hero banners served as prominent headers on landing pages, helping to highlight key messages and direct users to primary actions.

• Design Goals:
  • Deliver impactful visuals that grab user attention while maintaining clarity.
  • Ensure flexibility to accommodate different types of content (e.g., text-heavy or image-driven).
• Solution:
  • Created variations of hero banners with adaptable layouts for desktop and mobile.
  • Documented examples and usage guidelines, which you can view here.

Conclusion

This project demonstrated the importance of centralizing information and educating team members on using documentation in their daily projects to increase efficiency. After releasing the first version of the design system and documentation, we significantly reduced the time designers spent on UI design, allowing them to focus more on other UX tasks such as conducting usability tests and stakeholder workshops.