Design System — Hydrogen

While working at Hydrogen, I build a Design System. Also, I worked on a variety of financial white-label solutions for web and mobile: Challenger Bank, Proposal Tool, Tokenization Tool, PFM app, and others.

Role:

Visual Designer

Year:

2019-2020

Team:

Siraj Bentria — Design Lead

Naomi Tenenini — Product Designer

Adapt to growth

Design systems are key to creating structure and consistency between products. As Hydrogen grew, it needed a design system to adapt to that growth.

Working with what you got

The design system in place at the time was called the Element UI Kit. It was an open-source sketch file that contained the basic pieces for creating a financial application. The kit came with a color palette, disjointed typography, and a messy collection of symbols. Upon my onboarding in the company, I noticed that things weren't interconnected as they should be.

Problems of Element UI kit

1. Text layers connected to one Text Style, and then altered

2. Colors didn't comply with Accessibility Standards

3. Iconography not pixel perfect. Icon canvas unequal

4. Symbol menu didn’t have any logic and it was hard to navigate.

While this kit did well at presenting the pieces, under the hood, everything was disconnected, and we see where things could be more structured.

Turning lemons into lemonade

The first step was to audit every icon, button, color, shadow, and define Text Styles. Color had to comply with Accessibility Standards, and iconography had to use the same canvas size (48x48). Elements had to be linked together, and not like in the Element UI kit case where they were treated as one-offs.

Developing New Colors

I collected similar pieces together and grouped them as Bases, Items, Units, Templates, and Pages. The inspiration came from the Atomic Design Methodology.

Hydrogen Design System Concept

Design System — Bases

Design System — Items

Design System — Units

Design System — Templates

Design System — Pages

Data Visualization

Old visualization colors required an update because the old pallet didn’t work well with the new Design System colors. Also, old visualization colors didn't have enough color contrast, and due to the number of hues available, their usage was confusing. Therefore, I developed a new cool pallet that satisfied all the above.

New Visualization Color Palette

The new Visualization colors worked really well among all our white-label apps (Proposal Tool, Tokenization Tool, PFM app).

Organizing files

Working in a medium-size team meant that Hydrogen files had to be highly organized. Therefore, encouraging usage of the Design System was important. By connecting layers to styles and importing Bases, Items, Units, Templates, and Pages from the Design System library allowed us better consistency and organization.

Smart Layout functionality

It was important to build symbols as dynamic as possible. Therefore, where needed I used smart layout functionality. This helped my team alter the symbol content without the need to check the spacing.

Smart Layout Examples

Design System in action

With this new system in place, it is a guarantee that all of our designs across all products would have a master library to build off from. The final step was actually implementing it in the company's projects (Challenger Bank App, Proposal Tool, Microsavings app, Tokenization Tool, PFM app, etc.).

Go back to Work page or visit:

Challenger Bank — Hydrogen

Meetup App