Where

Atlanta, GA

Responsive Website

What

Freelance Experience

Why

Role

Designer, Researcher

Personal Services

Category

June 2024

When

Introduction

The overview

The Commodore is a barbershop based in the Metro Atlanta area. They currently have 4 locations with the first dating back 2016. The branding is minimal with a traditional aesthetic signifying its roots in old school barbering while tying in a modern and clean feel. Their demographic of the business is men between the ages of 22 and 55 years old.

The objective

The Commodore website required a revamp to ensure a more consistent user

experience from start to finish, ultimately boosting conversions. Additionally,

the business was missing crucial opportunities to generate additional revenue

by adding an online retail feature to the site.

The Commodore website required a revamp to ensure a more consistent user experience from start to finish, ultimately boosting conversions. Additionally, the business was missing crucial opportunities to generate additional revenue by adding an online retail feature to the site.

Project Goals

Improve user navigation and overall experience

Integrate an online retail section

Provide detailed information on each location

Enhance the booking and checkout process

Facilitate customer and potential employee communication

Initial research shows...


The overall website experience is moderate compared to what could be excellent. Online retail also shows promise to increase revenue and deplete current overstock regarding inventory.

Who is this product for?

These three personas represent just a few of our users and show how this updated product

can help new and existing customers achieve their goals and add revenue to the business.

These three personas represent just a few of our users and show how this updated product can help new and existing customers achieve their goals and add revenue to the business.

Jake Thompson

Marketing Manager

Goals

Keep up with new products & releases

Find a barbershop that represents his style

Frustrations

Not enough information about the vibe of the shops he finds

Trying to remember the name of the products the barber used at the time of service

Age: 28


Location: Dunwoody, GA


Background: Jake is a busy professional working in a corporate office. He is career-focused and often attends meetings and networking events. He values a polished appearance and prefers a trendy haircut that reflects his professional yet stylish image.

Roger Martinez

School Teacher

Goals

Book haircuts for himself and his two sons

Finding locations close to home but also close to work if possible

Frustrations

Trying to understand which services are right for him and his sons

No contact for special requests or general inquiries outside of business hours

Age:45


Location: Sandy Springs, GA


 Background: Roger is a dedicated high school teacher and a father of two. His days are filled teaching, grading, and family activities. He values quality service and reliable information.

Chris Davis

Personal Trainer

Goals

Easily schedule a haircut on his phone

Plan for haircuts between clients

Frustrations

Finding a clean and modern environment

Needs an appointment to stay on schedule

Age: 32


Location: Atlanta, Georgia


Background: Kevin is highly active and health-conscious. He works as a personal trainer and is always on the go. He needs a haircut that is easy to manage and fits his active lifestyle. He values efficiency and prefers a barbershop that offers quick and quality service.

Time to start designing!


Once I assessed our user personas, I was

able to begin brainstorming how different

users may navigate through the site using

low-fidelity wireframes.

Time to start designing!


Once I assessed our user personas, I was able to begin brainstorming how different users may navigate through the site using low-fidelity wireframes.

User Flow

For this portion of the case study, I chose to showcase my initial wireframes and highlight the main flow that all users will experience during their booking process.

High-Fidelity UI Design

Once the initial flow was complete, I started by creating a couple of the main screens of the site. I started by defining the fonts and colors.

Once the initial flow was complete, I started by creating a couple of the main screens of the site. I started by defining the fonts and colors.

Color Palette

The owner was specific that he wanted to keep the branding some form of black and white for a clean and ultra minimalist feel

Primary / 100

Black

#2C2C2C

Neutral / 100

White

#FFFFFF

Font

Montsterra

Regular, Semibold

Montserrat - AaBbCcDdEeFfGgHh

UI Screens

Usability

During this study, I was able to show several clients of the business a working prototype. I split the experience evenly using both a mobile and desktop version between clients. The clients were only prompted to explore the page as they normally would and would provide feedback afterward. I prepared a few questions and took some key insights to initiate a more qualitative approach.

During this study, I was able to show several clients of the business a working prototype. I split the experience evenly using both a mobile and desk-top version between clients. The clients were only prompted to explore the page as they normally would and would provide feedback afterward. I prepared a few questions and took some key insights to initiate a more qualitative approach.

Key Insights

Key Insights

Question: “What elements of this updated website stuck out the most to you?”

Insight: “I actually loved the idea of being able to buy product online. Sometimes I forget that I’m just about out until I get home and realize I should’ve gotten some while I was here. Then traffic kind of deters me from wanting to drive back in before my next cut and I just end up buying it on Amazon instead.”

Question: “What did you notice was different about the booking process?”

Insight: “The first thing I noticed was the colors and how the page looked. Everything seemed to match more than it did before. The second thing was that it was organized a bit better and I found what I was looking for faster, for sure.”

Question: “Which version of the website would you prefer to use?”

Insight: “Honestly, it was more simplistic before but that’s not always a good thing. I’m used to the original site but I could see how anyone would get more out of this updated one. It’s pretty clear that the newer one provides a lot more value, especially to new clients, I’d imagine.

Results

The users noticed a big difference in the overall experience and it was received well by every user asked. The added retail section was a success and incited the most excitement. Other changes noted was the new ability to choose a location as your primary location and skipping the landing page. Desktop users were impressed by the design aesthetics during the booking process.

Project Summary

The barbershop UX/UI redesign project aimed to enhance the website’s user experience and accessibility across all devices for men aged 22-55. The key objectives included improving navigation, integrating an online retail section, enhancing location information, organizing the service menu, and streamlining the appointment booking process. The redesign focused on delivering a user-friendly, efficient, and visually appealing interface. The project involved thorough research, wireframing, prototyping, visual design, development, and testing, resulting in an expected increase in user engagement, higher online sales, and improved customer satisfaction.

Key Takeaway

The barbershop UX/UI redesign project demonstrated that a user-centric approach, grounded in ideation, research and targeted at empathizing the needs of the business and its clients, can significantly enhance the user experience, drive online engagement, and boost sales. By addressing the unique needs of the target demographic and optimizing the website for ease of use, the project successfully created a seamless, efficient, and appealing digital experience that resonates with customers and supports business growth.

The barbershop UX/UI redesign project demonstrated that a user-centric approach, grounded in ideation, research and targeted at empathizing the needs of the business and its clients, can significantly enhance the user experience, drive online engagement, and boost sales. By addressing the unique needs of the target demographic and optimizing the website for ease of use, the project success-fully created a seamless, efficient, and appealing digital experience that resonates with customers and supports business growth.

If you have any questions regarding to this project, feel free to contact me directly.

Thank you!