Madison Reed Colorist App
A redesigned stylist app for Madison Reed Color Bars—driven by interviews, a focused design sprint, and a simpler flow that stylists will actually use.
TL;DR / Design Work
- Redesigned consultation, customer history, and appointment flows.
- Technology in the salon was new to everyone, so adaptation would still need to happen.
- Colorists were excited to contribute to machine learning improvements.
Context
The Colorist App supported in-store colorists during customer consultations. It helped capture customer needs, guide recommendations, document color history, and support service consistency. If the flow was confusing or slow, it affected appointment quality, data capture, product recommendations, and revenue opportunities.
Who used the product
- Colorists running consultations and documenting formulas during appointments
- Salon and store teams managing schedules, service flow, and day-to-day Color Bar operations
- Customers receiving in-person color consultations and recommendations
- Internal teams using captured visit data for operations, product strategy, and service quality
Why a redesign was needed
Interviews with colorists showed the existing stylist app was not supporting consultations as intended. Colorists were working around the product instead of relying on it.
The main issues identified were:
- Color Advisor: A confusing experience that colorists could not depend on during live appointments.
- Photos: Clients wanted more examples of hair color results on real people.
- Workflow: Too many steps for colorists to use comfortably while consulting with clients.
My Role & Scope
I led design from ideation through implementation (Sept 2018 → Jan 2019), partnering closely with product management and engineering. The Colorist App relaunched in March 2019.
- Collaborated with Color Bar operations, engineering, and data science to align salon workflows and ML capture.
Research & Insights
We synthesized research, then ran a design sprint.
Better Data
- Customer hair data capture for Machine Learning.
- SLA data for labor efficiency tracking.
- Tracking of customer's desired result.
- Standardized formula input.
Navigation
- Navigation between consultation and appointment controls.
- The color advisor replaced with a backie.
Better Tools
- Product images to help customers pick a shade.
- Full historical view of the client's visit history.
Service & Products
- Upsell core products within the appointment.
- Record charges for extra product used in a service.
Mapping the Current & Proposed Experience
We synthesized research, then ran a design sprint. We documented the current experience, then designed the consultation and appointment flow.
Key Design Decisions
Four decisions shaped the redesign — each tied to how colorists worked in live appointments and what the business needed from the data behind them.
Simplified the consultation flow
Colorists needed to guide clients through consultations in real time, not navigate a complicated app. I worked on the consultation steps and their progression through the appointment.
Improved access to customer history and photos
Better recommendations depended on prior visit context and realistic visual examples. Bringing history and photo reference into the consultation flow gave colorists what they needed without leaving the appointment screen.
Standardized UI patterns across platforms
Colorists used the product across web, desktop, iOS, and Android, and new hires needed to ramp quickly in busy salons. We defined shared patterns for the move to React and React Native.
Supported cleaner data capture
Inconsistent formula and visit data limited recommendation quality and downstream product learning. Structured inputs during appointments helped capture cleaner data for personalization, operations, and machine learning initiatives.
UI / Structure
This project was completely redesigned from the UI, UX, and tech stack—moving from Angular to React/React Native.
We created a cross-functional design system that stayed consistent across web, desktop, iOS, and Android without being tied to any single platform guideline.
The best way to describe it: if iOS and Material Design had a baby.
Daily Appointments
Check your daily schedule and understand what is happening in the Color Bar at a glance.
The Consultation
Taking a backie and logging client hair details while chatting gives stylists the right context for product recommendations.
The Service
Select the shade, record usage, and set the processing timer.
Testing in the Color Bars
After presenting to stakeholders and aligning the direction with the design, we tested with Madison Reed colorists within the Color Bars for their honest feedback.
What we learned
- Technology in the salon was new to everyone, so adaptation would still need to happen.
- Colorists were excited to contribute to machine learning improvements.
Design Deliverables
Color Advisor
Revised the consultation questions and progression.
Real‑World Photos
Added real customer examples.
Flow & Codebase
Updated the consultation flow and shared patterns for React and React Native.
What I'd Do Next
- Expand post-launch analytics to tie appointment efficiency to specific workflow updates.
- Layer guided education within the app for new stylists ramping into Color Bars.
Credits
- Product management, engineering, operations, and Color Bar stylists across Madison Reed.