Design systems – Royal London

Royal London Design system
design.royallondon.com

Our main goal:

In the Design system team is aligning the look and feel across all business platforms.

The design system aimed to:

  • Remove reliance on front-end framework making it adaptable to any tech stack.
  • Improve efficiency by enabling quick and easy prototyping of screens and journeys.
  • All product teams had access to a central resource, promoting shared knowledge and collaboration within the company.

My role

As a Visual designer working on Royal London’s design system, my role involved designing and documenting a cohesive set of user interface components, patterns, and guidelines to make the system useful and functional for users. I created and maintained the different elements of the Design system. Also, introduced tokens to the system, made used of metrics and much more that can discover bellow.

Guidelines

Guidelines are much more than communicating the functionalities and applications of the design system. They can speed up the design and implementation process if used wisely. By incorporating real product examples, guidelines become more practical and user-friendly, which helps increase adoption and demonstrates the design system's value.

Foundations, components and patterns

Adapt and implement UX and accessibility research to create intuitive and flexible components and patterns. Communicate consistently and cohesively how to use and implement foundations, components, and patterns.

Tokens

I create tokens that make the design system accessible and intuitive for users, speeding up its adoption. I develop the language and necessary tools to ensure easy updates and manage breaking changes effectively.

Leadership and ownership in a team

My role depends significantly on constant collaboration with various team members, including UX designers, project owners, accessibility experts, and developers. Their expertise is essential for the process and the overall effectiveness of the design system.

Collaborative Leadership

Everyone shares responsibility for key tasks, such as organising sprints and planning future releases, ensuring diverse input and shared ownership.

Structured Processes

Regularly scheduled retrospectives and other necessary processes help maintain predictability and control within the team's workflow.

Clear Communication

Daily communication among UX designers, project owners, accessibility experts, and developers is essential for coordination and achieving optimal results. This includes considering the needs of different teams using the design system and planning for its future.

Flexible Adaptation

The multi-led approach enables dynamic adjustments and iterations based on team feedback, constantly reviewing and improving processes. We address issues promptly, the joke goes that the meetings about meetings actually pays off in the long term.

Metrics

As the Design system matures we have new opportunities to improve it. A good example has been metrics. Metrics have allows us to understand the actual usage of the components from designers. Metrics provide insights into design system users patterns. We set a metrics as one of our team goals as we are aware that a data-driven approach ensures an accurate an aligned progression between the products and users needs and behaviours.

Here are some useful ways a design system uses Figma metrics to improve:

Optimise variant use

Optimise Variant Use:
Analysing the popularity of component variants helps streamline the design system by focusing on variants that provide the most value, reducing unnecessary complexity.

Spot design inconsistencies:

Figma metrics help uncover inconsistencies in usage, allowing for targeted updates to ensure alignment with design principles.

Enhance documentation:

Understanding usage patterns reveals areas where additional documentation or guidelines might be needed to support designers in applying components effectively.

Promote accessibility:

By examining metrics around accessibility features (such as font sizes and contrast ratios), the system can enhance inclusivity and ensure all components are easy to use.

Components

Here you can take a look of the actual work of some of our components

Guidelines

A design system wouldn't be it without its guidelines.
Tags App designDesign systemsUX/UIVisual DesignWeb design

You Might Also Like:

Design Systems
Web design
UX/UI Design – TrustFlight
Design SystemsProduct designWeb design
BCA – Design Systems
Design SystemsWeb design