Hello, I am
saloncentric.png

L'Oréal

 

L'Oréal

L'Oréal USA launched SalonCentric in 2008 to distribute hair care and beauty products to salon professionals across 48 states in the US.

L’Oréal was one of my longest standing client relationships and together we spent years refining and improving the iOS and Android applications with the ultimate goal of increasing engagement (time spent in the application) and improving the in-store experience for customers.

 
 
 

My role—
Sole and lead designer

The team—
Project Manager
Creative Director

Process—
UI/UX/IxD
Research

 
 
SalonCentric App
 
 

Target audience

•  Hair stylists
•  Salon owners
•  Sales reps
•  Store associates

Research

The SalonCentric store nearest the office became the testing grounds throughout the project. I visited regularly to observe customers, gather insights, and conduct guerrilla user testing.

While observing the store and talking to customers, I learned that:
•  Customers felt frustrated managing their store cards (membership, loyalty, and coupons)
•  Customers are incredibly brand loyal when purchasing products
•  Store visits are a necessary work chore, often taken on their days off, thus customers want to get in & out quickly
•  Store associates are frustrated by inaccurate inventory counts and archaic store technology

 
 
salon-centric-7.jpg
 
 

A/B testing

Hundreds of variations of screens are designed, discussed, iterated upon, and tested throughout the duration of a project. At the wireframe stage, I created two different concepts, centered around data-prioritized features, showing how we might group information differently. Our goal was to gain an understanding of what users expect to see when they first open the app.

 
 
sc_a-b testing.png
 
 

Information architecture

Information architecture helps align the team on a high level understanding of the product experience and feature hierarchy.

 
 
3 global IA.png
 
 

Simple navigation

Many careful decisions went into the final design of the standard iOS bottom navigation to ensure it is clear, intuitive, and places hierarchal representation on features that we learned are important to users.

 
 
sc_bottom nav.png
 
 

App overview

The app offers up the user’s preferred store location, a digital wallet, the ability to shop their favorite products, and more. The dashboard presents a feed of content that is sourced from other areas of the app, so that the user can save time and quickly access an aggregated view of important content such as new or expiring coupons, upcoming classes, favorite products, and more.

 
sc_redesign.png
 

Wallet

The wallet contains 3 different card types: membership, coupon, and loyalty (punch cards). Coupons and loyalty cards are designed to balance consistency and readability while also allowing flexibility for varying amounts of content to be passed in.

 
sc_wallet.png
 

Shopping

Customers can shop in the app to build favorites lists or have their products shipped to their salon or home.

 
 

Favorites list

Users can use their favorites list as a shortcut to add their favorite products to their cart or send a list of items to their preferred store for same or next day pick-up.

 
 

Empty states

Demi is SalonCentric's brand mascot, used primarily for print and in-store merchandising materials. It was a challenge finding a place for her in a native app as she is not very mobile-friendly with all of her beautiful gradient meshes.

 
sc_meet demi.png
 

In order to deliver brand consistency, I took special care in finding places throughout the app where Demi could live, including empty states and in the splash welcome message.

 
 
saloncentric_splash-screen@2x_128dither_small.gif