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.
Product Designer
Brand Designer, PM, Eng Team
Figma, Notion
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
Let’s dream of what the product will look like. We wanted the product to look sleek, but not too big of a visual lift from our current state since we had a backlog of projects to do. The PMs loved the direction and were excited to see the design system come alive.
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.
Fortunately, we have an in-house brand designer that I collaborated on beginning this project. The tone, typography, and colors were extracted from the marketing design system, but adapted it into a product format. We chose the least amount of colors and components first as a way to build upon them later on. With each component, I double checked against WCAG guidelines for accessibility.
Even though Figma’s component system does streamline designs and changes, I only assigned some components that wouldn’t fluctuate frequently like buttons and links. For every new change, I kept a change log in Notion so I can keep up to date on interaction, design, and scope all in one place. I learned that this was great way to document changes to more complicated designs as well.
•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!