Design system
Provide a single source of components, patterns, and styles and unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem.
Problem
Lack of consistency, outdated components and lack of structure was some of the main problems I faced when I started this project of re-building the design system.
In this case study I would like to share my experience of developing a design system for Fishbrain. The design system at that time was fragmentary, lacked consistency, and was partially outdated. Additionally, the old documentation left much open to interpretation. As a result, our product, brand, and engineering teams lacked a shared foundation around process, design language, guidelines, and UI pattern libraries. This created inefficiencies for each team, as well as inconsistencies within our product.
My task was to build a system that provides a unified set of UI, design rules and patterns. In addition, I was responsible for maintaining the design system clean and up to date.
Goal
By creating an updated centralised design system my aim was to:
-
Align our teams by giving them a more structured and guided way to build products.
-
Speed up our design and development process: with a ready-made library and patterns teams can create and test layouts much faster.
-
Improve brand perception and user trust through consistent experiences that work for everyone and allow users to accomplish their goals.
-
Promote accessibility of our products by building accessibility and inclusion into our component libraries, both from a design and code repository perspective.
Exploration
As a first step, I decided to make some research on how to build a design system. Some of the activities at this stage involved:
-
Researching other design systems and interfaces for components common practices. Atomic design methodology was the method I followed to build the new deign system.
-
Analysing the instances and ideating on the solutions that serve my goals best.
-
Unifying components. I merged different variations of components to leave only the essentials. For example, I reduced our colour schemes to a maximum of 9 shades for each hue and all the excessive variations were matched and merged with the decided upon schemes based on proximity.
Atomic design
Here are some screenshots of the design library
