Overview

Led the development of a web design system for a financial company, Americor, with over 200k active users. Developed guidelines, foundation of styles, components, and pages to unify design across multiple products.

This story is about bringing a design system to life, progressing from zero to a web version through many small steps, helping Americor achieve interface consistency and efficiency.

Before I joined, the design and engineering team primarily relied on Google's Material Design Component Library, utilizing design patterns from different products. This method allowed them to move fast and focus on building the core product without worrying about constructing custom components.

Solving Design Challenges with a System

The need for a design system became obvious when the company aimed to expand its product lineup (adding Credit9 and Advantage Law products). As new products demanded new design patterns, we decided to consolidate existing patterns and create new ones, ultimately leading to the development of a design system.

Why did we need a design system:

• A design system would improve workflow by streamlining collaboration between designers, stakeholders, marketing teams, and developers.
• Marketing opportunities required new products with similar styles but different design patterns.
• Many noticeable inconsistencies (fonts, colors, usage of components) would continue to exist as the product develops and iterations happen.
• Due to the nature of the B2C financial platform, there were many overlapping usages of common components (dropdowns, buttons, input fields, modals) with different states that could benefit from having established, consistent design standards.

‍

What were the constraints?

This decision came with its own set of unique constraints:

• No existing design system or pattern library, no variants, and no variables
• Outdated interfaces requiring style updates and new visual assets
• Feature teams designed experiences in silos
• Multiple products with similar styles but different color palettes -> Difficulties for the engineering team -> Implementation of design tokens and CSS variables
• Two-month deadline and no project management process
• Difficulty in measuring success due to the short timeframe
• Teams didn’t understand how a design system could help

The Challenges

1. The main challenges involved setting up web and mobile libraries in Figma (single source of truth), publishing them, iterating, and ultimately transitioning to Storybook as a long-term goal.
2. Without an existing workflow or organized library, I needed to quickly audit interfaces, understand the current workflow, and figure out how to structure the components in a way that would be easy to use for both current and future designers. This meant creating a system that was intuitive, organized, and scalable.

When I moved further in UX research, it turned out that engineers had problems developing CSS variables for each product.

Metrics: Before / After

• Created 38 responsive components with variants
• Created local variables with properties and themes from 0->1
• Expanded team from one to five members
• Developed 18 new patterns with updated style
• Established DS project management workflow efficiency between designers, engineers, and PMs

The Process

• Research & UI Audit
• Project Planning & Prioritization
• Build Library
• Review
• Documentation
• Handoff & Iteration

#1. Research & UI Audit 

• I audited our current product experience, including Figma files with components and interfaces, to identify common and overlapping patterns. 
• I researched competitor products for industry standards.
• I evaluated the existing component structure and styles.
• I met with the product design team and developers to discuss the roadmap and abstract workflow. We identified pain points, gaps, and inconsistencies within the design team.

We created a roadmap, collaboration workflow, and Notion Tracker based on the gathered information.

#2. Project Planning & Prioritization

We developed and documented the design language, which included style guides, pattern libraries, typography, colors, iconography, grids, spacing, components, and UI kits.

I organized visual assets in Google Sheets to build a project backlog with clear prioritization. The backlog was structured into milestones, descriptions (components, styles, documentation, UI kits), and tasks. Each task was assigned a priority level ranging from P0 (Highest) to P3 (Lowest).

Key aspects of my planning approach:

• Detailed breakdown: Each component was broken down into specific tasks with descriptions and requirements.
• Status tracking: Tasks were labeled with statuses like "Completed," "In progress," "Under Review," and "Revision Required."
• Scope management: I identified which tasks were in scope for the current monthly cycle and which were out of scope.
• Resource allocation: Time estimates were included for each task, helping with resource planning.
• Cross-platform: The backlog covered web and mobile app libraries, ensuring a cohesive design system across platforms.
• Foundational elements: I prioritized core design elements like color palette, grid, and typography early in the process.
• Component hierarchy: I organized components from basic (e.g., buttons) to complex (e.g., modal dialogs), building the system incrementally.

#3. Build a web library

I began by structuring our Figma workspace, implementing naming conventions, and creating thumbnail templates. While some styles and components were built upon existing interface patterns, others were developed from scratch. I consolidated existing components, identified new components, and sourced references, all validated by the design team. My initial focus was on foundational styles, including colors, typography, grid, spacing, shadows, and rounding.

That's where we faced a problem.

Americor operates three products (Americor, Credit9, Advantage Law) with identical color palettes. However, subtle element variations across products created issues for engineers working with CSS variables. Identifying specific colors and themes for different products using Figma's right bar menu was time-consuming and inefficient.

I proposed two solutions:

1. Utilize Figma's native variables
2. Adopt Design Token Studio (official Figma plugin). I created a demo presentation.

We opted for Figma variables due to time constraints. Following this, I focused on component development and created some pages for a UI Kit, using new components.

Accessibility:

As a designer, I aimed to define how a user interacts with the product, including accessible technology. To ensure our design met accessibility standards, I followed the Web Content Accessibility Guidelines (WCAG) 2.1 specifications. Additionally, I verified the accessibility of our visual elements using WebAIM's Contrast Checker tool ensuring sufficient contrast ratios for optimal readability and compliance with accessibility standards.

#4. Review

We established Design System Office Hours, bi-weekly meetings attended by the Design Lead, UX Researcher, and developers. These meetings focused on:

• Check to see if Master/Instance components work well
• Check to see if auto-layout works well
• Check if the styling change applies appropriately
• Check for any needed modifications to individual components

Daily collaboration and quick problem-solving continued through a Slack channel between engineering and design teams.

#5. Documentation

Creating the specs and anatomy: Each component and pattern was measured manually or using the Figma plugin.

After components were created, measurements were added, and approved by the UX team, product managers, and engineers, the next step was to create a unified self-explanatory style guide.

Each component documentation included:

• Usage guidelines and best practices
• Detailed specs and anatomy
• Relevant resources

Americor’s Design System

Here are some snapshots of recent designs.

Learnings

As my first experience building a design system from scratch, it taught me crucial lessons about the process and its complexities. Although we couldn't implement the mobile native design system and Storybook as planned for our long-term goals, the project significantly improved my Figma proficiency.

• Prioritize elements based on usage for initial sprints.
• Establish a written process from the outset.
• Collaborate with the developers. Find your best friend and validate your decisions.
• Use tracking tools like Google Sheets or Jira to monitor progress effectively. Choose appropriate project management tools to streamline workflow and communication.
• Maintain a detailed changelog for the master library.
• Conduct user research (interviews or surveys) before and after with developers and designers to validate your design.

If I had additional time, I would…

• Finished and published a mobile library and move to Storybook
• Put more love into designing tokens
• Add Dark Mode