Salon booking website

My role

Sole product designer

Timeline

September-December 2021
The problem

Difficult user experiences prevent people from booking appointments

In the age of social media, stylists have forgone the need to put effort into their websites, or even have a website. Even with appointment scheduling platforms like Square or Gloss Genius, the booking process isn’t as simple or helpful as it could be.

The SOLUTION

A booking wizard that streamlines the user flow and improves client-stylist communication

Created with the black community in mind

  • Questions during booking are specific to the service selected
  • Make notes to stylist and upload style inspiration photos
  • Total cost of service shown throughtout process to maintain transparency
  • Longevity of style and price listed to aid user’s decision

Making a good first impression

  • Location and services offered clearly stated in hero section
  • Testimonials on home page
  • Photos and description are provided alongside every style

Quick scheduling on the go

  • 5 steps to checkout
  • Progress bar to let users know where they are in the process
  • User recall reduced by displaying the user's selection along each step

Roommates are organized accountable

  • Overview of tasks for the day/week and a daily progress wheel
  • Assign tasks to specific a roommate or rotate roommates by default
  • Send notification reminders to roommates to complete their tasks
  • Points are deducted when tasks aren’t completed by their set date or time

Catered to the needs of the guests

  • Star icon next to popular items to help them narrow down their choices
  • Strong visual hierarchy for quick scanning
  • “Scroll to top” button for convenience
  • Separate vegetarian and gluten-free menus

Redesigned landing screen

  • Pop-up integrated into hero section
  • “Order online” and “Make a reservation” removed from user flow
THE SOLUTION

A quick and convenient digital menu

  • All menus are visible
  • “Scroll to top” button for convenience
  • Shortcut to the sides menu

Catered to the guests’ needs

  • Star icon next to popular items
  • Stronger visual hierarchy
  • Seperate vegetarian and gluten-free menus

Landing page redesign

  • Pop-ups integrated into hero section
  • “Order online” and “Make reservation” removed from user flow

What's wrong with salon websites?

To begin my research, I searched for natural hair services on Google, Instagram and Facebook to familiarize myself with different salon websites and assess their designs and drawbacks.

Takeaways
  • Websites are responsive or adaptive, but content is small and/or unorganized
  • Payment is done through third party websites, or apps
  • Dropdown menus are used on mobile to harbor the numerous tabs

Does a website’s appearance affect a user’s decision to book?

During their surveys, users were asked whether a website’s appearance affects their decision to book. I received mixed answers, but I noticed that the reason for people saying 'no' were all the same: photos.

USER JOURNEY

I mapped out the user journey of a guest navigating the current online menu to help me identify additional pain points and opportunities for improvement.

KEY ELEMENTS
OF THE SOLUTION

Using my research insights and user journey, I came up with possible solutions and opportunities for improvement. I used a feature prioritization chart to help me plan the order of which features to design were most important to users.

If I was working on a team, I would have collaborated with developers and used this chart to decided which features were feasible.

Research insights
  1. Photos of a stylist’s work can trump the appearance of the website
    Users depend on photos as proof of a stylist’s skills.
  2. Referrals go a long way
    Users are more likely to try a stylist that someone they know has used.
  3. Appointments are likely to be booked on-the-go
    Users are in various settings and situations while trying to book an appointment.

Change of plans

Initially, I planned to include an agumented reality feature where the user could “try on” a hair style to see it would look good on them. This would have been interesting to explore as black skin tones and hairstyles are often underrepresented in AR.

After assessing my designs, I concluded that this feature didn't help the user accomplish to their goal, which is to schedule an appointment. While I chose not to prioritize the AR feature for this iteration, AR is still something I'm interested in exploring more in the future.

LO-FI WIREFRAMES

For my wireframes, I used inspiration  from websites I analyzed in my competitive analysis. There were no constraints for this project so I was able to come up with creative solutions to test and validate with users.

Assumptions I made:

  • Users would prefer an interactive menu instead of a PDF
  • Guests would use geolocation
  • People would use the filter feature for dietary needs
  • People would want photos on the menu for every item
  • The restaurant would benefit from promoting a food item on the main menu
The solution
STYLE GUIDE

I chose the name “Savage Styles” because I wanted the brand to portray boldness. I wanted the color palette to be striking yet sophisticated so I went with a black and white color scheme and used red for a pop of color.

Project reflection

What I learned

This project taught me to let my users' needs to guide my design decisions. I didn’t have a vision for the solution going into the project, but by listening to users I was able to create a blueprint.

What I would do differently

Looking back, I wish I would've designed this as a booking platform rather than an individual stylist's website, and focused on the user flow of a stylist setting it up.

If I had more time

  • Create a login/sign up feature for users to log back in and view their previous services for quicker scheduling
  • Explore the AR feature in depth

Thanks for reading!

NEXT CASE STUDY