Skip links

Design System

Designing a System for a financial health platform

The platform for employee financial health with tools like Salary on Demand and Budgeting, integrating easily with HR. Employers save costs through lower turnover and improved productivity.

MY ROLE

Design Lead, UX Researcher,
Interaction Design, Prototyping

ENGAGEMENT

2 Sprints

CLIENT

Salary Hero

Challenge

How might we create a unified design system that addresses inconsistencies across the product, while also improving workflow efficiency between designers and developers.

Understand

Context

As a UX Design Leader at a high-growth startup, my primary objective was to build a foundation for the design team. The goal was the creation of a tailored design system that aligned with the startup’s unique needs and resources. This approach will help make the development process more manageable and also ensure that our design system will grow organically alongside the company.

Problem Definition

User Pain Points:
Users are frequently frustrated by inconsistent interfaces and poor accessibility, leading to a disjointed experience that erodes satisfaction and engagement.

Business Challenge:
As the company expands, the absence of a centralized design system creates misalignment between designers and developers. This results in operational inefficiencies, delays in product innovation, and missed opportunities to build trust with investors.

“We are scaling rapidly and need our products to be best in class to stay competitive.”
— JN, Founder & Managing Director

Discovery

To begin, I conducted a thorough audit of the existing components by analyzing all UI elements, components, and design patterns in the MVP version. This helped identify inconsistencies and gaps, while feedback from stakeholders further informed the findings.

Key insights include:

  • Inconsistencies: Variations in font, spacing, color, and alignment disrupt the visual flow and overall cohesion.
  • Lack of Visual Hierarchy: Information is difficult to navigate, as the design lacks clear distinctions in hierarchy, making it challenging for users to understand content priorities.
Homepage Audit

Planning

Priorities

  • M1 Immediate Improvements (Quick Wins): Identify and implement quick wins to demonstrate the design system’s value early on. This includes addressing the most apparent inconsistencies and usability issues that can be resolved quickly, such as standardizing button styles, fixing broken links, and ensuring consistent use of typography and colors.
  • M2 Long-term Vision (North Star): Define the long-term goals for the design system, including a cohesive, scalable, and user-friendly product vision. This overarching vision will guide the development of the design system and ensure alignment with the company’s growth and user needs.
Stage of design system

Ideate

Component Library Development

To build a comprehensive library of reusable UI components, we followed these steps:

  1. Component Inventory:
    We cataloged all existing UI components, identifying common patterns and core elements that could serve as the foundation for the library.
  2. Component Design:
    Each component was designed with reusability, accessibility, and responsiveness in mind, ensuring a consistent and scalable user experience across products.
  3. Documentation:
    Detailed usage guidelines, code snippets, and visual examples were created for each component, providing clear instructions for designers and developers.
Typography and Color

Documentation

Usage guideline

We developed a comprehensive style guide that outlines the visual language, usage, measurements, anatomy and component behavior like animate prototyping.

Usage Guidelines

The result

To integrate the design system into the existing product and development workflows.
1. Integration Plan: Develop a plan for integrating the design system into current and future projects.
2. Training and Onboarding: Provide training sessions and resources for design and development teams to familiarize them with the new design system.
3. Continuous Integration: Set up processes for continuously integrating and updating the design system components within the product.

Related Projects