Multi-brand iOS design system

01. Summary

What was delivered and how

Project info

  • Year: 2023-2024
  • Role: Senior Product Designer

Deliverables

  • Design foundations
  • Figma component libraries
  • Design system documentation

Outcomes

  • iOS design system supportive of multi-brand
  • Source of truth for design & development
  • Light / dark mode support

02. Background

Transition from single to multi-brand apps

Problem to solve

Fractions of a iOS design system have previously been implemented in isolation. Colours had been defined to support light and dark mode for a single brand. This in a way that it can't be re-used for Kindred's other brands and products.

Project goals

The main goal of this project was to create and define the design foundations for a multi-brand design system. This including colours, typography, icons & logos as well as documenting how to use them in design and code.

03. Research

Understanding previous implementation & iOS colours

Previous implementation

We recieved a walkthrough of what had previously been implemented and why. After that we quickly concluded that the colours can't be built upon as it had been created in an inconsistent manner using colours from our web design sytem that was not created for light & dark mode. The colours was also named using non-descriptive terminology that also would not work if the number of colours would increase. However the existing typography was consistent with our web design system which we decided to keep for now.

Extract of previously defined iOS colours

Understanding iOS colours

We conducted an exercise before beginning to define new colours for our iOS design system. This to understand how colours are intended to be used for iOS. After gathering valuable resources we decided that three sets of colours is going to be needed. One dynamic colour set where the colours adapt to users appearance settings (i.e. light or dark mode). Then a fixed colour set for cases where a colour should remain the same in both light and dark mode. Lastly a colour set for UI elements that requires specific colour mapping apart from the dynanic colour set.

04. Design

Defining design foundations

Design foundations

The process of defining the design foundations was done in close collaboration with developers, designers and product managers to ensure all needs and expectaions were met.

Colours

Three sets of colours was added into the design system: dynamic, fixed and UI element colours.

Fixed colours

Fixed colours was added and defined based on our exisisting web design system colours. The colours will not adapt based on user appearance settings.

Example of a fixed colour

Dynamic colours

Dynamic colours was defined using the prefix "system" to indicate that these adapts to a users preferred appearance settings.

Example of a dynamic colour

UI element colours

UI element colours was defined to be used for styling components such as buttons, text, backgrounds and icons.

Example of a UI element colour

Typography

As our apps consists of both native iOS and web views we decided to stay consistent with our web design system typography. This until web views have been fully replaced.

Example of a typography text style

Icons

A set of icons was added and named consistently. A basic set of icons is provided for all brands unless a specific icon set is intended to be used.

Example of icons

Brand logos

Brand logos was added and named so that they can easily be swapped. Naming example: brandLogo and brandIcon.

Multi-branding

Each brand are using the same naming convention for it's design foundations to ensure that everything looks and behave as expected when switching brands. Below are examples of colours and icons is represented across two brands.

Colours

Example of multi-brand colours

Icons

Example of multi-brand icons

05. Final result

A design system supportive of multiple brands

Two brands, one design system

From previously only having an app for one of our brands. We know have support to release another ones for any of our brands.

Two app builds using the same design system

Consistency between Figma & Xcode

All the design foundations that have been defined for the design system have been documented and implemented. A Figma library for designers and packages with enums, bundles and packages within Xcode.

06. Outcomes

Design and develop once to reduce time to market (brands, features etc.)

Scalable multi-brand design system

Kindred now has solid iOS design system foundation that supports multi-branding and light / dark mode. It has been designed to easily be able to add new brands when needed into the design system.

Toolkits for designers and developers

The design system can be used to design user interfaces within Figma with our new library that represents the code implementation in Xcode. Developers can utilise the design system via the enums, packages and bundles within Xcode.

Next project