The Shop: Salon Mobile App Design

overview

In this project I designed a mobile application for my current hair salon.

Timeline

4 weeks

Tools

Sketch, InVision

role

UI Designer

Backstory

After looking far and wide for a good salon in my local area I finally found one that suits my needs called The Shop in downtown Kirkland. I have short hair that grows super fast, so I need to get a haircut every 4-6 weeks to maintain it. This means having a reliable salon is a must have for me.

The Problem

At this salon they don’t show key information like cost of services and their stylists on the website. Also, appointments can only be made over the phone and there is no way to see your appointment history. For walk-ins they have a process where you can call ahead of time to put your name on the list and when you show up they put a check by your name and will service you once the next stylist is free.

This system is problematic for a few reasons. First, people new to the salon don’t know how this system works, so they may end up walking in and waiting for a long time. In addition, you don’t know how many people are in front of you in line after you put your name on the list and you don’t know how long the wait will be.

User requirements

From the problems outlined above I created a set of user requirements for the application to meet the needs I was looking for.

  • As a user I should be able to see an estimate of how much time until I can be seen by a Stylist and how many people are in front of me in line
  • As a user I should be able to view my past appointments
  • As a user I should be able to create an account and sign in to a previously created account
  • As a user I should be able to make an appointment and pick a stylist that is available at that time
  • As a user I can see a list of all the stylists available at the salon and what services they provide
  • As a user I should be able to view the cost of different services including haircuts for long hair and short hair

Initial wireframes

My initial low-fidelity wireframes were based off of sketches I did by hand. I utilized the prototype feature in Sketch to get a better understanding of the different paths a user could take. Based on the requirements I outlined, I decided to focus on creating two key flows and a set of screens for the main menu items for this application.

The first flow shows how a user would create an account for the first time and then book an appointment.

Second, shown is how a user would sign in and then get in line for an appointment, the app equivalent of a walk-in. In both of these flows the sign in and sign up screens are interchangeable depending on if a user already has an account.

Finally, I wanted to showcase the main menu of the app which is key to it being easy to use. The main menu consists of five categories for the user to easily access important information like who the Stylists are and what they do as well as the different services offered and their price points.

Design

For finding the right design for this app I started with inspiration from the red, white, and blue theme of the barber shop pole. Despite being called “The Shop”, however, I soon realized the barber shop image was not the right fit. I needed my design to be more inclusive. Next I tried using tools as a background, but eventually decided it was too cluttered.

My final design was inspired by an image I found on Stocksy (shown right) of cutting hair. I used the image for the background of the login page of my application as a central element for the design.

Styleguide

I created a styleguide from the common components I used with select colors for actionable items and key elements.

Prototype

Using InVision, I created a prototype with my final wireframes to get a better feel for how the flows would work as a cohesive whole.

Next steps

If I were to continue to build on this project I would be interested in doing a competitor analysis to make this app more, well, competitive. By looking at how nearby salons in the local area market themselves and their services and I could make sure The Shop app would have the right pricing and services to challenge its competitors.

In addition I would be interested in getting the opinion of people that currently go to the Shop about using a mobile application to see how receptive people would be of my designs so conducting a survey or even a usability test would give me more insight on how receptive people would be of the application.