Design System – Chassis

Development of component libraries
Cross platform

Problem

We lacked consistency in the user experience and UI across our major white-labelled mobile app. When working on a design of a new feature (or just updating the existing design), different people within a company used to create their own design components, patterns, and styles. We had no one-place to learn about our components. Everything was misaligned.

Solution

Creating a library of components designed to aid the existing team and anyone new who joins the company was the way to go. I collaborated with both the designers and the developers to make sure that we all understood how they saw the components being used by them; and for them to understand how the design team would use them. All assets were made accessible and scaleable, so that they worked in other apps (i.e. our main product was a white-labelled product used by other companies).

Design System Components

Documentation

To keep both the other designers and developers up to date with any changes to our Design System, I utilised ZeroHeight and created appropriate assets to create a design guide.

Design System Documentation

The Design System was accessible

I was responsible for making the components Iā€™d been working conform to the WCAG 2.1 AA standard. This included creating educational materials for the rest of the team to follow in ZeroHeight.

Chassis Design System accessibility

Asset libraries

All libraries and components were created in Figma. Since FloowDrive is an app that can be white-labelled, we used certain Figma plugins in order to make all our libraries and component libraries customiseable.