Fin is an internal tools data software that helps CX teams with productivity and coaching their team members through data collection and data visuals.
As the first product designer in the company, creating a cohesive design system was essential for building the foundation for design and engineering efforts in the future.
Brand Designer, PM, Eng Team
Dec 2021 - Aug 2022
Fin comprises of a web console and extension experience. The foundational product functionally worked, but lacked the consistency of branding, clarity within design, and was hard in creating new assets.
As a result, I had a difficult time in creating concepts without something to pull from. For developers, they wasted time in building duplicate components with similar function.
How can we organize our current assets and streamline making new ones?
A design system. Yes, that was an easy answer, but a bit more trickier than it sounds. A good design system keeps track of assets not only for designers, but for product and engineering folks. A source of truth that scales and adapts over time. A big task indeed, but the reward in the future has so much potential.
Ensure components adhere to WCAG guidelines for accessibility for users
Increase efficiency by having consistent components in Figma which will save a lot of time and money
Building an adaptive system given that changes happen quite frequently
I explored our current product and saw what components are used multiple times and standardized their designs. Also take into account what various states they may have. For example, a button would have a rest, inactive, and hover states. Inspecting further, our navigation uses a lot of icons for our drawer nav items, which becomes an issue with smaller screen sizes and cuts off the titles. Finding various examples like that and cleaning them up was essential in building the framework
My goal was to not reinvent the wheel of design systems; rather it was to see successful design systems and replicate as applicable. Once compiling my components was finished, I headed for inspiration from various companies like were Airtable, Uber, and Microsoft Teams. From branding guidelines to use cases each one had something different to offer that I could learn from.
•Documentation - a space to refer to regarding use cases and change logs on Notion
•Visual Language - what does the future of the product look like with the new design system
•Pattern Library - a compilation of all atomic components that can help streamline designs efficiently and effectively
Once the beginning stages of the design system were completed, the design process became exponentially faster and more efficient. Designs that would normally take a couple of hours became done within less than an hour, which helped increase my bandwidth for more projects.
The final version today has gone through several iterations over the past several months. Improving organization of assets to updating change log strategy goes to show how a design system is a living deliverable. Since I was the only designer, creating and growing the design system will tremendously help further the designs of future concepts.
If you are interested in seeing other design system work at a glance, click below!