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.
Top Navigation bar for web
One example of a component I created is a top navigation bar for web applications, shown below in various contexts across surfaces. 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. 

Design system technical documentation

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. 

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