JAISON MAFRA
Case Study
Summary
The Barberhood aims to elevate its eCommerce site to enhance product sales and establish dominance in the Men's Grooming market in Australia. The project involves implementing short-term fixes on the existing barberhood.com.au site before its marketing rollout to boost sales. Additionally, a long-term vision is sought for a custom site that seamlessly incorporates elements of the barbershop experience to create an enhanced customer experience (CX).
"How can we create a seamless online and offline customer experience to increase The Barberhood's online revenue?"
My Role
As part of a two-person team in a three-week sprint during the immersive UX course at General Assembly, I played a role in the entire project, including research, synthesis, ideation, workshops, sketching, and creating high-fidelity mockups on Figma.
Results
The new website offers several advantages identified by users and observed during usability testing, including:
-
A sales-driven website
-
Intuitive navigation
-
Improved item discoverability
-
A clear understanding of product purposes
-
Persistent visibility of the search button
-
Enhanced system for finding items through categories and filters.
​​
![Design Process BLACK V1-01.jpg](https://static.wixstatic.com/media/5af76e_d8d36b5339ca40e1ad10de3a42790866~mv2_d_2666_1643_s_2.jpg/v1/crop/x_0,y_42,w_2666,h_1559/fill/w_622,h_364,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Design%20Process%20BLACK%20V1-01.jpg)
DESIGN PROCESS
"A modern brand inspired by traditional barbershops of the past."
Desk Research
The Barberhood represents a group of gentlemen's barbershops that pay homage to traditional techniques, exceptional customer service, and luxury men's products. It is a modern brand influenced by the classic barbershop experience. The Barberhood strives to create a comfortable and confident space for men to socialize. Extensive market research conducted by the Barberhood marketing team has established the brand's solid foundation. In the initial stage of the project, our team thoroughly reviewed the marketing documents to ensure a coherent project aligned with the company's values and vision.
​
![Moodboard coduments.jpg](https://static.wixstatic.com/media/5af76e_f75d67dddfa5400dba95a2d0c79353c9~mv2.jpg/v1/fill/w_501,h_276,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Moodboard%20coduments.jpg)
Desk Research - The Barberhood Documents.
Meta-project
Preliminary Interviews | Usability testing | Card Sorting
To comprehend the main challenge of the project, we addressed both the online and offline channels:
-
The Barberhood shop: Services and product sales
-
The Barberhood website: eCommerce
Upon identifying a gap between these channels, we conducted guerrilla research to test the main issues highlighted by the client. This process involved formulating a research plan and conducting preliminary interviews, usability testing, and card sorting.
Preliminary Interviews: We conducted interviews with users, recording their responses to 14 questions related to barbershops, grooming, and masculinity from an eCommerce user's perspective. The answers were organized based on the users' main pain points and gains.
Usability Test: Users performed five tasks to uncover the primary issues with the current Shopify template. We filmed each user while they completed the tasks, and our observations were categorized as "pain points."
Card Sorting: Each user received 48 randomly selected product cards from The Barberhood website and organized them into their own categories during an open sort. Later, they were provided with four pre-defined categories to reorganize and discuss the results. This exercise helped identify inconsistencies in categories, products, and grooming industry standards.
​
Guerrilla Research
![6x preliminary interviews](https://static.wixstatic.com/media/5af76e_f89111713cc14d03a7e6426986eca8af~mv2.jpg/v1/fill/w_800,h_600,al_c,q_85,enc_avif,quality_auto/5af76e_f89111713cc14d03a7e6426986eca8af~mv2.jpg)
6x preliminary interviews
![6x usability testing](https://static.wixstatic.com/media/5af76e_cdff04d2bfab4d1fa68c004922ae4974~mv2.jpg/v1/fill/w_800,h_600,al_c,q_85,enc_avif,quality_auto/5af76e_cdff04d2bfab4d1fa68c004922ae4974~mv2.jpg)
6x usability testing
![5x card sorting](https://static.wixstatic.com/media/5af76e_a75597911cc74a2dbaa53d9ba80eed7f~mv2.jpg/v1/fill/w_800,h_600,al_c,q_85,enc_avif,quality_auto/5af76e_a75597911cc74a2dbaa53d9ba80eed7f~mv2.jpg)
5x card sorting
Observations and insights - Quick fixes
Guerrilla Research | Competitive Analysis
We conducted a competitive analysis to establish the standard for Beauty eCommerce. The results, combined with the insights from guerrilla research, guided the implementation of short-term fixes on the current website (Shopify template).
![UT - results Collection.jpg](https://static.wixstatic.com/media/5af76e_1d3e5ccc47504f87893d7994aeb1afa9~mv2.jpg/v1/fill/w_972,h_392,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/UT%20-%20results%20Collection.jpg)
Short term fixes for the current Shopify template.
BEYOND
More interviews and taking notes in loco.
Interviews (The Barberhood customers and SME’s | Contextual Inquiry
We conducted additional interviews with The Barberhood customers and subject matter experts (SMEs) through contextual inquiries. The preliminary interviews provided valuable insights for redesigning the questions in subsequent interviews. The second round of interviews involved customers of The Barberhood shop and SMEs specializing in selling barbershop products and services, including marketing experts, barbershop managers, and barbers.
To validate the observations made during the interviews, we visited The Barberhood shop to observe the service process firsthand.
During the customer interviews, we noticed the consistency of The Barberhood's service. Every aspect highlighted by customers had been carefully defined by the marketing team. However, it became evident that the shop and the eCommerce platform catered to different user needs. All interviewees stated that they visited the shop for the quality of service and expertise, as well as the convenience of its proximity to their workplaces.
![5x Customers interviews](https://static.wixstatic.com/media/5af76e_929c32e754f2418f8ef01efc4c105f38~mv2.jpg/v1/fill/w_800,h_600,al_c,q_85,enc_avif,quality_auto/5af76e_929c32e754f2418f8ef01efc4c105f38~mv2.jpg)
5x Customers interviews
![3x SME's interviews](https://static.wixstatic.com/media/5af76e_de85052e310240ac89375d5306ed8c3f~mv2.jpg/v1/fill/w_800,h_600,al_c,q_85,enc_avif,quality_auto/5af76e_de85052e310240ac89375d5306ed8c3f~mv2.jpg)
3x SME's interviews
![2x Shops - contextual inquiry](https://static.wixstatic.com/media/5af76e_bc1733abc0e44f9daabd9f4dc2222f64~mv2.jpg/v1/fill/w_800,h_600,al_c,q_85,enc_avif,quality_auto/5af76e_bc1733abc0e44f9daabd9f4dc2222f64~mv2.jpg)
2x Shops - contextual inquiry
Talking to customers, specialists and seeing with our own eyes.
Personas
Personas
We consolidated our findings into four personas: Sean, Daniel, Fernando, and Jennifer. Considering the complexity of an eCommerce platform, we decided not to prioritize any specific persona. Our goal was to address the pain points and gains of all personas comprehensively. This necessity became more apparent during the ideation session, where we prioritized solutions that would benefit multiple personas.
Our personas exhibit varying levels of understanding of grooming products and distinct needs for guidance during the purchase process:
-
Sean: Seeks affordable hair products while frequently changing his style, leading to frequent shifts in brands.
-
Daniel: A classic individual who values product brands and seeks consistency in product availability.
-
Fernando: Passionate about beard culture, always exploring new beard treatment options, and sharing his knowledge with friends.
-
Jennifer: The gift buyer who struggles to find suitable gifts for the men in her life. The eCommerce platform should assist her in this task.
​
![Personas todas 1.jpg](https://static.wixstatic.com/media/5af76e_fbcfa73d7a564291814be79144abd93c~mv2.jpg/v1/fill/w_773,h_435,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Personas%20todas%201.jpg)
![Persona-Sean 1.jpg](https://static.wixstatic.com/media/5af76e_6215951872f44150b32ef047423bb90f~mv2.jpg/v1/fill/w_180,h_101,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Persona-Sean%201.jpg)
![Persona-Daniel 1.jpg](https://static.wixstatic.com/media/5af76e_cd652cf8a9a541fb88e4b4cf1c7fbb80~mv2.jpg/v1/fill/w_180,h_101,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Persona-Daniel%201.jpg)
![Persona-Fernando 1.jpg](https://static.wixstatic.com/media/5af76e_d8e05142da834cbb907a44fe0f32cd1c~mv2.jpg/v1/fill/w_180,h_101,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Persona-Fernando%201.jpg)
![Persona-Jennifer 1.jpg](https://static.wixstatic.com/media/5af76e_7dbe89974dcc47dca42dedc6a1ff9404~mv2.jpg/v1/fill/w_180,h_101,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Persona-Jennifer%201.jpg)
Short term fixes for the current Shopify template.
Organizing categories
TreeJack Research
To determine the best way to reorganize product categories and improve distribution, we utilized a research tool called TreeJack. This tool evaluated users' expectations in finding products within specific categories. Fifty users participated in two sessions, each completing eight tasks. The first session involved the current site's information architecture, while the second session featured categories and products redistributed based on the initial TreeJack results, card sorting, and observations. The results demonstrated a significant improvement in users' ability to locate the correct category for a given product, increasing from 36% to 64% success rate.
![TreeJack 1.jpg](https://static.wixstatic.com/media/5af76e_1f9caba1ee5344d29bedb7af1bbe6bb0~mv2.jpg/v1/fill/w_373,h_180,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/TreeJack%201.jpg)
![TreeJack 2.jpg](https://static.wixstatic.com/media/5af76e_7389ede4027a4a928d39b274d9092501~mv2.jpg/v1/fill/w_373,h_180,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/TreeJack%202.jpg)
Results of TreeJack Research in the first session and the second session showed an increase of successful from 36% to 64%.
Ideation and prioritization
Workshop | Ideation | Feature Prioritization (MSCW)
To foster collaboration between our team and the client and harness their expertise, we conducted a workshop to present preliminary results, facilitate ideation, and prioritize features.
This workshop served as a platform to align all stakeholders and utilize their knowledge to develop and organize ideas. By presenting the preliminary results, the marketing team could commence implementing the quick fixes on the current website.
![workshop 1.jpg](https://static.wixstatic.com/media/5af76e_922458f9fc904dc5ab2a196c5afdc16b~mv2.jpg/v1/fill/w_387,h_208,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/workshop%201.jpg)
![MSCW 1.jpg](https://static.wixstatic.com/media/5af76e_932cc78fd76b4ba59f5ed3dbbfd1b23a~mv2.jpg/v1/fill/w_367,h_206,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/MSCW%201.jpg)
Workshop for Ideation and MSCW board of features prioritization.
FINDINGS
![logo-grooming.png](https://static.wixstatic.com/media/5af76e_4a389a656643443cb96b1a186a1ef436~mv2.png/v1/fill/w_125,h_125,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/logo-grooming.png)
Grooming - Assuming Acknowledge
Interview | TreeJack
Through interviews and TreeJack research, it was found that users had difficulty understanding the term "grooming" and its usage in product names or descriptions. This confusion led to a lack of clarity regarding the purpose of the products.
OBSERVATION
![Grooming and quotes.jpg](https://static.wixstatic.com/media/5af76e_2e3b585328154cb49da334030603401a~mv2.jpg/v1/fill/w_655,h_141,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Grooming%20and%20quotes.jpg)
The Grooming definition
and the way some users defined the term during interviews.
![TreeJack - Grooming Spray.jpg](https://static.wixstatic.com/media/5af76e_aaee2637878246ca8e92ee69a2c5a84f~mv2_d_1780_1520_s_2.jpg/v1/fill/w_500,h_427,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/TreeJack%20-%20Grooming%20Spray.jpg)
The TreeJack research show in green the right path where users could find the product.
A significant number of users tried to find the Grooming Spray in other categories.
SOLUTION
• Reorganize categories and remove "Grooming" as a category.
• Improve the description of products that include the term "Grooming" to provide better clarity.
• Generate educational content about grooming to help users understand its meaning and significance.
![logo-guidance.png](https://static.wixstatic.com/media/5af76e_df6ed129b3ac4c8cb959fd4cc43e0617~mv2.png/v1/fill/w_125,h_125,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/logo-guidance.png)
Guidance - Holding Hands
Interview | Card Sorting | Survey
During interviews, card sorting, and surveys, it became evident that users often lacked understanding about the purpose of grooming products. In The Barberhood shop, customers receive guidance from barbers or staff members who recommend suitable products based on individual needs.
OBSERVATION
![Whats That.png](https://static.wixstatic.com/media/5af76e_cb0e1ed230bb4290964d92f2c624904b~mv2.png/v1/fill/w_654,h_281,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Whats%20That.png)
Some users do not understand the purpose of the products.
![Gifts for men.png](https://static.wixstatic.com/media/5af76e_7f70bbf60eab49c7ba6da49c5889f1da~mv2_d_2418_1294_s_2.png/v1/fill/w_655,h_351,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Gifts%20for%20men.png)
During the survey, we checked how women react when they have to buy a gift for a man.
SOLUTION
• Provide users with more information about products to aid their decision-making process.
• Recommend the best products for specific needs.
• Create solutions to simplify the product selection process.
• Develop gift options to assist users in finding suitable gifts for others.
![logo-navigation.png](https://static.wixstatic.com/media/5af76e_413854adde4c4e34a5a885ee40fe840f~mv2.png/v1/fill/w_125,h_125,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/logo-navigation.png)
Navigation - Where is it?
Card Sorting | TreeJack
Based on card sorting and TreeJack research, it was apparent that users needed assistance in navigating the eCommerce platform to find desired products effectively.
OBSERVATION
![TreeJack for Navigation.jpg](https://static.wixstatic.com/media/5af76e_713440d4b1c4466bb246de867259482e~mv2_d_1520_1520_s_2.jpg/v1/fill/w_467,h_467,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/TreeJack%20for%20Navigation.jpg)
Users struggle to find the right path where they can find a product called Grooming Kit.
SOLUTION
• Ensure the search button is always visible in the top menu.
• Introduce new categories for better organization.
• Anchor filters and sorting options at the top of the page for easy access.
• Improve the hierarchy of information in product names, including brand, name, and price.
• Implement breadcrumbs on the product page to provide clearer navigation.
​
![logo-info.png](https://static.wixstatic.com/media/5af76e_e673f7c4e87240dbacfdcd3713a64ba7~mv2.png/v1/fill/w_125,h_125,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/logo-info.png)
Information Requirement - Helping Users to Understand
Survey
A survey involving 348 participants was conducted to determine which information was most important to users when making online purchase decisions. The aim was to identify the valuable information that should be emphasized in the eCommerce content.
OBSERVATION
![Information Requirement copy.jpg](https://static.wixstatic.com/media/5af76e_83ee227c6efb46c4ab353f22590b8c30~mv2_d_2880_1800_s_2.jpg/v1/fill/w_653,h_408,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Information%20Requirement%20copy.jpg)
Male - Price, description of the scent, product reviews, purpose and product form.
Female - Ingredients, price description of the scent, product reviews, purpose, packaging, suitability, instructions for use and product form.
SOLUTION
• Enhance product descriptions based on research findings to provide clearer information.
• Develop solutions to present product information in a way that users can easily comprehend.
SOLUTION
Sketching
Sketching | Figma | Moodboards | Usability Testing
The design process involved sketching, utilizing tools such as Figma, creating mood boards, and conducting usability testing. A Lo-Fi prototype was developed and tested with users to gather feedback. Additionally, a design workshop provided valuable insights on how to approach various features.
​
![roughs 1.jpg](https://static.wixstatic.com/media/5af76e_c70c2556e3b04478af887b4b76a741da~mv2_d_2000_1333_s_2.jpg/v1/fill/w_311,h_207,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/roughs%201.jpg)
![onboarding idea 2.jpg](https://static.wixstatic.com/media/5af76e_0a9b723d2bb4447796d33b2f4728585d~mv2.jpg/v1/fill/w_323,h_207,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/onboarding%20idea%202.jpg)
![onboarding idea 1.jpg](https://static.wixstatic.com/media/5af76e_ac9f2f7298554e14abbe565f91d68965~mv2.jpg/v1/fill/w_323,h_207,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/onboarding%20idea%201.jpg)
![iphone-x-wireframe - HOME V1 copy.png](https://static.wixstatic.com/media/5af76e_1303f5afe62b4778bd387da7355c8fbf~mv2.png/v1/fill/w_376,h_235,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/iphone-x-wireframe%20-%20HOME%20V1%20copy.png)
![iphone-x-wireframe - BARBERS ADVICE 1 co](https://static.wixstatic.com/media/5af76e_181b1f0d1d3046b79411303b8d0cddc1~mv2.png/v1/fill/w_606,h_235,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/iphone-x-wireframe%20-%20BARBERS%20ADVICE%201%20co.png)
In this stage our group collaborated together to develop a hi-fi on Figma mockup in Figma and usability testing, updating continuously to have the main features and design definitions in the shortest time.
![Mockup - home specifications.jpg](https://static.wixstatic.com/media/5af76e_da4cd29d1ad047abbef9e5011e06d1fd~mv2.jpg/v1/fill/w_964,h_542,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Mockup%20-%20home%20specifications.jpg)
![Mockup - catalogue specifications.jpg](https://static.wixstatic.com/media/5af76e_5cf17d582b264d24a51cb48e65cd30ca~mv2.jpg/v1/fill/w_964,h_542,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Mockup%20-%20catalogue%20specifications.jpg)
![Mockup - product specifications.jpg](https://static.wixstatic.com/media/5af76e_92ab1b04cba04552b40e7f4b8d818f53~mv2.jpg/v1/fill/w_964,h_542,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Mockup%20-%20product%20specifications.jpg)
![The Barberhood Mockup video Hair.gif](https://static.wixstatic.com/media/5af76e_f475673e0c17463499498dcaa4f8ad4a~mv2.gif/v1/fill/w_320,h_508,al_c,usm_0.66_1.00_0.01,pstr/The%20Barberhood%20Mockup%20video%20Hair_gif.gif)
![Mockup - Barbers specifications.jpg](https://static.wixstatic.com/media/5af76e_41c6e0a6cb014b888fe1f51651801954~mv2.jpg/v1/fill/w_953,h_536,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Mockup%20-%20Barbers%20specifications.jpg)
![The Barberhood Mockup video BarbersAdvic](https://static.wixstatic.com/media/5af76e_4f38546b6a86450abaa7361df7f3dfcb~mv2.gif/v1/fill/w_320,h_508,al_c,usm_0.66_1.00_0.01,pstr/The%20Barberhood%20Mockup%20video%20BarbersAdvic.gif)
Next Steps​​
​
-
Craft compelling product descriptions based on the barber's expertise.
-
Determine which features should be emphasized for each product.
-
Create new product photos that effectively showcase the products.
-
Assess the feasibility of making modifications to the current Shopify template.
-
Review the usability of the categories and make necessary adjustments based on user feedback.
-
Analyze website analytics and implement changes according to established guidelines.
-
Incorporate the Barber's Advice:
-
Conduct research to identify the key questions relevant to each product category.
-
Develop a database that links products to categories and filters for easy navigation.
-
-
Explore the potential of a feature suggested by users, which involves providing advice based on customer-submitted photos:
-
Conduct research to gauge user acceptance and test this feature using Instagram (refer to the report).
-
Evaluate the feasibility of implementing this idea with available resources (The Barberhood resources).
-
-
Consider developing additional features that were not included in the Minimum Viable Product (MVP).
![Phone X Mockup - PRODUCT copy.png](https://static.wixstatic.com/media/5af76e_74475157f3a24b5db52ae9cc6f7ca596~mv2.png/v1/fill/w_623,h_338,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Phone%20X%20Mockup%20-%20PRODUCT%20copy.png)
![Phone X Mockup - HOME copy.png](https://static.wixstatic.com/media/5af76e_2031fc642b054ddc8ee4bd437e6a2930~mv2.png/v1/fill/w_625,h_339,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Phone%20X%20Mockup%20-%20HOME%20copy.png)