FINSTREET

As a fast-growing startup with multiple sub-brands and products, there were several inconsistencies throughout their designs, and designers and developers were confused as there was no single source of truth. These problems created inefficient workflows and a disjointed experience across their products.

FINDING THE INCONSISTENCIES
FINSTREET had a team of designers all working siloed from one another, and all working to their own loose design systems. This way of working was causing inconsistencies and confusion.
‍
Firstly to understand the current problems, I conducted a detailed design audit of all of FINSTREET's platforms and existing design systems. Doing this helped me identify where all the inconsistencies lay and all the different components they used.

In the audit I was trying to find pain points for both the end user of the products, but also the users of the design system - the designers and developers. The client recognised that these inconsistencies were causing a lot of their workflow problems and were keen to fix these issues through a dedicated single design system for all of their brands and products to leverage.

AUDIT INSIGHTS
Through the audit I was able to find all the various instances of different components, as well as understand how often they were used. Through this I then identified the ones with the highest usage and of highest importance in the design system.

Some of the key problems I discovered through the audit were:
• Lack of documentation to define rules & guidelines for how to use foundational styles and components
• Inconsistent colours being used across brands
• Duplication of components and inconsistent styles across those components
• Components being implemented by engineers weren't matching the components in designs

PLANNING THE DESIGN SYSTEM
Once the problems and components were identified, I started to plan how to build the new design system. Firstly, I set about organising the design system file into foundations and components, then began to populate each category with their respective items like typography, colour, effects for foundations and buttons, input fields, cards for components. I used best practice methods to organise FINSTREET's new design system.

Next, using the scale of usage and importance from the audit, I prioritised the order of what to work on for the design system. This would coincide with a weekly review and delivery of items with the client. As the timeline for delivery was tight and the scope of work was large, I worked with another product designer to assist in getting the design system delivered on time.

DESIGNING THE SYSTEM
As we were working with 3 sub-brands with distinct colour palettes, we needed to define colour guidelines for all 3 and as a result we'd create 3 sets of colour styles for most components to ensure that each brand had their distinct colour palette showcased in their product.

During this process I also skilled up on best-practice naming conventions for components, as well as the most efficient way to design a single component and then rely on variant properties to take care of different component states, sizes and types.

We also kept in mind the front-end framework in things like the grid we used, as well as utilising existing framework libraries for things like system icons.

We also provided training to their design team on how to use the new design system to speed up their work and provide an overview of the documentation, which provided the rules and usage guidelines that the team were needing.

In the end, we created a very comprehensive design system that exceeded the client's requirements and would enable their designers to have a single source of truth to refer to.

Below are some of the final components from the design system:

• Comprehensive design system delivered on time, in a very tight timeframe
• Established global design system across multiple products & sub-brands that enhanced workflow and maintained consistency among designs