About
Work
Contact
Overview
Why a website?
Research
Design
Reflection
Aleks The Barber
A website for an up-and-coming barbershop
ROLE
Product Designer
Webflow Developer
UX Researcher
UI Designer
METHODS & TOOLS
Survey, primary research, secondary research, Competitive Audit, lo/mid/high prototypes, Webflow development
DATE
September 2023 - January 2024
PRACTICES
User Research, UX & UI Design, Prototyping
View Version 1
View Final Website
Project background
Aleks has built his current clientele by using instagram as his main tool to promote his business. After his first year of business, 90% of his current clientele are returning clients,  while 10% are first time clients.
Is there something else we can do to gain more new clients?
Understanding the problem space
I wanted to explore some of the downsides of using instagram as the only tool to promote your business. I’ve set up a meeting with Aleks to discuss about some pain points that he experiences when using instagram, here are some takeaways:
Time consuming
Aleks spends more time creating content for the instagram account than working on his craft
Not searchable on Google
Aleks’ business is not searchable on any search engines or on Google Maps
Not accessible
Limits the scope of his client base as not everyone uses instagram
Lack of testimonials
The only written feedback that Aleks has are good comments on his posts
What else can we do?
An effective way to gain more clients outside of just instagram is having a website! I’ve done some research to make sure building a website for Aleks would be a good way to help attract more clients. Here are some key findings:
Increased credibility and trust
A survery done by Verisign shows 84% of consumers believe that small businesses with a professional website are more credible than those without one.
Enhanced visibility locally on Google
According, to web.com, having a presence on the internet reaches a vast audience, expanding past the scope of social media. This can lead to more online bookings and walk-in visits.
Online reviews
According to a survey done by brightlocal, 75% of people surveyed answered ‘always’ or ‘regularly’ reads online reviews when browsing for local businesses
Building a foundation
Now that we know that building a website for Aleks’ business can attract new clients, we want to know how we should showcase/promote the business online and learn more about the clients/users that will interact with the final product. This is our empathize phase.
Establishing a brand identity
Below are some notes after the first meeting, which was focused heavily on what kind of business he wants to promote:
Barbershop Survey
Our next step is to understand and empathize with the users we are trying to connect. What are their goals? What are their challenges? What are the factors that help them with their decision?
I’ve sent out a survey to both existing and potential clients of Aleks and this is what I’ve learned:
What our competitors are doing?
To get a better understanding of the market that Aleks is about to enter, a competitive audit must be completed. This will give me insight on: how competitors expand their clientele, what the current market looks like, and how I can improve the user’s experience based off competitor’s mistakes.
Introducing SEO, what is it, why is it important?
Part of our goal is making sure Aleks’ website is easily visible on search engines, so that he can reach a vast audience. To achieve this we must meet best SEO practices. Additional to our UX research, I wanted to explore what we can do to our website to get the most eyes on it as possible. Here’s what I found:
Make website mobile responsive
Creating the website to be mobile responsive assures that users will have the same experience no matter what device they use.
Optimize site for speed
Any videos or images that are used on the site should be compressed so that the speed of the site can be optimal.
Internal linking
There should be many links to other pages on the site. This gives users more of a journey going through the site, as well as multiple pages of the same site being visible on search engines.
Optimize image alt text
Optimizing the site for screen readers helps with accessibility, which in turn makes search engines recommend our site more.
Key takeaways
In this phase we learned more about the clients/users that will interact with the final product, what our competitors are doing, and we found some SEO principles to follow so that we can be easily visible on Google. To summarize, here are the key takeaways we found from the research phase:
What clients look for
The most important thing that clients look for when choosing their next barber is their experience and skill
What clients struggle with
Not being able to browse through the barber’s previous work is a pain point that clients experience
What helps with clients’ decisions
Testimonials and photos of past work play a huge role in the client decision making
How we can be more visible on search engines
Following best SEO principles can help Aleks attract new clients as it can make the site more visible on search engines
From the information that we’ve gained from our last phase, lets re-define our goal:
Design goals
How might we improve the booking experience for clients looking to book with Aleks?
We’ve gotten a lot of insight on the experience that users have when looking to book with barbershops online. The results from the survey showed that photos of barber’s past work and their testimonials are key elements that help with their decision.
How can we make Aleks’ website visible to most people as possible?
From the additional research about SEO practices, it is important to follow certain principles so that Aleks’ website can be more visible to a vast audience.
Design decisions
#1 Testimonials
Putting a section for testimonials can help clients with their decision. We can give them an option to scroll through past reviews, give them Aleks’ overall rating, and have the ability to write a review themselves.
#2 Photos of past work
Photos would play a big part in the construction of the sight. There should be photos on almost every page of the site, especially the ‘about’ page. Photos showing a range of different kinds of hair textures that Aleks services can help with the user’s decision.
#3 Multiple book now buttons
As users take their journey through the site, I would want to have a button to book with Aleks no matter where the users are on the site. This gives an ‘ease-of-use’ kind of feel to the site.
#4 Multiple pages on the site
Have a plan to organize the site so that it would have a good amount of pages that users can visit. This is an SEO principle that can help with making our site more visible on search engines.
#5 Responsiveness
We should have designs for all desktop and mobile views. This is a multi-purpose design decision. It allows users to have a pleasant experience on the site no matter what device they use and it follows on-page SEO principles.
Determining the site map
Adding all necessary elements to the site
Before we can start with making our low-fidelity mockups, we must first map out the structure of our site using a site map. This helps me determine what pages I should create, as well as the information I should include on each page. This structure is determined by the help from the competitive audit and the survey.
Design > Build > Test > Repeat
We now have enough information and a strong foundation to carry on to our building phase. Our plan now is to design from low to high fidelity, have users test our mockups, gather general feedback, then iterate and improve.
Mid-Fidelity Mockups
Low-Fidelity Mockups
Listening to feedback
From the feedback we’ve gotten from our first launch, many users have stated that the list of services section was too cluttered and wasn’t easy to read. I’ve brainstormed some ways to simplify that section of the page in a way where users can easily determine which service to choose. After a meeting with our client, we have come up with a way to make that section easier to follow. This also resulted in a complete site redesign based on the client’s request. Below is the updated version of the services section:
View Final Version
Reflections
#1 Limitations
(a) Lack of permission. Due to copyright issues, we do not have the ability to showcase Aleks’ social work at Covenant House. The original design was to display his social work by explaining his past work with Covenant House and showcasing his continued work through offering free haircuts to troubled youth.
(b) Lack of professionally taken photos. At the time of working on this case study, Aleks’ professional photographer has yet to complete the edits of his most recent photoshoot. These are the photos that are meant to showcase Aleks’ prior work that would help with clients’ decision to book with Aleks.
#2 Valuable Learns
(a) Make design flexible for client’s potential changes. Making sure to keep an overall template so that if our client wants to make a change, it will be easier to implement without taking too much time.
(b) Constructing development to adapt to changes easily. Organizing your workflow in such a way where any design changes can easily be made when developing the site on Webflow. I have researched a lot of ways to construct your workflow and after some digging I have found a way that works best for me to develop our working website.
(c) Document, document, document! Going back to previous designs made iterating through towards our final design very easy. It also made our meetings with Aleks more efficient as going back to previous notes and designs helped us stay on track towards our goals.
Work Moving Forward
#1 Optimizing search results
As the website is live, I will be continuing to optimize elements on the site by following SEO principles to give the site the best chance to reach as much people as possible. Such tasks include: optimizing site flow for screen readers, image optimization, and utilizing important keywords that align with our target audience.
Design and developed by Joseph Yuzon.