Revelry Barbershop
Website Re-design
A personal project for one of my favorite local businesses.
Project Timeline: 3 Days
My Role: Research the user, create a vision for a website revision focusing on helping the user, build the wireframe, design, and iterate the final design.
Main Takeaway: Transferring skills to the real world.
Main Challenge: Lack of access to real world information, users, and previous research.
“A good haircut is like a shield of confidence that you wear proudly, knowing that you look your best and are ready to take on the world.”
The Revision…
Color Choices:
By keeping Revelry's current colors, we maintain their brand identity and recognition among their existing customers.
The dark primary color (#561D1A) can create a sense of luxury and sophistication, which aligns with Revelry's focus on men's grooming and community involvement.
The use of the secondary color (#AC7C4E) as a complementary color can add warmth and depth to the overall design, while also evoking a sense of craftsmanship and tradition.
The combination of these colors with the third color (#C9BD9B) and black (#110D0D) can create a balanced and cohesive visual experience that is both appealing and functional for the user.
Landing page:
Warm, inviting, and clean landing page while preserving traditional masculine atmosphere
Continued use of Revelry's brand colors as navigational aides
Balance dark colors with ample white space
Use 4 pictures to tell a story about Revelry's focus on men's hair styles, relaxed atmosphere, and emphasis on customer confidence, satisfaction, and success
Use pictures as buttons for navigation flow and accessibility concerns
Picture buttons turn a shade of Revelry Red when hovered over
Navigation located at the top and bottom of the page for easy access
Scheduling an Appointment:
Main purpose of the website is to create appointments
Use Revelry's color scheme to effectively navigate the site
Ensure the website is easy and intuitive to use
Implement a calendar model for scheduling appointments as users understand days better than dates
Use drop-down menus for available times and stylists to simplify the scheduling process
After confirmation, allow users to explore hair styles in the online catalog or navigate away using the top navigation bar
Usability and Information:
Don't redirect users away from the website
Increase customer satisfaction and conversion rate by providing more information
Use "Schedule Now" buttons to take users back to the appointment booking screen
Pre-select the appointment option with available dates, times, and options
Use "Meet the Team" to help users choose the right stylist for them
Help customers better understand services, options, and pricing
Assist customers in finding the right service and stylist for them
Reduce user pain points, frustration, and anxiety.
Style Finder and Portfolio:
User research: Customers struggle with haircare options and describing hairstyles
“Style guide” allows users to search by style type, explore different hair styles, and add to portfolio
“Portfolio bank” allows users to add pictures from the style guide and upload their own
Benefits to users: Research and accurately describe desired style, increase satisfaction
Benefits to business: Brand loyalty, retention, sets Revelry above competition
Supporting Local:
Revelry's connection to the community is reflected in the website
Beer offerings showcase local breweries and support the community
Tap list and bottled beer options are prominently displayed
Future updates will incorporate Untappd for more accurate product display.
Background
What We can Improve
While the User Flow is streamlined, that’s solely because of the lack of options and accessibility. Website does not address customer needs.
Website does very little for User Retention and Customer Satisfaction
Website does not make Revelry stand out amongst competitors
What They do Well
User Flow is streamlined
Website is built solely for User to Customer Conversions
Users can book an appointment easily
Understanding the User
User Demographic
Primary target demographic: adult men of all ages, backgrounds, and professions
Located in downtown Fuquay, NC
Likely to attract local residents as well as visitors and tourists to the area
Potential to cater to a younger demographic, such as college students and young professionals interested in grooming and fashion
Website should appeal to a broad range of customers while still maintaining the unique brand identity and personality of the shop.
Personas:
Mark, 35, Marketing Manager: Needs a reliable and skilled barber who can provide consistent and quality haircuts.
Problem: Mark needs a reliable, skilled barber who can provide personalized grooming advice and an easy-to-use online booking system that fits his busy schedule.
Solution: An easy-to-use website that allows him to book appointments and view barber profiles; a welcoming and comfortable in-person experience; grooming tips that fit his busy lifestyle.
Jackson, 22, College Student: Needs a barber who understands his individual style and preferences, and can keep up with his evolving style.
Problem: Limited budget for grooming services and difficulty finding a barber who meets his needs.
Solution: Access to a gallery of past haircuts and styles; easy-to-use online booking system; social media presence that showcases the shop's unique personality and community involvement; affordable grooming options that fit his budget.
* User Research is AI Generated using ChatGPT as real user data was unavailable for this project *
User Needs
Men often struggle understanding hair styles and properly asking for what they want
Convenience: Easy booking and payment.
Personalization: Tailored advice and recommendations.
Affordability: Competitive pricing and promotions.
Comfort: Relaxing in-person experience.
Community Engagement: Local involvement and events.
Revelry Needs
Brand Identity: Clear and unique personality.
Online Presence: Strong and engaging web presence.
Revenue Generation: Consistent, quality services and sales.
Customer Retention: Strategies to build customer loyalty and retention.
Community Promotion: Promotion of local businesses and events to encourage engagement.
Design Tiers
Tier 1 (Most Important User Needs)
Want a seamless user flow that makes it easy to schedule appointments
User wants to accurately order, describe what they want, and leave satisfied
Website gives the user confidence that Revelry is qualified and professional
Tier 2 (Important User wants)
Confidence in what the User ordered
Upfront Pricing and information
Style advice and learning options
Tier 3 (Nice to Haves)
Knowledge about the Business and Stylists
Knowledge about the ethics and ethos of Revelry Barber Shop
“I am always nervous about going to get my hair cut. What are my options? I always struggle to describe what I want”
“Which stylist should I go to? I heard someone say they always struggled with razor fades. What if I get that guy? Hair means so much to me, I don’t want to have a bad experience”
Making Improvements…
Overall: I wanted to stay with the same color scheme, since it will help users transition to the new website, continuing their brand loyalty. I need to address the usability, cleanliness, and user flow of the design. It should have more information about what their services include, helpful tips for customers, and include a design that feels fresh and inviting. The goal is to create a website that provides an experience that sets Revelry above their competition, and increases User confidence, knowledge, and retention.
UX Design Goals
Website should feel clean and fresh, while keeping the “masculine” edge
Customer should immediately understand what Revelry is: a Barber Shop with a masculine vibe
Primary website use to to book appointments, secondary uses include exploring hair styles, beer, products, and other areas. User flow should reflect this.
Implement features to keep users on the website
UI Design Goals
Warm, clean and inviting website, while remaining “traditional masculine”
Keep the same color scheme
Ease the transition from the old website to the new website
Understand business model in the first 4 pictures
Effectively lead customer navigation with use of Revelry colors
Use images as buttons to convey a streamlined and clean approach
Lessons learned:
There are quite a few lessons to be taken from them re-design. As the sole designer, I planned and designed the entire project, as well as the messaging.
Sometimes, you find cultural phenomena or hidden societal dilemmas that can unlock a whole new idea. Working to fix these challenges can be great for the business, but can also be a lot of work.
It can be challenging to champion for the user. There is a fine line between attempting to help them achieve a goal and overly complicating a solution where you might not see tradeoffs, especially with something new and unexpected.
Did We Complete our Goals?:
The most obvious step any designer should take at the end of a project is to circle back to their original goals and make sure they did not lose sight of the objectives.
Create a seamless process to schedule an appointment?
Used Revelry brand colors for navigation
User can schedule from multiple different avenues.
Straight to the scheduling page
Find stylist, then schedule that stylist
Find hair style, then schedule that style
System to accurately describe a hair cut the client wants?
Style Finder system
Portfolio picture bank
Educate the user on styles, designs, and stylist specialties?
Style Finder guide
Portfolio picture bank
Stylist profiles and specialties
Accurately depict Revelry’s core values, ethics, and ethos?
Focus on cleanliness, fresh, and inviting with a masculine vibe
Educate users on how Revelry supports local businesses