Farzad's Barbershop

Introduction

The "Farzad's Barbershop project was an assignment through UX Academy. Its goal was to research and redesign a website, with an emphasis on branding, customer journey mapping, and strategic thinking for a local shop in my area. I choose Vancouver's "Farzad's", as it was a company that I have a strong connection too and frequent myself.

Company Information:

Farzad’s Barbershop is a local shop that has been growing in popularity since it opened in 2006. “Farzad’s” is a family ‘mom and pops’ ran business with two chairs and premium services provided with a smile.

They rely mostly on word of mouth and social media to help promote their brand and services. At the end of the day, customer experience matters most to Farzad and Shelly. Farzad himself is often caught saying “Life is good”, sparking up conversations with his customers as they’re members of his extended family.

Summary of brief:

• Redesign from scratch, a Responsive re-design that allows for information to be viewed on mobile, tablet & desktop.
• Develop coherent branding that aligns with the shop’s current, desired clientele and customer experience.
• Consider carefully what role the website plays in the purchase process.
• Introduce an Online Booking System to assist with their current booking process.

Research Goals & Methods

Research Goals

• Determine what is the best way to present contact & services information.
• Identify the key experiences/information most important to the customer to help make a decision on using a barber.
• Find out how Farzad’s direct and indirect competition offers their services to customers.

During a quick visit to Farzad's Barbershop to get my hair cut, I took the opportunity to have a chat with Farzad to find out what his most important goals of his business are, and how he approaches it on a daily basis.

This included how he builds his culture with his employees as well as how likes to build his relationships with his customers (new and longstanding).

Taking this amazing info, I quickly jotted down the main points once I was out of the barbershop chair. From there, secondary research and a competitive analysis research was performed.

Based on the accumulated findings in the first batch of research, participant demographics and questions were created for interviews.

Research Findings

I was able to discover opportunities that would help achieve both the business and customer goals. I also gained insights that helped me empathize with Farzad's target audience through hearing about their personal experiences finding their own barber, and what potential frustrations they had when using barber shop websites.

Opportunities

• Delivery of service information in a concise and succinct manner. Participants expressed that the their experiences with barber websites either did not provide enough information or was displayed in a cluttered manner with other visual or written content.
• Convey the barber shop’s personality and culture through updated branding, and copy. This is a very important selling point to be able to see what kind of culture a barbershop offers as it is one of the main reasons they choose their barbers.
• Capitalize on a responsive design. It was found that when barber shop websites are viewed it is mostly on a person’s mobile device on the go, where location and hours, then service price are referenced.

---

Next Steps

From the information gathered the IA can begin to form. It will achieve what both the business and customer needs; to get them an appointment booked.

Branding and UI layouts can also move forward confidently with a mindset that both the business and their target market value culture and a sense of community highly.

Defining the Page Structure

Sitemap

From remembering how similar barbershops in the competitive analysis structured their websites, as well as reviewing Farzad's current website structure; a sitemap was created. This would help tell the story of Farzad's through a natural flow of the website's pages, as well organize a structure for the new online booking service.

×

Ideation

Sketches and Wireframes

I then put together some sketches to start exploring possible directions to take the new layouts. These were based off of first using the sitemap as a base, and the methods of Farzad's direct and indirect competition and how they displayed their similar services.

The next step was to take these loose sketches and build out some wireframes for both mobile and desktop. This would help me further define the direction of the layouts and features for future processes moving forward. Once I had the initial wireframes compiled, a prototype was created and tested with participants. From the feedback that I gained in these tests, iterations were made to the wireframes seen below (and in the link to Invision).

Branding & Identity

Happy with the wireframe prototype and the iterations, I then moved on to the branding portion of the project.

I first started with a quick word-map to discover keywords that came from describing Farzad himself and the ambience of his barbershop. These were applied to creating a quick mood-board. Here I would get a sense of a tone and potential colour swatches.

The colours chosen within the style tile were samplings from in his barbershop slightly that were updated. The orange and light beige colour were sampled from a photograph of his 1970's BMW motorcycle. I found that choosing colours this way was a great way to bring more of his personality into the final branding.

For the typography, I wanted to find a way to capture the classic tradition sense of Farzad's while bringing in a modern touch. For the logo, a coupling of "Holtzman" and "Reckless Youth" was chosen as they fit this idea perfectly. I then went with a combination of "Holtzman" for headings and "Open Sans" for the body copy.

×

×

Visual Design Solution

Now that the branding was completed, I moved on to creating what would eventually become the final layouts for this project. Taking the wireframes as my guidelines, I began creating each of the main pages, key features, and the booking process. I used the style tile as a guide for highlights - but did not stick to it fully as I found that other colours looked better in some situations.

I even reached out to Farzad and his wife Shelley, to see if I would be able to use their content and some photography that they had done from another client to help bring my project as close to a real product as possible.

After I had the layouts created, I then put together a new prototype and set out to test it on some more participants. Just like in the wireframing process, once I completed the user testing, I took the feedback and revised the areas that had the biggest impact as well as tidied up some small details.

Conclusion & Takeaways

Being able work on a project based on a company that I felt close to was great! I felt a strong drive to explore how to bring the personality of the shop into the branding and layouts. The usability testing and the feedback was invaluable, especially for the booking process and making it as smooth and straightforward of an experience for potential visitors. It was also handy having a line of communication open to Farzad's to bounce ideas off of and eventually show them the final prototype and hear how they thought about it.

Although this was a mainly visually focused project, I still found having the research before beginning the design process extremely informative. It helped me get into the mindset of my client and their industry and deliver all their needs and match them with their client's needs.

View full Prototype - This link will open in a new browser tab.