Salon and professional finder

The brand is a Black-owned responsive e-commerce website that sells hair, beauty, and personal care products. Launched in 2019, 4th Ave Market curates items and products to resolve the unique needs of people of color and the professionals that serve them.

Time: 2 Weeks      
Tools: Sketch, Invision, Photoshop

Deliverables

Revisit/ reorganize Information Architecture

Mobile-friendly design solutions

Deliver increased value and engagement

My Role

My responsibility in a multidisciplinary four-person team ranged from research, analyzing and testing the information architecture,  to preliminary design, UI Design,  usability testing, and prepare spec-docs for the client.

Tools Used

User interviews, heuristic evaluation, competitive and comparative analysis, usability testing on the current website, persona, journey map, information architecture, card sorting, open, closed and hybrid, tree testing, site map, sketching, wireframes, rapid prototyping, usability testing mid-fi and hi-fi, building specification document.

Research

Steps Taken

To better understand how the current website was working and to better understand the problem areas, we did Usability Testing on the existing site with five target users. We also conducted a Heuristic Analysis and a Competitive Analysis.

A

Categorization & Hierarchy

Products need organization and fewer categories. With the current navigation and 130+ categories, it is difficult to find products.

Lack of filter options forces users to go through the entire product list.​5/5 users wanted a more natural way to find products.

B

Product Filtering and sort by:

C

Account registration / Login issue:

To be able to create an account, the user is required to go to the footer and click “My Account” This is against the standard convention where a user would easily be able to register/login in the top navigation or the utility navigation. ​

3/5 users were unable to complete the sign-up/register process.

Good Findings

Recommendations

5/5

Users tested wanted a more natural way to find products.

5/5

Users felt that the home page didn't have relevant content.

1.

Simplify the top-level navigation and create appropriate sub-categories.

2.

Include a filter and ways to find product faster, and display the available products featured first.

3.

Work on providing relevant and dynamic content on the home page that represents better 4th Avenue Market.

Information Architecture

How can we organize the information better on the website so users can easily find the product they need?

Steps Taken

We organized and categorized the existing content of the website, We created the existing site map to understand the current state, then we did three rounds of Card Sorting (open, hybrid and closed), and a round of tree testing. With the results of the analyses, we created arevised site map.

Existing Sitemap

Revised Sitemap

Top Findings

Products that can fall into many categories

Add some of the products on multiple categories, so the user can find them easier. (e.g., Hair Irons were accessed under Hair Tools & Accessories)

Multi-Purpose Products can fall into many categories.

Some items it was hard to categorize, we recommend creating one main category with multi-purpose products and locate this item there and under the locations users usually try to look for them.

Barbershop

The category had some issues, and users tested were not entirely sure that this was only for male products, we recommend to check "the Men Barbershop" as a category.

Research

How can we make the website mobile friendly and add increase value?

Steps Taken

Taking into consideration all of our previous research, we created a mobile prototype that we could later translate into a desktop. We started by doing User interviews, gathered insights, created a persona, and journey mapped. Then started developing the new concepts and created Lo, Mid, and Hi-Fi wireframe prototypes. Next, we ran some Usability tests on each state and created Spec Docs of the final solution.

User Interviews

I interviewed 4 potential clients to understand pain points that the hair and beauty professionals face around the online presence and booking appointments.
The users:
4 participants age between 37-47 with 11-27 years of professional experience
Licensed Hair Stylists, Certified Educators, Barber and Hair Salon Owners.
Location: Texas, New York, Wisconsin and Philadelphia,

4/4

I get many new clients from my online presence (Facebook, Instagram, Google, Yelp, Vagaro, etc.)

3/4

Me or my salon has a website and I do all the work for it

4/4

I take care of all my professional online presence

4/4

I prefer a booking tool that is user-friendly and easy to use

4/4

Reviews and recommendations are highly important when selecting a booking service

Key Insights

4/4

Reviews and recommendations are highly important when selecting a booking service

"

“A friend of mine suggested it to me”  
- User 2

"

"

I do my own website and is like having a second job
- User 4

"

Meet Angela!

40 years | Dallas, Texas | Hairdresser and educator

Goals

  • Find a better way to manage my and my salon’s online presence (website, Facebook, Instagram, etc.)
  • To run and manage my booking smoothly

Needs

  • A consistent and less time-consuming way to run my online presence
  • I need a booking tool that is user-friendly for me and my clients

Pain Points

  • I wish I could do more for my online presence, is hard to find time to do everything!
  • I have issues with consistency when trying to post on all my social media, is crucial to have social media
  • Is hard to communicate on social media what makes me unique as a professional

“I take care of my website and is like having a second job”

Problem

When hair and beauty professionals need to run their own business, they have to juggle many tools - from managing their bookings, to create and keep up with their social media platforms, so they can increase their client base and grow their business. The whole process can be time-consuming and very challenging. Angela is overwhelmed with the things she needs to do in order to run her shop. How can we help create a strong online presence for both her and her salon and help develop her customer base to have a successful business in the most efficient manner?

Design Process

Using the previous research and the existing website as a starting point, we created a mobile-friendly version.  We also developed clear design guidelines and criteria for the client to follow for the future.

Home page design process

Existing

Low-fi sketch

Mid-fi prototype

Hi-fi prototype V1

Usability Testing

We did several rounds of the design studio, and then iterated our designs and tested with potential users in every stage of the process. Here are some findings for the home page.

5/5

Users wanted a more relevant home page

"

I would use this website because there are many products
- User 2

"

Findings

During all the stages we tested the home screen, the corresponding comments were not great. The initial home screen did not have any engaging information about the brand. For the next iterations, there were still mixed comments. Users mentioned that the homepage did not gain their trust - they wanted to see more product reviews.

Recommendations

Change the home feed to more engaging content. Take out the categories and add more photos that feature brands, products, and an Instagram feed.  Also, create a new experience when you are signed in to your account and are able to see the content curated for you.

Deliver

Solution

Develop a website targeted for hair and beauty professionals to help them create an online presence and  an easy to use booking tool.
This will help them to be found by their potential clients.

Spec Docs

Using our design standards, I was in charge of creating a Specification Document for the client so that he could provide a framework for the developers to implement. Here are some of the pages we delivered:

Next Steps

Build out desktop Hi-Fi prototype

Do usability test for Hi-Fi Desktop and Mobile Prototype

Marketing and improve category naming

Personalization / Preferences

Search Functionality Test

Data Clean up