Flexo

Design system

Project overview

This is a short project I worked on as part of a small team within a design agency in London. The client was an insurance company with a data-heavy risk management platform that needed more clarity.

My ROLE

I was in charge of creating the component library. In the span of three weeks I delivered a solid foundation for a flexible system based around design tokens.

The real name of the client has been omitted for legal reasons. Any names and artefacts shown in this case study are fictional.

THE PROCESS

I started by going through the client's brand guidelines and I translated those into the foundations for the design system.
Local variables with primitives were created, along with text and effect styles.
My constant research into other successful systems made sure best practices were used for spacing, grids, responsiveness and system structure.

The next step was to analyse the existing wireframes to derive a list of components to prioritise. This list was then expanded to include all the components that would make this system a solid foundation for the entire platform.
I then proceeded to design each component, making sure to adhere to the rules I specified in the foundations.

I divided the design tokens in: Text, Surface, Border, Spacing, Radius. Each token had light Light and Dark mode.
The tokens were used on every element of every component in the design system, making it extremely flexible.

Components had semantically labeled properties and a nested approached was preferred in most cases to reduce configuration complexity.
Where appropriate, components had interaction applied to show state changes in the prototypes.
The system was reviewed internally to make sure that it could be easily picked up by any other designer in the team, and it was delivered on time.

  

Want to work together?

hello@tommasorota.com