See all template pages
close menu

GMMRDL Barber - Brand and Website Design for a Local Business

This case study delves into the process of designing a captivating and highly responsive website for a local barber that goes by the name of GMMRDL Barber. The project's outcome can be attributed to a seamless collaboration between the valuable insights of the stakeholder and myself.

Client

  • GMMRDL

Role

  • UX Researcher. UX Designer, UI Designer, Brand Designer

Industry

  • Beauty and Personal Care

Finished

  • May 2023

Case study is best optimized for desktop and laptop viewing!

Overview

This project came to my attention when GMMRDL, a talented local barber, expressed a keen desire to invest in a website for their business. Following an in-depth meeting to explore project specifics, we unanimously agreed on creating an online platform that not only showcases GMMRDL's exceptional work but also captures their unique identity. Moreover, we aimed to integrate essential UX/UI features that elevate the overall experience for both existing clients and potential visitors, ensuring a memorable and engaging journey through the website.

Problem Proposal: How can we enhance the comfort and confidence of first-time clients or individuals who are apprehensive about getting haircuts from unfamiliar stylists, in order to encourage them to choose GMMRDL as their preferred barber for hair services?

D I S C O V E R

Kickoff: Reddit Threads

To initiate the preliminary research phase, I began with a brief kickoff on Reddit to uncover any common complaints or grievances that the general public may have regarding haircuts.

Identifiable pain points

“Inconsistencies when it came to what the haircut would look like”
“Having to figure out how to explain to the barber what haircut they would want”

Secondary Research:

Competitive Analysis

I performed a thorough competitive analysis on three notable hair salon websites that either matched the desired vibe the stakeholder wanted to achieve or stood out due to their distinctive services compared to other barbershops. Additionally, I explored a popular booking website to understand the value it provides to business owners. Ultimately, I decided to exclude the booking process from the final design screens, as it would be more feasible for the website to utilize a third-party software for this purpose.

  • Birdhouse NYC
  • Acuity Booking
  • 12 Pell
  • Grey Matter

Findings

I visited three popular barber websites, all with a modern and minimal look. They used grayscale images to maintain consistency and highlighted their haircuts with high-quality pictures. However, I noticed they lacked additional information on styling, requests, and more details about their services.

Secondary Research: User

Surveys

I chose to administer user surveys to a sample of ten individuals in order to gain insights into the key factors people consider when selecting a barber, as well as their preferences for a barber's website. Based on the survey responses, I organized the results into an affinity map and derived a problem statement to guide the development of the website's screens during the planning phase.

It is worth noting that I opted for this approach rather than user interviews because the client wanted to gather insight from a larger pool of individuals in a way that was quick, so that he could administer them to his clients after their haircuts throughout the week in person.

Findings

  • 80% of participants stated that scheduling is the biggest issue when it comes to getting haircuts regularly
  • 50% of participants have concerns on how to properly articulate what they want to their barber
  • 70% of participants gravitate towards barbers that seem personable and approachable
  • 100% of participants need to see the barber's previous work before going to them for services

Other insights

“I ultimately want a barber that is good at what he does”
“i won’t go to a barber unless I can see their work beforehand”
“I would want my barber to give me recommendations on how to style my hair as well as maintenance”

D E F I N E

How might we?

How can we enhance the comfort and confidence of first-time clients or individuals who are apprehensive about getting haircuts from unfamiliar stylists, in order to encourage them to choose GMMRDL as their preferred barber for hair services?

Solution Statement

My objective is to tackle the challenges identified in the discover phase by creating a website that highlights the barber's expertise and fosters a welcoming and inclusive atmosphere for customers. Furthermore, the website will prominently showcase the barber's unique personality through visually appealing design elements. To enhance client satisfaction, the website will include a feature that guides customers on effective communication with their barber, allowing them to clearly express their desired haircut preferences by referencing past examples of the barber's work in the form of visual haircut images.

Key Screens

When deciding on the key screens to design for this project, I prioritized the gallery section as it was identified as the most crucial aspect by the stakeholder. In addition, I planned to incorporate an interactive feature that enables users to gather information about the displayed haircuts. This interactive element aims to alleviate any concerns or uncertainties users may have about how to communicate their desired haircut to the barber.

  • Homepage
  • Gallery
  • Services
  • About Me
  • Contact

D E V E L O P

Mood Board

Prior to commencing the screen design process, I curated a mood board to establish a visual direction that resonated with the desired personality defined by the stakeholder. The identified keywords to be conveyed through the design were: Sleek, Professional, Approachable, and Urban.

A mood board created to inspire the visual aesthetic of the product.

Evolution of Wireframes:

Sketches

To visualize the wireframes, I took to my notebook and explored different options as to how the base screens would look.

Sample of Sketched Screens.

Evolution of Wireframes: Low

Fidelity

