Product Designer

Design Systems

Creating and maintaining consistent, scalable components

My role
Supporting Designer
As a product designer contributing to Yohana's design system, I built several responsive components and created technical documentation for their implementation. I also made visual and functional updates to numerous existing components.
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. 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

After taking a close look at all the separate components across web and mobile, marketing and product, I identified several inconsistencies. These included the use of outdated button styles in the marketing navigation bar, inconsistent sizing of components, unlinked logo components, and inconsistent logo sizes, among other small issues. 
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. 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

I then set to work creating a master top navigation bar component, which I then adapted to create sub-variants for the different use cases. I made sure to start with the master 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

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
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

↑Back to Top