Making Complex Hair Color Formulas Fast to Read and Edit

Chromatic • SaaS

Overview

Redesigned how professional hair color formulas are displayed and edited, transforming a dense form into a clear, scannable cards optimized for fast daily use.

Product: Chromatic — SaaS tool for hair professionals

Users: Stylists creating and managing color formulas for clients

Role: Product Designer + Flutter implementation

The Problem

Hair coloring formulas contain many parameters:

brands & products
powders and developers
percentages and volumes
ratios
multiple colors with quantities
exposure time
metric/imperial units
localization

Originally, all of this was presented in text-heavy layouts.

Problem:

hard to scan quickly
difficult to edit
easy to misread values
slow during busy client sessions

My Role

Led the UX redesign of the formula creation and editing experience and collaborated with engineers to implement the new system in Flutter.

Approach

observed how stylists referenced formulas during appointments
explored their manually written notes

Solution

Introduced formula cards inside client profiles:

Structural changes

each formula displayed as a compact card
quick add/edit actions

Readability improvements

visual hierarchy for key values
less important metadata in grey
grouped related parameters
consistent formatting for units
localization + metric/imperial switching built-in

This made formulas readable at a glance and faster to modify.

Outcome / Impact

faster formula lookup and editing
fewer mistakes during preparation
reduced cognitive load for professionals
smoother workflows during appointments

The feature turned a complex configuration task into a quick, repeatable action.