A responsive website design for a local barbershop
Bears Barbershop is a successful business with a generic website template that currently allows its customers to book an appointment online. As the business grows and starts to offer more than cuts it needs an affordable bespoke website that can easily expand, showcasing its brand and services.
My goal is to create a simple responsive website that represents the current brand of the barbershop, allowing customers to explore the shop and book an appointment online.
UX Research, UX/UI design, User Testing
Figma
80 Hours
As someone who is not a user of barbershops my first step was to understand how customers choose their barbers and the information required to make this decision.
Barbershops have really changed over the last decade, departing from their stereotype of being local places to get cheap haircuts. Shops are no longer just offering a service, but rather an experience that customers are willing to spend more money on. The decision on which barbershop to go to is no longer determined only by location and convenience, but also on the look and feel of the place. Therefore communicating the barber’s aesthetic is an essential factor in today's market.
I focused my research on Bears’ direct competitors in Cardiff, doing a comparison of website features to understand the minimum requirements needed for the website redesign. It also gave me an opportunity to learn how barbers stylised their websites, and where the gaps in the market were.
The owners informed me that the majority of their customers were under the age of 40, so I chose 5 partcipants to interview between the ages of 29-40.
There were some interesting key themes running through interview answers. I pulled out the main ones I wanted to address in my design.
It is clear that today the barbershop offers more than just a cut; it offers an overall experience that customers are happy to spend money on. Research shows that customers look for inspiration, a good vibe and an easy booking experience when choosing where to get their next cut, and many barbershops have yet to take advantage of this in their online offering. Designing a website that can address all this can help Bears Barbershop differentiate itself from its competitors.
The design needed to target males aged between 18-40. The website needed to catch the attention of new customers, and the booking system needed to improve the booking experience for both new and current customers.
I discussed the research with the owner of the shop and we brainstormed a list of website features. I used these to create a product roadmap. The initial product needed to be designed in a short time period, and the initial build had a small budget, so I prioritised the features required for the minimum viable product. The rest of the features are to be designed as built as the business grows.
I created a simple task flow to map out the steps a user would take to book an appointment. This helped me to visualise the buttons and form pages required to for the design, and where any pain points may lie. As this task is simple, the main pain point would be in the Log in / Register stage as this would be something that would deter some users.
Although the initial design was to be simple, it was important to create a site map to help understand how the website could grow with the business. It was also a useful way to communicate to the owner how I envisioned the website to look, and which wireframes I would be designing. Version 1 would focus on being a single-page design with a booking feature.
Keeping in mind the research, the design needed to be image heavy and express the branding of the shop well. I understood that people used the mobile website for booking and useful information, so I chose to include the location and hours at the top for easy access.
I kept the booking system simple, in line with the other barbershops. User interviews had told me that confusing booking systems were off-putting, so I chose a multi-page booking form that guided the user through the steps.
The pre-existing website had a defined brand that matched the shop, and the business already had a logo. The owner did not want to change this, but after discussion agreed to change the font and to add an accent colour to bring some more dimension to the overall design. I brought together the elements below to use as a base for the UI design. We went through a couple of iterations of the UI before agreeing to the colour palette below.
Once the owner was happy with the UI kit, I applied the UI to the wireframes to create working prototypes of the product for both the desktop and the mobile version. The key feature of the design was the booking system, which has a different design for both the desktop and mobile version to enable users to access the information they need in the most efficient way possible.
4 users, aged between 24-33 years old, were asked to book an appointment both on desktop and mobile. The tests were conducted remotely and I observed over screen share.
I loved working on Bears Barbershop. Working with a really passionate business owner who believed in their service and brand gave me great inspiration and focus to create a website that helps to achieve his business goals. The process was very collaborative, and I learnt that ensuring the owner understood each deliverable that was being produced helped him to visualise the final product being built. The UI was also very important for the project, as I needed to communicate the vibe of the shop through the few pages a customer would see.
Given the 80 hour timeframe I could only design the prioritised product requirements for a working MVP that functioned in the same way as the current website. I am looking forward to working in the future with Bears to expand the design to include an online shop and events page.
