Joico JoiColor App

The Challenge

JoiColor, Joico’s haircolor education app was difficult to navigate and used uninspiring UI design that made useful features and content hard to find.

The Solution

The app’s navigation was refocused around three main features that colorists would love and the UI was redesigned to be more colorful and highlight interesting content.

My Roles

I was lead designer for all wireframing, information architecture, and UI design.

Background

Professional hair colorists are passionate artists that are often on the lookout for products and techniques that help them make clients happy. Joico recognizes this and wanted to release a mobile app that would help colorists recreate the latest haircolor trends with Joico products.

Original Page Map

The app’s original map contained a whopping 104 pages to navigate.

Improved Page Map

The update uses simpler navigation, preserving all key features and relevant content.

Reduction of Total Pages

Total pages were reduced by 63% while preserving all content.

I was brought into this project after it had started to help guide the information architecture, content strategy, and design the UI. I quickly found that the original navigation structure of the app was unnecessarily large, making important features and content difficult to find. Focusing on tasks that users would find most helpful, I reorganized the navigation to remove bloat.

The new, more intuitive navigation structure required roughly a third of the pages of the original while preserving all of the features and content that we believed colorists would be interested in.

Colorist Needs

The new navigation focused around three significant points of product-related education that colorists need and are presented in a scaffolded order: Shades are combined to create formulas, which are used in techniques.

Shades

How to use shades can be considered to be the foundation of haircolor knowledge. They are the haircolor itself. Brands like Joico have large shade palettes, so knowing which one(s) to pick can be overwhelming. This section helps demystify shade selection with a color-matching feature and provides product information about Joico’s offerings.

Formulas

How to properly mix shades and developers to create a client’s desired color is an artform that few truly master. This section of the app walks colorists through how to create the perfect formulas for any client and shares formulas that reputable Joico artists have used on their clients.

Techniques

Techniques are the final building block of haircolor education. Knowing how to apply color to the hair to achieve a desired effect can be incredibly difficult for many professionals. This is why the JoiColor app provides users a wealth of techniques that can be easily filtered by color.

Match A Shade

The JoiColor app takes advantage of an innovative feature in professional haircolor- color matching. Users can select a specific color in nay photo they take and find a corresponding shade in Joico’s product offering. This is the highlight feature of the app and is the first thing users see when they launch it. Finding a specific shade based on a photo gives colorists a simpler way to find what they want than searching through endless boxes of color in a local store.

Create A Formula

Knowing how to properly mix color is hard. Colorists are constantly asking companies like Joico for expert color formulas that they can use on their clients. The downside of Joico providing formulas is that each client requires a tailored mix of specific shades and developer. Formulas that are provided can serve as guidelines at best, but they will never be exactly what colorists needs for their individualized clients.

This feature solves that problem. It helps users find the exact formulas that they can use on clients to achieve the most desirable results. Users are walked through simple visually-supported questions that help them assess what mixture of shades and developer are right for their clients. Then users are presented with the ideal formulas, along with how long to let the color process in the client’s hair. No more guessork.