View Prototype
Temescal Alley
Barbershop: Web Design
Researched and lead the website re-design that is more user-friendly, efficient, and effective in facilitating online reservations.
Role
Project
Year
Product Designer
Responsive Web design
May 2023
04
01
02
03
04
05
Research
Synthesis
Analyze
Design
Test
My Design Process
Let's work
together.
03
User Personas
Using the affinity map and user interview insights, I created 2 distinct personas that encompassed many of the qualities of my interviewed participants. This helped me to ensure that my design decisions were grounded on real user needs, goals and expectations.
Synthesis
I created an affinity map to synthesize my qualitative data. Affinity mapping helped me to group my observations made during user interviews and notice themes that I could then use to develop insights.
Affinity Mapping
View Mapping
02
100%
40%
Analyze
I recruited 3 people for my initial user interviews, and 9 for a Google Poll, all of which are in my peer group. I had some hypotheses and preconceptions going into the interviews, but i also learned new information that influenced my designs.
expressed the ability to view real-time availability of barbers as the most important online feature when choosing a barbershop
prefer a vintage and classic barbershop atmosphere
Interview & Survey Analysis
expressed (5/5) importance of the convenience of online booking for you when choosing a barbershop
50%
60%
expressed that positive reviews or recommendations from friends and family influenced thier decision to try a new barbershop for the first time
User Research
UX/UI Design
Interaction Design
Graphic Design
May 2023 (80 Hours)
Figma
Google Forms
Vowel
Maze
My Role
Timeline
Tools Used
Temescal Alley Barbershop's website is outdated and difficult to navigate, particularly when it comes to the reservation process. The current design does not effectively showcase the shop's services or provide a seamless user experience for booking appointments.
To identify user pain points in the current website design, and create a new website design that is more user-friendly, efficient, and effective in facilitating online reservations.
Understand the current user experience of the website.
Identify the pain points and challenges users face while navigating the website and booking appointments.
Determine user preferences in terms of website design and functionality.
Test the new website design and reservation system for ease of use, efficiency, and effectiveness.
The Problem
Project Goals
01
Research
Background
Temescal Alley Barbershop is a traditional barbershop located in the Temescal Alley area of Oakland, California.
The shop is known for its vintage decor and high-quality haircuts, shaves, and beard trims. It was founded by two friends, Sylvester "Vester" Monroe and Scott Serrata, in 2010. Monroe and Serrata are both experienced barbers who wanted to create a neighborhood barbershop that offered a high level of service and a welcoming atmosphere.
They named the shop after the alley where it's located, which has a rich history dating back to the early 20th century. Since its founding, Temescal Alley Barbershop has become a popular destination for men looking for a classic barbershop experience.
The shop offers a range of services, including haircuts, shaves, beard trims, and scalp treatments. They also sell a selection of grooming products, including beard oil, pomade, and aftershave.In addition to its excellent service and vintage decor, Temescal Alley Barbershop is known for its commitment to the local community. The shop frequently hosts events and fundraisers, and supports local organizations and charities.
Research Goals
Client:
Identify the pain points of users when navigating the current website design.
Determine how the current website design affects user engagement and conversion rates.
Understand how the current website design compares to competitors in the industry.
User:
Identify the services that users are most interested in and how they prefer to access information about those services.
Understand the user's experience when navigating the current reservation process, including pain points and frustrations.
Determine how users prefer to access and consume information about the barbershop and its services (e.g., on the website, social media, in-person).
Methodologies
Competitive Analysis: A competitive analysis will be conducted to identify best practices and current landscape for barbershop services, locations, and online presence.
User Interviews and Surveys: Interviews and Surveys will be conducted to gather insights into the specific needs and wants when it comes to a barbershop experience both in-person and online.
I researched the top (5) competitors in the marketplace for similar travel/visa services in order to asses how they meet their target customers needs, as well as pain points. (SWOT Analysis)
Interview Debrief
In order to better empathize with users, I conducted user interviews to identify user pain points in the current website design, and create a new website design that is more user-friendly, efficient, and effective in facilitating online reservations.
User Interviews
Method
Particpants
Created an interview discussion guide based on open-ended questions to allow participants to share their experiences
Conducted and recored interviews for 3 participants
Organized notes to generate an actionable interview debrief
3 participants
Age: 32-65
3 Males
Various levels of Zoom user
All three interviewees had never heard of Temescal Alley Barbershop before.
They preferred to book their appointments online, and found the process completed with minor issues.
They appreciated having access to information about the services offered and prices on the website.
They valued a good haircut and a comfortable, relaxed atmosphere during their visit to the barbershop.
They expressed a desire for affordable prices and reasonable wait times when booking appointments.
Based on these common findings, it seems that Temescal Alley Barbershop is meeting the expectations of its customers in terms of service information, and quality of service. However, there may be room for improvement in terms of online booking. Next steps would be making adjustments to better meet those expectations.
Key Finding
User & Task Flows
View User + Task Flow
In order to help users achieve their goals, I prioritized key tasks and developed user + task flows that outlined the necessary steps to complete actions. I selected these tasks based on their importance in enabling users to achieve their objectives
Lo-Fi Wireframes
Starting from low fidelity designs I was able to plan out my minimum viable product features and screens. I quickly iterated desired functions and desired user flows.
View Lo-Fi
Mid-Fi Wireframes
Mid-fidelity wireframes allowed me to refine the UX layout and make critical decisions regarding how users will navigate the content and features.
View Mid-Fi
Hi-Fi Wireframes
View Hi-Fi
High fidelity wireframes outlining how users will navigate the content and features. I moved forward with Desktop Only as that is the preferred platform for Zoom users.
Prototypes
Task Flows:
Task 1 - Explore
Task 2 - Please change your Toolbar from a video call
View Prototype
After establishing my UI component library and created my high fidelity wireframes, I used the prototype tool in Figma to bring my design to life.
Usability Testing
05
Test
Task Flows:
Desktop Flow - Browse each page for 30 seconds and then navigate to the next.
Mobile Flow - Browse each page for 30 seconds and then navigate to the next.
To determine the success of my design, I recruited 12 participants and conducted usability tests through Maze. Each participant went through two flows and was asked their feelings about current, and newly designed prototypes
The success of each task given was based on 3 metrics:
Personal Sentiments
Likelihood of use
Results:
Current Website
(1-5 Star ranking)
46% - ⭐⭐ (2 Stars)
38% - ⭐⭐⭐ (3 Stars)
15% - ⭐⭐⭐⭐ (4 Stars)
Re-designed Website
(1-5 Star ranking)
46% - ⭐⭐ ⭐⭐4 Stars)
38% - ⭐⭐⭐ ⭐⭐(5 Stars)
15% - ⭐⭐⭐ (3 Stars)
Desktop Prototype
Revisions:
Fix any alignment issues, especially with the holiday hours section and hero image on the desktop version.
Reduce the number of "Book Now" buttons on the gallery page to avoid redundancy and confusion.
Improve the readability of text, especially in the policies and bookings section, by selecting a more legible font or adjusting the contrast.
Next Steps:
Prioritize the identified issues and areas for improvement based on their impact on the user experience and alignment with client and user goals.
Iterate on the prototypes based on the feedback received, addressing the specific areas of concern highlighted by the participants.
Optimize the navigation and interaction design to enhance clarity, ease of use, and task completion rates.
Fine-tune the visual design, paying attention to font readability, layout alignment, and image sizing.
Qualitative Observations:
The website did not meet the expectations of more than half of the participants.
Participants rated the overall website experience with an average of 2-3 stars out of 5.
Participants generally had positive feedback on the updated prototypes, with higher ratings and unanimous agreement that the redesign prompted a positive experience.
Various suggestions and feedback for improvement were provided such as clarifying directions, improving readability, reducing redundant elements, and reordering content.
Final Design
Desktop Re-Design
Mobile Re-Design
Key Takeaways
Overall I feel this redesign was a success, and am excited to handoff to the client for implementation
The usability test provided valuable insights into the current website's shortcomings and the potential improvements brought by the redesigned prototypes. The majority of participants found the updated design to be more user-friendly, cleaner, and more modern.
The feedback from participants highlighted the importance of simplifying the design, emphasizing services, streamlining the reservation process, using clear language, and optimizing for mobile.
These findings will inform the iterative design process and guide the implementation of changes that address both client goals and user goals, ultimately leading to an enhanced user experience on the Temescal Alley Barbershop website.
Competitive Analysis
I researched (5) local competitors in the marketplace for similar barber services in order to asses how they meet their target customers needs, as well as pain points. (SWOT Analysis)
This helped me identify any missing features that I could add to my clients website and can address any potential design patterns to adopt or avoid.
View SWOT Analysis
Survey Debrief
In order to better empathize with users, I conducted user surveys to identify user pain points in the current website design, and create a new website design that is more user-friendly, efficient, and effective in facilitating online reservations.
User Survey
Method
Particpants
Created a Google form to ask 10 multiple/open ended questions
Organized notes to generate an actionable interview debrief and guide wireframes
9 participants
Various ages of particpants
Online booking convenience was considered important by the majority of respondents, with the highest percentage rating it a 5 out of 5.
The ability to view real-time availability of barbers and automatic reminders for upcoming appointments were considered the most important online booking features.
Positive reviews or recommendations from friends and family were the top factor influencing respondents' decision to try a new barbershop.
The majority of respondents do not use social media to follow or engage with barbershops.
Key Finding
04
Design