SnapCheck Design System
SnapCheck, a FinTech startup, provides digital check services to other businesses. Clients can integrate the SnapCheck brand, co-brand, or rebrand the product as their own—a practice known as white-labeling, common among B2B products.
I joined the company in late 2019 as the second designer. Frustrated with design inefficiencies, I spearheaded the creation of our design system and standardized our white-labeling practice.
Overview
Company
SnapCheck (Software as a Service)
Product
Digital check services platform
Timeline
May 2020 — Dec 2020 (6 months full-time)
My Role
Product Designer
Team
Emily—Front-end Developer
Shabana—QA Engineer
Ajay—Co-founder
Todd—Product Design Manager
Tools
Figma
Token Studio
Slack
Deliverables
Figma component library
Design Tokens
Standardized White-label guidelines
The Challenge
The first thing I learned on the job was that my manager, Todd, is a superhero. As the company's first designer, he single-handedly created every aspect of our web app. Since Todd was the entire design team before I joined, there was no need to share designs, so a proper design system or guidelines were never established.
As the demand for white-labeled versions of the platform grew, we faced several challenges:
Inconsistency: Without a base design system, client platform customization lacked standardization.
Inefficiency: Customizing the platform for each client demanded significant time and effort from the design and development teams.
Scalability: With the growing client base, a scalable and easily maintainable design system became critical.
The Solution
We needed a system to streamline workflows and onboard clients fast. This initiative has two parts: first, establishing our base design system; second, standardizing our white-labeling practice.
step 01
Understanding the users
Before creating the components, I wanted to understand how the design system could best serve our team. I took note of the pain points mentioned in team meetings and one-on-one conversations.
step 02
Auditing the code
The lack of a design system didn’t just create confusion within our team; it also impacted our end product. An audit of the code files revealed 26 shades of gray and 3 different font styles for the same heading in our CSS.
These redundancies in colors and assets contributed to code bloat and an inconsistent user experience.
step 03
Clearing up design debts
For version 1.0 of the design system, my primary focus was to address and rectify design inconsistencies and optimize suboptimal elements.
Topography
The SnapCheck product faced challenges with extensive numerical content. Research showed me that a monospaced typeface could significantly improve numerical scanability.
To stay consistent and cost-effective, I opted for Helvetica Monospaced, a sub-family of our existing Helvetica Neue.
Colors
The challenge with colors was that our brand color, SuperNova, had low contrast with white, especially on primary buttons with white text.
Switching to dark text would alter the look and feel, so I added a subtle shadow beneath the text to improve visual accessibility.
I created documentation to clarify all the essential elements our web app was built with, such as typography, colors, spacing, button states, and input fields, ensuring it serves design, development, and QA needs.
Documentation in Figma