loreal.png

L'Oréal

 

L'Oréal takes on professional beauty

SalonCentric was launched by L'Oréal USA in 2008 to distribute hair care and beauty products to salon professionals across the US. The distributor currently operates 565 SalonCentric stores and more than 200 state stores over 48 states. I worked with L'Oréal on two phases of this product for both iOS and Android, owning the information architecture, user testing, UX, and visual design.

My role

During phase I, I worked alongside a lead designer. Together we had the opportunity to conduct a lean UX session with the SalonCentric team, talk to users throughout our process, and attend a SalonCentric LIVE show in which we demonstrated the app. For phase II, I led the re-design efforts with the assistance of a production designer on the Android designs. I used Principle to prototype transitions and AfterEffects to animate the splash screen intro.

Phase I: the problem

How might we design a solution for iOS that can be used to enhance the in-store retail experience?

Target audience

Hair stylists, salon owners, sales reps, store associates

Insights

After visiting the store and talking to users, this is what we found to be the common sentiments:

•  Customers are frustrated managing the store cards (membership, promotional)
•  Customers know what they’re looking for, want to get in & out of store quickly
•  Store associates frustrated by inaccurate inventory, store technology lacking

Constraints

Due to a number of acquisitions in 2010, along with other factors, SalonCentric’s technological infrastructure was lacking in its capabilities, and each store was different. To put this into perspective, some stores were still using fax machines to do business with customers, among other legacy technologies. This would simply take time to be brought up to speed, and that didn’t hinder us from creating the best experience with what was in place.

Primary navigation

During our lean UX session we experimented with this interactive concept design where the features in the navigation shrink down to card elements, allowing the user to see a quick preview of the content and interact with it by swiping the card up and down to open and close.

Wallet screen

From our conversations with customers, the wallet became one of the most important features to focus on. We wanted to make it as easy as possible for SalonCentric customers keep track of and manage all their different reward cards. From the wallet, the user is able to manually add their membership card, their store benefit card, view & activate brand loyalty cards, and find coupons. We broke this up into three distinct sections to help the user understand these different card types.

List creation

The typical SalonCentric customer does not spend a very long time inside a physical store, and we learned it was common for longtime customers to fax orders over for the store associate to pull, which allowed customers to quickly run in and pickup the items in store.

The items a salon professional might need to stock for themselves at any given time varies so greatly through a typical month (back bar items like shampoo, conditioner, color), a year of new trends (balayage supplies), and during busy seasons like the holidays (retail products). We wanted to make it easy for our professionals to create these lists so they would feel organized when running into a store, and allow them to send their lists to other stylists and preferred store or sales consultant.

The final product

We were pretty excited about how it turned out-- and the client was excited, too.

Hindsight is 20/20

Working with SalonCentric on phase I of this product was a fun experience but ultimately I think this version of the app was unsuccessful. We tried to push innovation in the wrong way, we had illusions of grandeur. The UX was not intuitive for our target audience, and the primary navigation of the app suffered. On top of that, our development team was not able to nail the smooth interaction in a way we were all satisfied with in the end. We had to fix this in order to ship, so we came up with the solution to model the navigation after the Android counterpart.

Revised navigation comps showing the dashboard screen in it's different scrolling and locking states.

Phase II: investigation

When we began phase II of this project I was eager to fix the issues we ran into during phase I. We started off by asking a few questions.

•  How did the app perform over the last year?
•  What features are users loving, looking for, or neglecting according to analytics?
•  In light of the data, where do we go from here?

User testing

We went back to the small store with a complete user test plan (see the plan) in our arms, a stack of $25 gift cards, and a basket full of snacks (duh). Remember in phase I how I said that SalonCentric customers 'want to get in + out' of the store as quickly as possible? We had only one day to commit, had spent hours on the test plan, and no one would talk to us (not formally, as outlined in our test plan anyway). So we left that day with very minimal feedback. 

Early A/B testing materials for the main dashboard

Data insights

The more active our iOS users, the shorter time spent on the app, and the less screens viewed per session (1.42-1.59). We learned that 89.5% of users were dropping off (>1.5 minutes) after using the wallet. This was not ideal, but we affirmed the idea that wallet was the most important feature in the app.

Our most active Android users seemed to spend an average of 1.5 minutes on the app, but accessed more screens/sessions within that time (3.58-3.84) than iOS users. Our theory is that Android users were more familiar with the navigation paradigm than iOS users and thus were exploring more of the app.

Overall, it was unclear what users were looking for because we could not determine if the data was showing an exploration of features, or if users were simply just swiping through the navigation.

The problem

How might we teach users about the other app features and better support them in discovering and utilizing more of the app? A big part of solving this would be complete reassessment and simplification of the navigation approach.

In this phase of the product, we would also be introducing SalonCentric's product catalog. This would allow us to enhance the list feature of the product by populating all the real product info into a list instead of the manual input list created in phase I.

Constraints

When it came to the shopping experience, technology would again be a constraint and we would not be able to allow in-app check out as prices differed based on location. Instead we would take the user to a mobile web experience to complete the checkout process. That didn’t hinder us from creating the best experience with what was in place.

Information architecture

I began the process by looking at the information architecture for the phase I product, and came up with a new map for phase II with the goal of simplifying our approach to navigation.

Overview of global IA

IA showing primary navigation elements

New navigation

In this approach we went with the standard bottom navigation iOS paradigm. As simple as it looks here, a lot went in to ensure it best represented what we learned was important to users, was clear and intuitive, and on-brand.

Re-designing the app

The visual system set up in phase I seemed quite dated by the time phase II began. The goal for this iteration was to create a stronger visual system that would withstand time and allow the brand to easily evolve aesthetically. The re-design also showcases SalonCentric's new logo, which they nailed with the humanist sans serif.

For the redesign of the app, I wanted to utilize a bright palette while still showing a human touch and invoking a feeling of warmth and personality.

Wallet

In the wallet, we maintained a similar UX pattern to phase I, but redesigned all the cards and coupons. The goal here was to balance consistency and flexibility to allow for varying amounts of content in the cards.

Shopping

Favorites list

The list feature from phase I could now tie to the real product details, thus it evolved as a favorites list where users can add items from the shopping catalog. We maintained the same sending options to allow the user to send this list to their saved store, their sales rep, or by SMS and email to anyone they choose.

Meet Demi

Demi is the brand mascot for SalonCentric, but she's not very mobile-friendly with all of her beautiful gradient meshes. I took special care to use her in places of the app where she wouldn't be distracting from the primary features but could still represent the brand.

Including in the splash animation.

saloncentric_splash-screen@2x_128dither_small.gif

Conclusion

I very much enjoyed the experience of working with L’Oréal on the SalonCentric product. It was important to look back on the first phase critically, and fix and enhance aspects of the project. I’m confident in the solutions we came up with, and I hope to see those features continually be enhanced as more technological infrastructure is set up in stores across the country.

This new iteration of the app was just released to app store! Check back later for the results.