Hair Salon Website

Ginger Snap Hair Studio

Image of a website homepage which says "Spice things up with Ginger Snap Hair Studio" and four photos of women.
Ginger Snap Hair Studio is a new salon in Pittsburgh, PA who needed to establish their brand and build a client base. I worked with them to craft a new brand and website.

As the sole designer working with a business owner, I wore quite a few hats. I did branding design, user research, wireframing and prototyping, visual design, and implemented the website via WordPress. 

Deliverables

User Research
Sitemap
Wireframes & Low-Fi Prototype
Style Tile
Design Comps
Site Launch

Role

Freelance Designer

Date

Launched 2021
View the website

Problem

The salon owner relocated to a new city and needed to build a new client base. She desired a website and brand style that fit in with her values of simplicity and approachability, and allowed clients to book appointments.

Client Goals

  • Establish brand aesthetic and messaging
  • Incorporate Vagaro booking system into website, which the client has used in the past

User Goals

  • Highlight portfolio photos
  • List services with transparent pricing
  • Make booking an appointment easy to locate

User Research

Surveys were conducted to gain knowledge of target market preferences, followed up by interviews to clarify user needs for the website.

Survey

goal

Gain knowledge of target market preferences to inform what we included on the website, and to guide future interviews with more in-depth questions.

results

  • Verified theory that customers prefer to book appointments through an app or widget, and that they are more likely to book a stylist if they were recommended by friends or family.
  • The most important factor when booking was that customers wanted to view the stylist’s portfolio.

Interviews

main insights

  • Users prefer an easy-to-use system where they can book appointments remotely, and view pricing for their specific stylist.
  • Users want transparency when it comes to policies and pricing.
  • Word-of-mouth is the easiest way users feel comfortable with booking a new stylist.
  • Users want to see photos in the stylist’s portfolio that match the service they have in mind.

Personas

Based on the survey, interviews, and input from the salon owner, I set up three personas. Each has different priorities, lifestyle, and preferences; they fit into different target users for the salon. We referred to them throughout the product development process to make sure we met our target user needs.
Persona worksheet for Grace with a bio, background, needs and goals, and use of technology.Persona worksheet for Kayla with a bio, background, needs and goals, and use of technology.Persona worksheet for Mallory with a bio, background, needs and goals, and use of technology.

Design Process

Sitemap
The site is relatively simple; the likeliest user flow would be for users to arrive at the site, view portfolio pictures, read about the stylist, and then book an appointment.
Image of a flowchart sitemap.
Wireframe & Low-Fi Prototype
After initially sketching out the sitemap and overall page structure, I used Figma to make wireframes and a low-fidelity prototype.
Image of a group of wireframes that outline a website on mobile.Image of a group of wireframes that outline a website.
Visual Design
For visual design, the goal was for the user to feel inspired and welcomed. Tying back to the brand design, the warm color palette, painted textures, and use of typography pulled together the overall style for the website.
Image of a style sheet which shows a color palette, header graphic, and buttons.

Site Launch

Image of a website homepage which says "Spice things up with Ginger Snap Hair Studio" and four photos of women.

Homepage

The homepage welcomed the user and incorporated portfolio photos and testimonials. We established the brand aesthetic through use of texture, color, and illustration.
Image of a website which says "Book Now" and displays a calendar with time slots.

Book Now

The booking page allowed clients to seamlessly book appointments via the Vagaro widget.
Image of a website that says "Portfolio" with eight photos of women.

Portfolio

The portfolio page showcased photos of her work, which was one of the top requirements of users. The page pulled images from the Instagram feed automatically, so the client didn't have to update the page manually.

Final Thoughts

Successes

I believe we succeeded in establishing a style that captures Ginger Snap’s brand personality as well as launching a website that provides users with a pleasant experience that encourages them to book an appointment.

Challenges

This project was an opportunity for me to bring a brand to life from scratch, working not only on branding design but also website design. It was challenging to be the only designer on the project and conduct the research on my own, but it was a great opportunity to learn and adapt throughout the process.

Next Steps

The next steps for this project are to monitor the site via Google Analytics and collect additional feedback from clients. These could inform how we can make improvements to the site and continue the iterative design process.