While drawing inspiration from the sketches I drew, I then converted them to low-fidelity wireframes in Figma.

Sample screens of low fidelity wireframes.

Design Choices

During this stage of the design process, I established the overall appearance of the screens, and there were minimal changes when transitioning them into high-fidelity wireframes. Since this project primarily emphasized the visual appeal of the screens, I recognized that the low-fidelity wireframes provided an ideal opportunity to experiment with various color schemes and solidify the final layout.

Sample Screens of high fidelity wireframes.

Logo and Style Guide

Upon proceeding to the high fidelity wireframes, I took charge of crafting the logo design and style guide. Following a meeting with the stakeholder, we collectively agreed to pursue the logo option positioned on the far right. The stakeholder expressed appreciation for the clear visibility of the initials and the sleek, angled appearance of the letters.

A list of the proposed logos.
A style guide in which the high fidelity wireframes were based off of.

Evolution of Wireframes: High

Fidelity

After evaluation with my mentor, I took the low-fidelity wireframes to a higher level of fidelity, effectively refining the product's appearance and transforming them into a desktop format, thereby establishing the definitive look of the final design.

Mobile high-fidelity mockups.
Desktop high fidelity mockups.

Design Choices

After careful consideration of various color schemes for the background, I made the decision to incorporate a muted photo instead of a solid color. The photo was intentionally distorted to ensure legibility of on-screen text while maintaining visibility of its colors, which harmonized well with the primary shade of orange used in the designs. Additionally, on the landing page, I experimented with a parallax scroll effect to introduce content, creating a quick and engaging interaction that immerses users in the viewing experience.

D E L I V E R

Usability Testing: 5 Second

Test

To assess the information hierarchy of the product, I opted to conduct a 5-second test. In this test, each participant was shown a screen for 5 seconds and asked to evaluate what they perceived as most important and what caught their attention. A test group of 5 individuals was involved, and they were also given the chance to independently explore the screens after the 5-second test to provide any additional feedback.

Research Goals

  • We hope to determine what aspects of the screens that stand out to the user at first glance
  • We want to determine whether some of the aspects of the feature may need reiteration before moving forward in the design process.
  • We hope to determine whether or not the website emulates the persona that the brand owner is trying to convey
  • We hope to learn whether or not the website enhances the overall user journey of planning, booking, and receiving a haircut

Success Metrics

  • Visual Appeal (Rating the designs on a scale with a higher overall rating being more visually appealing)
  • Information Hierarchy (Can users quickly identify the most important features on the page?)
  • Clarity of Labels (Are users able to identify the function of each button on the page?)
  • Consistency (Were there any screens that stood out to the user in a way that was not consistent with the rest of the screens?)
  • Curiosity (Can the user see themselves wanting to further explore the pages being shown?)

Priority Revisions

Findings

During the debrief sessions, when questioned about the key elements of the screen, all testers demonstrated an astute understanding of the intended focal points. They successfully identified the elements that were anticipated to hold the highest priority. Additionally, testers expressed a positive appreciation for the website's visual aesthetics, noting that the product effectively reflected the desired image intended by the stakeholder. However, one tester noticed that the images in the gallery on the desktop view were misaligned within its frame, resulting in a lack of consistency across the screens. As a result, this issue was addressed and rectified as one of the few simple changes made to the final product.


Main Revisions

Edit 1: Adjusting the gallery in the desktop view so that it all fits within the same frame

  • This was done to make the page more consistent with the mobile version

View of image gallery before and after changes.

Edit 2: On homepage, change the initial interaction to a click vs. a drag for the desktop version

  • Most testers associated dragging with mobile devices and not with desktop

Edit 3: Change bio headshot to something more professional

  • Most testers noted that a professional headshot would make the stakeholder more approachable

Before and after headshots changed after testing.

Final Synthesis

Desktop Ver.

Link to Figma Prototype.

Mobile Ver.

Link to Figma Prototype.

Conclusion

Looking ahead, my plan is to enhance the website's functionality by incorporating a third-party booking page. Additionally, I aim to streamline communication between clients and the stakeholder by directly integrating the stakeholder's email with the contact form. Furthermore, I have envisioned a scheduling system where clients can add themselves to a waitlist for specific appointment times, providing greater flexibility to the stakeholder in the event of last-minute cancellations. Given the necessary resources, I would be keen to implement these ideas and further improve the overall user experience.

Upon reflecting on the project, if given the opportunity to revisit it, I would allocate additional time to explore various aspects of interactive design. While I incorporated a parallax scroll on the homepage, I recognize the value in investing more time to delve deeper into learning additional animations that can seamlessly integrate with the website. This would help enhance the immersive experience between the product and the user, elevating the overall engagement and satisfaction.

Thank you for your attention and having read thus far.

Spotify - Music as a Part of Your Daily Life

See next project
Scroll to top