MADISON REED
Colorist App

Madison Reed Color Bar is fast + fabulous hair color, without the salon price tag. The colorist app is for the Madison Reed colorbars for the styleist to enter in the clients information and enter the invetory/product.

The Why

During a series of interviews with colorists, it became apparent that there are several problems with the current version of the stylist app. The main problems found were:

  • Color Advisor: A very confusing experience and doesnt work most of the time. The colorists sometimes don't even use the app.
  • Photos: Clients needed more examples of hair color on real people.
  • UX: Complicated flow and outdated codebase.
Old-stylist-app

My Role

From September 2018 to January 2019, I led the design for this project from its ideation to implementation.

In addition, I collaborated closely with 1 Product Manager and 3 engineers.

The app relaunched in all Color Bars in March 2019.

Our Vision

The Colorist

Our goal was to support Colorists in achieving consistent, high-quality results by seamlessly providing them with accurate information.

The Business

Give the business-relevant performance metrics and customer data.

The Clients

To give the clients helpful and relevant information.

The Process

Once we had collected all our research, the subsequent step was to execute a 5-day design sprint.

cb-process-1
cb-process-2

Mapping out the current and proposed experience.

The product manager was gathering the requirements for this project well before I started. We were able to map out the current app experience, pinpoint areas of frustration and replace specific steps for an optimized experience.

What came out of the mapping session?

Better data:

  • Consistent and accurate customer hair data using Machine Learning.
  • Better SLA data for labor efficiency tracking.
  • Tracking of customer's desired result.
  • Standardized formula input.

Speed:

  • From start to the timer in 3 clicks for returning customers.
  • Fast navigation for colorists within the app.
  • Answering color advisor replaced with a quick backie.

Better Tools:

  • Product images to help customers pick a shade.
  • Full historic view of the client’s history.

Revenue:

  • Upsell core products within the appointment.
  • Accurate charges for the extra product used in a service.

UI/Structure

This project was completely redesigned from the UI, UX, and tech stack from Angular to React/React Native.

We wanted to create a design system to be a crossfunctional design language without focusing too much on particular design guidelines to be consistent between web, desktop applications, iOS, and Android.

The way we were thinking about it is that if iOS had a baby with Material Design.

iso-1

Daily Appointments

Check your daily schedule, and understand what's going on for the day in the color bar.

Appointments-1
Appointments-2

The Consultation

To begin the appointment on the right note, it is recommended to take a backie and input the customer's hair data while conversing with them. This will provide a better understanding of their hair profile.

consultation-1
consultation-2

The Service

Select what you will be using for the visit and input the %of color used and set the timer.

service-1
Service-2

The Summary

Review the appointment, add some additional products, and finish the appointment with payment and gratuity for the colorist.

summary-1
summary-2