Path-to-purchase REDESIGN

Role: UX, UI, & Research • Timeline: 4 weeks • Scope: Design Sprint

Understanding the

CHALLENGE

Madison Reed is an online subscription-based hair color company that individually matches every customer with the right shade of permanent hair color. It offers a unique, ammonia-free line of products and free color consultations with licensed colorists. However, customers visiting the Madison Reed website had hard time understanding how the company was different from the competition. They also were overwhelmed by the number choices and struggled to select the right color. This resulted in low conversion and high drop-off rates. To solve these problems, we decided to run a Design Sprint.

Day 1

EXPERT INTERVIEWS AND USER JOURNEY

We started the Design Sprint by interviewing the experts about their vision of the business. The team spoke to our Founder & CEO, as well as experts in the areas of Marketing, Technology, Product Development, Design, and Customer Service. These interviews helped us uncover opportunities in the way we position our brand, how we speak to the customers, and how we help her select the right color.

Next, we turned our attention to the customer. Prior to the sprint, I interviewed existing Madison Reed customers to better understand their motivations, expectations, goals, and pain points. Based on the interviews, I saw two groups of customers with distinct behaviors: Salon Goers and At-home Gurus.

During these interviews, I captured main stages of the users’ journey as they selected and purchased hair color from Madison Reed. We reviewed the journey map with the Sprint team, then we updated it with the insights from expert interviews.

Day 2

INSPIRATION AND SKETCHING

On day 2, we started by looking for inspiration from brands that have built a strong emotional connection with their customers. Then, we dot-voted on the stages of the journey map where customers experienced most friction and user experience needed to be improved. These areas were the homepage, color-matching process, and finding the right shade. After that, we sketched solutions as a team put them up on the wall.

Day 3

DECIDING

When we came back on day 3, the team did another round of dot-voting to identify the most promising solutions. During the critique, team’s opinions split between two very different paths to color selection. We decided to do a Rumble and prototype both of these ideas.

Day 4

PROTOTYPING

We organized our sketches into a story board to see how all pieces fit together. Then we created two, mobile-first prototypes to test with users. One of the prototypes simplified the customer’s path to purchase, while the other took her on a more informative and personalized journey. I used Sketch for designing the UI and InVision for adding interaction to the prototypes.

Day 5

USER TESTING

Earlier this week, we recruited 6 users that fit our persona profiles and scheduled testing sessions for the last day of the Sprint. While I and conducted user interviews, the rest of the team watched them from another room and took notes of their observations. During these sessions, we made a lot of interesting discoveries. While we were on the right track to simplify the color selection process, we still had a lot of work to do in the areas of informing the customer about Madison Reed hair color and giving her the right balance of guidance and freedom.

Additional

RESEARCH AND ITERATION

After the Design Sprint was over, my team and I continued working on the prototype. We incorporated our learnings from the user testing in the previous week and created another prototype that we also tested with the customers. Then, we repeated the process until we created a solution that met our design and business goals.

Quickest Path To The

BEST HAIR COLOR

Previously, the customer would receive up to 5 recommendations of the the hair color, which was too many choices for her. Now, the customer was recommended on primary color as her best match. She is also given an option to tweak this color if the recommendation didn’t meet her expectations. In addition, we provided an explanation as to why the customer was recommended a certain shade.

We introduced another path to purchase from the Product Detail Page that allowed the user to quickly connect with a color expert. This feature is aimed to help hesitant customers by providing them with help when selecting the right color and making colorists just one click away.

We made it easier for the user to compare the colors she was interested in. She could now look at two colors side by side to easily see the difference in the shades. We also made color descriptions more prominent to help the customer identify and remember the shades.

Homepage:

LIKE NO OTHER HAIR COLOR

We knew it was important to encourage the customer to explore the the homepage before diving into the color quiz. That’s why we placed points of differentiation above the next step (main CTA), giving the customer an opportunity to learn why Madison Reed is different from any other hair color brand.

Because of the previous success with user generated content and reviews, we decided to surface this information on the HP to help the customer build trust in the brand. Customers liked seeing hair color on real, un-retouched photos of women, so we included UGC showing what hair color results she could achieve with the Madison Reed product.

Asking The

RIGHT QUESTIONS

We have launched the redesigned experience and you can see it live at www.madison-reed.com.