Fin Analytics: Launching a lean design system expediting design and build process | Web

Starting From The Ground Up

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

The Challenge: Design Process Limitations

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?

The Solution:

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.

User Goals:

Improve Accessibility

Ensure components adhere to WCAG guidelines for accessibility for users

Business Goals

Build Faster

Increase efficiency by having consistent components in Figma which will save a lot of time and money

Flexible to Changes

Building an adaptive system given that changes happen quite frequently

Audit What We Have

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

Visual Language

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.

Find Tangible Inspiration

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.

Building Brick By Brick

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

Expedite Designs

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.

Growing Every Iteration

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.

Other Design System Work

If you are interested in seeing other design system work at a glance, click below!