Design System – Chassis

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.

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).

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.

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.

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.