Slade’s
Responsive Booking - Barber Site
Timeframe
2021 - 4 Weeks (80 hours)
Role
Research, Ideating, Information Architecture, Designing, Prototyping
Summary:
Slade’s is a local barbershop in the Lakeview neighborhood of Chicago, IL. They provide a variety of hair services from a full haircut to a beard trim, with many barbers to choose from. Slade’s is looking to expand on their responsive mobile site to rebrand and make it easier for users to book appointments through them and view their services.
Goal:
Rebrand to make them more recognizable and appealing to the target audience
Redesign the current responsive website to better fit the brand and target audience
Allow for quick and easy booking of appointments
Research + Discovery
Secondary Research
With an increase in user disposable income it has created opportunities for barbershops to offer higher end services to men with a growth in interest for personal grooming. One of the main trends for barbershops is to offer a full luxury experience. This also includes the opportunity to supply skin care a grooming products, with barbershops currently accounting for 80% of mens grooming product sale. 70% of men have stated that once they find a barber they like, that they will stay loyal to them. It is important now to create a strong brand and user experience to gain these customers and to obtain that brand loyalty.
Interviews
During the interviews it was easy to see a pattern of users going through the same process including picking a service, date, and stylist in one order or another. There was a mix of users starting the process by either clicking on a CTA or signing in, but most liked the idea of having some sort of membership/ login for their barber/salon. From the interviews it is apparent that the first step in the process is usually picking the service. The harder part for users is deciding on whether the date is more important to them, or their preferred stylist. Overall though, it seems users are satisfied for the most part with the average steps required in the booking process.
Pain Points
Not having personalization for easy checkout
Being able to see a picture of the barber and description
Having to add card information on the site
Not being able to easily cancel or adjust appointment
Persona
From the data collected through interviews, I was able to create one main persona that would be able to represent an average user for Slade’s. This is Jack!
User Flow
From the user interviews I was then able to determine the average flow that a user goes through when booking a hair appointment, as well as their frustrations and pain points in that process. I then was able to create my own user flow that would fit the needs of the average user to keep it a quick and simple process.
Designing
Low-Fidelity Wireframes
Based on the User Flow I created the lo-fi wireframes that had all the necessary pieces in order to book a barber. I was then able to test this with users to focus on the user flow rather than the design.
UI Kit
For the UI kit I created a new logo and chose some colors that I felt would fit a new brand image well. Slade’s did not have much of a brand image before with a simple font and no brand colors. With the chosen logo and colors the goal was to give a modern and masculine feel for a barber shop. Barbershop trends are changing and I wanted the brand image to represent that change as well.
Usability Testing
Overview
For usability testing I used the Maze app to be able to easily send users a link that would allow me to import my prototype and quickly send the link to users to track their process through the flow and show problem spots. For the task I told the users to book an appointment for a short haircut with Alex the barber. Their desired time was for January 18th at 3pm.
Summary
Overall the feedback received showed that it was an easy flow and most users were able to navigate through the prototype with minor errors. Everyone was able to get through the full prototype to the end. The only wrong clicks were when users were trying to explore more and take some different routes to get to the desired outcome. This usability testing helped me to make some new decisions on certain pieces of the prototype, such as listing the times vertically for easier viewing, as well adding more consistency in certain areas.
High Fidelity Wireframes
For the Hi-Fi wireframes I kept the base of the Lo-Fi frames pretty much the same and made sure to design with keeping the idea of modern, masculine, and luxury as well as making sure it did not jeopardize the user experience.
Reflection
Slade’s has been using a third party scheduling site that has added unnecessary steps to their booking process and does not uphold a strong brand for Slade’s. Through this process I was able to create a new brand for Slade’s that is able to represent them as a more professional luxury service provider. At the end of this project I had created a new booking process for Slade’s that is consistent with the new branding, and is a more streamlined and easier experience for their customers.