Hair Ludwig
Responsive Website and Branding Re-Design
My Role: UX & UI Designer, Researcher
Stakeholder: Ronald Ludwig (Hair Ludwig Business Owner)
Timeline: February 2020 (80 hours within 4 weeks)
Tools: Figma, Go Daddy Website Builder
The Problem:
Ronald Ludwig (Ludwig) is a Chicago-based hair stylist with 30 years of experience in the industry. After many years of working in various hair salons across Chicago, Ludwig opened his own independent salon studio, Hair Ludwig, in 2008.
As the owner and only stylist, he offers a much more intimate and personalized experience than what clients may receive at a bigger salon. Ludwig aims for his clients to have a fun experience with him, and of course be completely comfortable and happy with his work. All client appointment bookings are made via his website.
While Ludwig is focused on running his own salon, he does not have the time or resources to maintain the Hair Ludwig website. Ludwig stated, “I’ve had people tell me that my website is really dated, and I know it is, but I just don’t have the time to update it.”
Potential clients were shown the Hairludwig.com homepage and described their initial impression of the business:
How might we represent Hair Ludwig as an intimate and energetic salon and enable clients to seamlessly book appointments?
The Solution:
HairLudwig.com was completely redesigned, with the following focuses:
Modernize the look and feel to match Hair Ludwig’s brand aesthetic
Effectively communicate the Hair Ludwig experience and its pricing, hours and contact information
Enable clients to book and manage appointments across all devices
Discover: Research
Research Goals:
It was important to understand the content that users want and need to review when making professional haircare choices. To direct my research plan, the following goals were outlined:
Determine Hair Ludwig competitors in Chicago
Discover pain points that users experience when they have to find a new hair salon/stylist, and identify the steps they take in their personal research
Identify users’ most important preferences and aesthetics in a salon experience and/or specific stylist
Determine how users prefer to book salon services
Research Methods:
To dig deeper into understanding how HairLudwig.com needed to evolve, I used quantitative research methods including competitive research, market research and user surveys. To gain more behavioral insights, I used the qualitative research method of user interviews. Usability testing (further along in the design process) was also performed to help iterate on design decisions.
Competitive Research:
Hair Ludwig is an independent salon operating in Chicago, therefore I looked at six key salon competitors in the area.
All salon sites include services menu with pricing and links to their social media pages
The next most common content features are: stylist spotlights/bios, images of the salon space, online booking agents and references to professional products used in the salon
Half of the salons also included on site reviews and hairstyle image galleries
Market Research:
Market research helped me understand more about the professional haircare industry in the US, including its size, growth potential and user demographics. I especially wanted to gain insight into how US based consumers discover new hair salons and stylists.
User Interviews:
I wanted to speak to potential Hair Ludwig clients to gain better insight into their behavior and needs when searching for a new hair stylist or salon.
Number of interviews: 6
Methodology: Interviews were held in person and via video conference. The audio of each interview was recorded, with the participant’s permission.
Average Interview Duration: 25 minutes
Participants’ Demographics: Men and women aged 30-45
Empathy Map:
After conducting user interviews, I synthesized user statements into an empathy map. With this technique, I grouped similar responses together in order to see patterns in user responses, which eventually led to key user insights.
User Survey:
To obtain a larger pool of user insights, a Google Form survey was sent out to US based citizens who have received a professional haircare service (cut or color) in the past year. The survey asked questions around professional haircare experiences and preferences. 33 US based consumers, aged 18 - 44 responded:
Research Results:
With the competitive analysis, market research, user interviews, survey and empathy map complete, I was able to provide insights and answers to my original research goals:
Reviews (mainly Google & Yelp) are a very important part of the research process
Users will visit a salon’s social media, but also rely on Pinterest for style discovery
Salons with a convenient location (close to work or home) are desired
Users want to see images of the salon space, as well as services menu and pricing, to set expectations of the experience
Users want to see professional product carried by the salon
Online booking is a well loved and desired feature, especially since most users do not have set reoccurring appointments
While there’s a strong market for hair cuts, hair color is a fast growing segment
Define: Person and Features
User Persona:
Based on my research findings, I created a user persona, Blair, who represents Hair Ludwig’s target demographic. She’s an urban dweller in Chicago who is passionate about her career. She has a work hard, play hard mentality, so she allows herself a few luxuries in her life, such as professional hair services. I continued to reference back to Blair while designing the Hair Ludwig experience, to ensure that I empathized with her needs as a potential client.
Feature Roadmap:
Based on my research findings, I determined the key features of HairLudwig.com in order to support the needs of users when they are searching for a new stylist. I also listed out features that can come at a later date, as most of these would require a marketing and communications focus from the business owner.
Ideate: Maps and Flows
Site Map:
After the key features were determined, I created a site map to outline the top level navigation and outlined where content needed to be placed within the key categories.
User Flows:
Based on my user persona, Blair, I thought about the key tasks she would run through as a potential new client. She would want to research Hair Ludwig thoroughly to determine if this stylist and salon is a good fit for her (such research could include reading reviews, finding the location, viewing prices and images of the salon space, etc.). Upon deciding that she would like to visit Hair Ludwig, she would need to successfully book in an appointment with him.
Wireframes and Prototype: Low to Mid Fidelity
Sketches:
With the product features, site map and key user flows determined, I moved on to sketch out potential layouts for the Hair Ludwig homepage and appointment booking flow. In this brainstorming exercise, I started with paper sketches and generated 5 homepage layouts and 4 booking flow layouts.
Low Fidelity Wireframes:
From my initial paper sketches, I chose the homepage layout that I thought would enable users to easily find out who Hair Ludwig is, where he is located and why they should visit him.
I then moved to Figma to create quick low fidelity wireframes for the following pages: Homepage, Services, About and Contact. With this minimal prototype, I quickly tested 3 users to determine if everything they expected to see as a potential Hair Ludwig client was available and easy to find. Testing with a quick low fidelity prototype early on in the process allowed me to easily make layout changes before moving into the high fidelity stage. The tests were successful and confirmed I was on the right track.
Mid Fidelity Prototype:
From my low fidelity wireframes, I moved on to create a mid fidelity responsive prototype, complete with the booking process.
Test: Evaluation and Iteration on High Fidelity Prototype
Usability Testing with Mid Fidelity Prototype:
To determine if the Hair Ludwig prototype met usability needs, potential users were recruited to test the mid fidelity prototype.
Usability Test Objectives:
Determine if site visitors can easily find reviews of Hair Ludwig
Determine if site visitors can find the location of Hair Ludwig
Determine if site visitors can find the Hair Ludwig service menu and pricing
Determine if site visitors can find the type of product Hair Ludwig uses
Determine if a new user can successfully book a future appointment
Subject:
A mid fidelity Hair Ludwig prototype was used via the Figma prototyping tool
Participants:
5 participants (men and women) between the ages of 30 and 45, who have received professional haircare services (haircut, color, up-style) within the past year.
These participants were chosen since their demographics related closely to Hair Ludwig’s user persona, Blair.
Methodology:
I was the facilitator and took notes throughout the test.
With the user’s permission, I used audio recording during each test. Users tested the Hair Ludwig mid fidelity prototype in person on my laptop
Usability Test Results:
Test Completion Rate Goal: The goal is that 100% of users will be able to complete the five tasks.
Error-Free Rate Goal: The goal is that 75% of users will be able to complete five tasks with no errors or hiccups.
Usability Test Affinity Map:
Upon completion of the 5 usability tests, key notes and call outs were organized into an affinity map to gain better insight into high priority revisions, to ensure a 100% task completion rate.
Branding:
As mentioned, the Hair Ludwig brand was in need of a refresh. The client mentioned he wanted his salon to be portrayed as intimate, honest and energetic. The adjectives to describe the new Hair Ludwig brand became honest, energetic, professional and intimate.
The client also mentioned he wanted a refresh on the logo but wanted to keep the “H” and “L” combined within the word mark. Typography choices (Cabin and Lato) were made after the new logo (Cantarell) was created.
Hair Ludwig’s hosting platform, GoDaddy, only allows for one accent color in their site builder, so a greenish blue was chosen in line with the standard black and white template.
Final High Fidelity Prototypes:
Branding choices were then consistently applied to the revised mid-fidelity wireframes to create high fidelity mobile and desktop prototypes.
Final Prototypes:
Please Note: The launch of the Hairludwig.com redesign has been delayed due to the COVID-19 crisis. The site will be relaunched when the crisis subsides and Ludwig is able to re-open his business.
Key Learnings
There were many key lessons learned throughout this project, especially in regards to constraints in client timelines and business resources.
Conflict in user and business needs:
Users expressed a significant desire to view Yelp reviews in their research process, but my client did not have a positive relationship with Yelp and did not want to link out to them on the website. Therefore, a compromise was made to utilize Hair Ludwig customer testimonials on the homepage, instead of Yelp reviews.
Working around website platform (Go Daddy) constraints:
Hair Ludwig is hosted on Go Daddy, so the website redesign had to be built around Go Daddy’s capabilities and templates. It was important to continuously reference the Go Daddy templates while creating the wireframes and high fidelity prototype, to ensure I wasn’t designing out of scope.
Communicating with small business owners:
While working with small business owners, it’s important to understand that their time is limited, and the UX and web design work may not be the top priority on their list. I learned the best way to communicate with Ludwig was short (15-20 min) in person meetings, and friendly text message reminders when I had requests.
Importance of small business marketing and communication:
User research also pointed out the value of a hair salon’s social media. Many users visit Pinterest for hair inspiration, as well as visiting the salon’s social media before deciding to book an appointment. Hair Ludwig does not currently have a strong social media presence, so those channels were not built into the redesign. Creating a more significant presence on social media would be a great marketing tactic for the Hair Ludwig business.