Yohana Design System

Creating and maintaining consistent, scalable components

My role
scaling the design system
As a product designer contributing to Yohana's design system, I built several responsive components and created technical documentation for their implementation. I also maintained and made visual and functional updates to numerous existing components. Throughout my work on the design system, I collaborated with our design system lead, other designers on our team, and of course our engineering team to create and maintain components that met our designer's needs but were also technically feasible. 
Project
Top Navigation bar for web
One example of a component I created is a top navigation bar for web applications. Previously we had several different web top navigation bars across marketing and product, and I was tasked with creating a single component that would scale across all the existing use cases. 
Internal audit of existing designs
Below you can see the audit I conducted to take stock of existing top navigation bars, which were separate components at the time, and identify inconsistencies in content and structure. 

I conducted an audit of all the existing separate components for top navigation bars across marketing and product

Audit findings
After taking a close look at all the separate components across web and mobile, marketing and product, I identified several inconsistencies, including:
- the use of outdated button styles in the marketing navigation bar
- inconsistent sizing of components
- unlinked logo components
- inconsistent logo sizes 
After identifying the issues to be solved in order to consolidate the various top nav bars into one component with a few variants, I got to work fixing inconsistencies. 
Creating standard size variants for our logo component
One example of a sub-task that I took on at this stage was tackling the unlinked logos of inconsistent sizes that appeared in the various nav bars to create standard sizes for our logo component. I also went ahead and added dark mode logos to our design system since they were used in some of the navigation bars. 

Logo size audit (left) and my new sizing structure exploration (right)

Our logo component before (left) and after (right) my standard sizing and light/dark mode work

Creating a single, consolidated navigation bar component
I then set to work creating a primary top navigation bar component, which I then adapted to create sub-variants for the different use cases. I made sure to start with the primary variant so the structure would be consistent, enabling easy future updates to all variants. The result of my work is shown below in various contexts across surfaces.

Design system technical documentation

Project
Icon library reorganization
Frustrated by our inefficient system of having two separate Figma files to house our design system's icon components and their corresponding export frames, I took it upon myself to streamline our icon library.

Originally, our icon components and the export frames were kept in two separate files

The existing icon library was messy, redundant, and inefficient and required keeping two different files up to date

Consolidating our icon files into one library
I painstakingly copied every individual icon export frame from the original export file over to our Design System library, hiding them in auto layout frames right next to their component versions. This allowed us to deprecate the Icon Exports file and have everything in one place. While I was at it, I also reorganized all of the icon components and labels into auto layout frames to make them easier to find and keep neat when editing the icon library. 

Our new consolidated icon library after my reorganization process

I took advantage of Figma's auto layout feature to organize all of the icons into rows and categories

Each icon row now houses the DS component, export version, editable linework version, and alternate icons considered. I color-coded the different versions to make them easy to distinguish and hid all but the DS component to prevent confusion. 

Project
Dark Mode color palette
I created an accessible dark mode color palette and defined the required structural changes to the existing company-wide color palette.

Original light mode color palette alongside the dark mode color palette I created, which included my recommended structural changes to be applied to both modes in order to enable 1:1 switching

Similar Projects

Prototyping
yohana・lead prototyper
Member App Navigation
yohana・design lead
↑Back to Top