Hair Color Bar Service Menu
My Role
Lead Product Designer
Duration
6 months
My Contributions
Information Architecture
UX Design
UI Design
Quality Assurance Testing
Content Management
The Team
Cindy, Lead Product Designer
Elizabeth, Graphic Designer
Pauline, VP of Product
Pavol, Software Developer
OVerview
Madison Reed enlisted my company, OnQ Solutions, to enhance their Matchmaker screen, an interactive touchscreen that customers use in their retail stores. They wanted a way for their customers to learn about their color bar services and routine hair care products on the Matchmaker.
I led the design of the Service Menu feature on the large interactive touchscreen from end to end - including research, problem identification, design, development handoff and quality assurance testing.
After the Service Menu launched in 50+ stores nationwide, the touchscreens saw a boost in customer engagement — a 115% increase in average user session duration.
HIGHLIGHTS
What we accomplished
Recognize at a glance, tap for details
Imagery, service name and pricing allow customers to quickly understand the offerings. Tap on a service for a detailed description and relevant photos from other customers.
Easy access to membership info
Now, customers can learn about all the benefits included in the high-value membership without having to ask an associate. A win-win for both the business and customers.
Preview all the screen’s features before you tap
A screensaver plays when the screen is inactive longer than a few minutes. With the launch of the service menu, I updated it to show customers what they can do on-screen.
CONTEXT
Adding more value on-screen
In 2021, Madison Reed debuted the Matchmaker screen in their stores - a 50” touchscreen in their retail stores designed to help customers find their perfect permanent color shade. The screen was designed and developed by OnQ and had great initial success, leading stakeholders to wonder what else can be added to enrich the customer’s in-store journey.
the brief
Expanding on-screen offerings
Since Madison Reed offers an array of services at their hair color bars, they requested to include these service offerings on the Matchmaker screen, so customers can easily browse their entire suite of products and services in one place.
discovery + Research
Understanding what exists today
Insights from our target customer
I conducted some secondary research to understand who was Madison Reed’s audience. My goal was to uncover their reasons for choosing Madison Reed and their current frustrations with hair maintenance. I presented this User Persona to the Madison Reed team for alignment on who we were designing this for.
Insights from store visit
I also visited my nearby Madison Reed store and spoke to the hair colorists there to understand how customers currently learn about the services and products. When speaking about services, associates usually refer customers to the existing service menu hung on a wall (pictured below). Some key learnings were:
Customers needed supplementary visuals. Colorists would pull up Instagram on their phones to show final results from past customers.
Not enough info about the membership. Since “Unlimited Roots Membership” is just a callout, colorists would have another pamphlet to explain the member benefits.
the challenge
How might we add an inspirational tool for her to learn about service offerings?
INFORMATION ARCHITECTURE
Assessing the journey
I created a site map to determine where these new offerings would live in the flow, considering the existing architecture that the users are familiar with. With different goals for the color swatch panel (existing), the services menu (new), and the color quiz (existing), I arranged them as different sections in the high-level navigation.
wireframes
Iterating beyond a sea of text
From conversations with the colorists and competitive research, we knew visuals were key to helping customers decide on a service. My first attempt at the menu design prioritized imagery in the visual hierarchy, followed by supporting text.
After getting feedback from peers, I did a second iteration to adjust the photo aspect ratio to 1:1 and keep all services above the fold as their existing menu did.
Both were shown to the Madison Reed team, and ultimately the second option was chosen for ease of scanning - customers can see all the services at once and easily compare between them.
Finally, a spot for member benefits
Customers need to know what that they’re getting for the membership fee. I had two approaches: the first is a direct adaptation from the Madison Reed site, while the second displays the main and supplemental benefits side-by-side.
The first approach’s layout splits the content into a header and body section. I was concerned that the user would scan the title and go straight to the "fringe" benefits — missing the main perk of unlimited root touchups entirely. In my second attempt, I kept all of the benefits below the header so that no benefits were missed.
Ultimately the first option was chosen for consistency with their website, though I still prefer the second.
DEV handoff + QA testing
Preparing for launch
I acted as the point of contact between Madison Reed and OnQ to gather the required assets. I also provided our developer with documentation on the new user flows, approved copy and assets, interaction details, and Figma files.
The week before launch, I tested the new build for bugs or deviations from design intent and approved content. I documented the issues with supporting photos and communicated them to our developer for resolution.
results
An boost in customer engagement
With introduction of the service menu, we saw a 115% increase in the average user session duration across 50+ stores nationwide. Users are spending significantly more time on-screen, suggesting that the new feature is valuable to them.
CONCLUSION
Some project takeaways
A picture is worth a thousand words
Customers understand visuals quicker than text. Adding supporting visuals when appropriate allows customers to scan the page and dig into what they care about.
When communicating results of QA testing to developers, photos and videos are significantly better at explaining the problem than just words.
QA testing is necessary and must be accounted for
The first build of any design likely will not come out exactly as I intended. Instead, time should be budgeted prior to the ship date for a few rounds of back-and-forth to clean up content, expected interactions, and software bugs.
