SimplePractice Design System

Project summary

Helped rearchitect and establish a design system to support a growing product line

Audience

Product team

Year

2025

Problem

Rapid product and team growth led to misalignment of visual vocabulary between the product ecosystem and the product team

Challenge

Years of drift and debt had accrued. Lack of visual vocabulary across teams.

Challenge

Years of drift and debt had accrued. Lack of visual vocabulary across teams.

Phase 1 solution

We performed several rounds of audits including how we use banners, color and the types of reusable components used across our product line. We also factored in mobile experiences and other products.

Phase 1 solution

This effort was very large in scope. It involved several rounds of auditing and interviews. Component rebuild, page templates, foundation repair, color theming, front-end component and documentation

Phase 1 solution

Intensive audits were preformed to understand current usage across our product for both web and mobile. We identified what’s working and what’s drifting. We then introduced new components across our Figma libraries and codebase for engineer reference.

Phase 2 solution

Color theming to support light and dark mode. Also opened the door to design tokens to support our multi-themed brand

Phase 3 solution

Outcome

We were able to publish a full-scale design system to bridge a gap between design and engineering. We also began implementing design tokens that were projected to save hours of time and effort.