Head Designs
Overview
Head Designs is a natural hair salon in Oakland, Ca. The project began as a site redesign in 2018 and has gone through multiple iterations since then. Sheila Head has served as owner and stylist of the salon for over 40 years.
My Role
I worked on this project as the sole Product Designer and Developer. Main areas of responsibility:
- UX analysis (flows, personas, a site map, and wireframes)
- Design (website and branding)
- Lo-fi prototyping (basic flow and interactions)
- Front-end development ( wordpress website custom theme and template)
Goals
- Communicate Head Design's passion for naturally textured hair
- Update the site’s design so that users can easily navigate and learn all that Head Design has to offer
- Create an experience where the user can be engaged and feel empowered about their multi-textured hair.
Challenge
Business requirements: Within the past ten years, there has been another natural hair movement. Given Sheila’s experience and history with natural hair, she would be one of the top hair salons to visit in the Bay Area. How to visually communicate and showcase Head Design’s knowledge and skill to increase clientele.
User Needs:
When searching for a natural hair salon, you want to learn as much as you can about their services and their credentials from other clients. The task is how to engage and convert clients from their experience on Head Designs website.
User Needs:
When searching for a natural hair salon, you want to learn as much as you can about their services and their credentials from other clients. The task is how to engage and convert clients from their experience on Head Designs website.
During COVID, a new strategy of operations for the salon and the website had to be implemented for Head Designs to survive. I am currently updating the user research and creating new strategies to keep the clientele engaged and create revenue.
OutCome (Pre Pandemic)
New Clients
30%+
interest shared
80%+
Site monthly visits avg.
1K+
Page views
55%+
Strategy
Combing Through
The natural hair community in Oakland is very competitive. I did a content inventory and competitive analysis of other top natural hair salon websites in order understanding Head Designs’ goals and challenges.
Hair Salons | Love of hair artistry  | Head Design  | Strut  | The Curl Lab  | Hairapy Session  |
|---|---|---|---|---|---|
COVID 10 updates or protocol | |||||
Consultations | Only for hair extensions | ||||
Services list w/ description and time | |||||
Reviews | |||||
Blogs / Articles | |||||
On site appointment scheduling |
Insights
- The competitor’s site designs and layouts are very flat and lack character and expression.
- Our survey found that salon reviews are in the top 3 aspects that a person looks for when choosing a salon. So we must include that on the home page.
- We also discovered that it is helpful to put the time and a brief description of each service.
- We found that all of the sites mention COVID, but not all mention how they implement COVID protocols. So we are making sure that we communicate how Head Designs is complying with the current mandates.
natural hair journey?
Based on collected surveys and Sheila Head’s knowledge and interaction with her clientele I was able to identify the primary personas as people between the ages of 40-60+.
There natural hair movement among the secondary personas age 30-40 is on the rise. I wanted to make sure the site was visually appealing and informative to both the secondary and primary personas.
There natural hair movement among the secondary personas age 30-40 is on the rise. I wanted to make sure the site was visually appealing and informative to both the secondary and primary personas.
Personas
Primary Personas
“Empowering Themselves”
Age
40-60+ years old
Hair Education
Well educated about their hair. Knows how much time they want to spend on their hair.
Hair Care
Know how much time they want to spend on their hair. Aware of their hair boundries.
Secondary Persona
“Hair Attitude”
Age
30-40 years old
Hair Education
Willing to learn about their hair and how to take and manage their hair.
Hair Care
They know the least about natural hair care but are eager to learn.
tertiary Persona
“Embracing your texture”
Age
20-30 years old
Hair Education
They have never learned how to take care of their hair.
Hair Care
Wants quick fixes to their hair issues. Or has unrealistic haircare goals.
ReCreating the structure of design
After removing old or irrelevant pages from the Content Inventory in the discovery phase, uncovering user’s pain points, and problem-solving opportunities, we created a revised simple site map layout. This also helped define our redesign scope and strategy.
Many of the pages were out of date or could merge into one page.
- I removed the outdated and no longer maintained Blog page.
- Newsletter/Information, textured specialist, and Reviews are featured sections on the Home page.
- These are quick reads of information. I added an About page, Product page, and Head Talk. The Product and Head Talk are new pages to promote a sense of community and revenue during the Pandemic.
Iterations
I was able to identify problems with the original design and use the knowledge from the personas, site maps, surveys, and business goals to create new structural layout solutions.
Original Home
The original Head Designs homepage and website featured irrelevant content and links. The homepage needed to be strategically restructured and responsive to meet today’s users.
Wireframe
Home Wireframe
I wanted to introduce and communicate Head Designs’ main business features visually and clearly to users for the homepage.
- Hero - The main informative area to feature an image or video.
- The first section is "Consultation," which is the foundation of Head Designs' salon service. The rest of the sections are strategically layout based on their importance based on user research.
Wireframe
About Wireframe
The about page is often the second or the third page viewed after the Home page or the Service page. The original website was missing the about page.
I wanted to showcase Sheila’s history as Head Designs owner and founder and her community involvement.
Wireframe
Services Wireframe
- For the first draft of the service page, we included sections of information that users may need.
- Through user testing, we later simplified the page to just FAQ and services.
- There was a discussion on whether to have the service booking process on the website or external through a third party. From a business and comfort level, we decided to use a third-party booking process.
Wireframe
Gallery Wireframe
Viewing a hair salon’s gallery is one of the top 3 things people view before deciding to book an appointment at a salon.
Having the images categorize is a feature we are working towards.
Wireframe
User Testing
I have done many iterations in updating the webpages from user feedback and user testing and user flow using Hotjar. Here are a few validations and implementation that I have done.
- I redesigned the consultation section and removed the “Texture Specialist” section. The consultation section was taking up too much real estate. The texture section was not needed because users were clicking on each circle and do not link.
- In the new layout design, I minimized the COVID and hours area and made the consultation linear. I moved and reworded the textured specialist info to the about Sheila page.
- Now, 50%-75% of users will view consultations and services.
Validate
Implement
In the first design of the product page, I improved the design by adding a search and filter on the side. I also updated the product on mobile so that it featured the filter and search. It took some custom code, but I was able to work. I May have to do another iteration, but currently testing it ease with users.
Validate
Implement
Head Designs user survey showed that before users decide to book an appointment with a salon, they always look at a salon gallery. Many users made comments that before and after photos are beneficial. So I am trying a new before and after interactive feature. Currently, in the early testing phase, so we see how many users interact with it.
Implement
Execution
New look! Who dis?
Logo redesign process
Final Designs
Home
Final Design
Mobile
About
Final Design
Mobile
Product
Final Design
Mobile
Gallery
Final Design
Mobile
Product
Final Design
Mobile
Reflections
I am a person that is always trying to find ways to make things better. Working with Sheila on her site redesign and branding, I learned how to tame my driven attitude and listen and collaborate with Sheila and her business needs.
Looking back, I wish that I documented more of the iterations. I work and forget to record what I am doing and my thought process.
The next step is to continue to develop Head Talk and ways it can support the Head Design community during the pandemic and also bringing in revenue.
