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