Madison Reed — Home Page Redesign

Madison Reed — Home Page Redesign

Overview: Madison Reed is a hair color company. Originally a DTC online subscription service, they have grown into a nationwide, omni-channel force within the beauty space. Their mission is to reinvent how consumers think of the hair coloring experience, and the industry as a whole. Since 2013, the company has served millions of women award-winning hair color and has opened up 75+ hair color salons across the United States.

Impact: Expected 15–20% uplift in user engagement rates, increased content interaction by 2–3x within the first three months (pilot results), higher retention metrics and repeat logins.

Role

Sr. Product Designer

Duration

12 months

Team (Besides Me)

2 PM, 3 Eng, 1 Jr. Product Designer

The Problem: Establishing an Omni-Channel Brand

While Madison Reed had already created a formidable online DTC subscription experience by the time I joined the company in 2019, a major strategy shift was taking place: they started opening physical locations. This shift introduced a new brand channel to clients that were formerly unreachable through an online presence alone. The opening of brick-and-mortar salons increased brand efficacy greatly in the regions where they were launched. Madison Reed was creating a more complete "omni-channel" experience. By opening up more than one way to experience Madison Reed hair color, a primary focus of a home redesign project was to educate clients on their options.

The Problem: Establishing an Omni-Channel Brand

Step 1: Determine Most Important Brand Messaging

We started out by defining a list of the most important brand messages we had to offer: things like our subscription service, our ingredients, our in-person experience, and so on.

I worked with our marketing team to leverage marketing insights about our customer preferences, which informed this process.

I also interviewed Madison Reed customers and non- Madison Reed hair color users (folks that stated they colored their hair regularly) to get further data no the most important factors in making their decision to go with one color over another.

The end result was an ordered list that defined our brand propositions in such a way that reflected our research.

Insights provided by our marketing team helped inform the redesign & the ordering of content

An initial pass at information architecture and message heirarchy

Step 2: We know "What"… "How" will we achieve it?

After knowing the brand statements we wanted to make (the "what"), it was important to define the "how," that is, how we were going to communicate these messages. This section looked a look lot like "we know we want to do x, can we achieve that by doing y?" It was a period of ideation, quick mockups and competitive analysis.

Step 3: Low-Fidelity Mocks

After our competitive analysis and defining areas of improvement, we began to create more formalized wireframes and sketches of potential optimizations:

A major area of focus was our above-the-fold real estate. We were not leveraging it effectively in our original version. We decided to move forward with a concept of a hero carousel, giving us the ability to display multiple brand messages above the fold. We also optimized space by decreasing the size of the marketing banner found at the top. Last, we added CTAs which were originally omitted entirely from the above the fold space.

Step 4: Final UI

With our concepts defined, the next step was to turn them into a functional UI. One area of attention was how the hero section would react at our various break points. Above is the defined responsive logic of the hero section.

Below are the final components for each of the identified areas of importance.

Step 5: Redesign Round #2

As a team we revisited our entire First Experience flow, including the Home Page. We realized that some of our main goals were still not performing as well as we would like.

Step 2: We know "What"… "How" will we achieve it?

Hair Color Bar Visibility

Though we called out our salons (Hair Color Bars) more in the new home page, clients were still expressing confusion as to what they were. Through user testing, we found that explicitly showing images of store fronts was the most effective in helping new clients implicitly understand what a Hair Color Bar was.

Ingredients

We also found that talking about our organic and cruelty-free ingredients remained a powerful value proposition. We enhanced our ingredients section — allowing the user to get a high level overview of all ingredients as well as allowing them to drill in deeper by clicking or tapping on a specific ingredient.

Movement

There was also an expressed desire to add more dynamism to the home page, that is, help it to not feel so static. We achieved this by adding hover and scroll effects to various section, such as Featured Categories and our "We Got You" section.

Adam W. Jones

Adam W. Jones

Adam W. Jones