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.
Siraj Bentria — Design Lead
Naomi Tenenini — Product Designer
Design systems are key to creating structure and consistency between products. As Hydrogen grew, it needed a design system to adapt to that growth.
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
While this kit did well at presenting the pieces, under the hood, everything was disconnected, and we see where things could be more structured.
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
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).
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.
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
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: