rharodesign@gmail.com / 401-649-5662

  • Instagram - Black Circle
  • LinkedIn - Black Circle

4th Avenue Market

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, Adobe CS

Deliverables

My Role

Tools Used

Revisit/ reorganize Information Architecture

Mobile-friendly design solutions

Deliver increased value and engagement

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. 

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.

Design Process

Hypothesis

Research

Synthesize

Ideate

Problem

Solution

Deliver

The team followed the double diamond model

Overview

1

2

3

Analyze Existing Website 

Information Architecture

Mobile Friendly   & Increase Value and Engagement

1

Analyze Existing Website

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.  

TOP FINDINGS

A

Categorization & Hierarchy:

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

B

Product Filtering and

sort by:

Lack of filter options forces users to go through the entire product list.

5/5 users wanted a more natural way to find products.

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.

Account registration / Login issue

C

1

A

Categorization & Hierarchy

130+ Uncategorized Categories

Product Filtering and sort by

B

GOOD FINDINGS

4/5

Users would use this site again.

I would use this website because there are many products      

I would use this website again and would recommend it

"

"

"

"

RECOMMENDATIONS

5/5

Users tested wanted a more natural way to find products 

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

1

5/5

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

2

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

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

3

TOP FINDINGS

RECOMMENDATIONS

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 to create 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. 

2

Information Architecture

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 a
revised site map.   
How can we organize the information better on the website so users can easily find the product they need?

SEE EXISTING SITEMAP

REVISED SITEMAP

Revised Sitemap Revised.jpg

3

Mobile-Friendly & Increase Value and Engagement

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.  
How can we make the website mobile friendly and add
increase value?

User Interviews

To create a better experience while using the website and to implement new features we talked to 7 target users, 3, consumers and 4 professionals, to understand their goals, behaviors, pain points and needs in their existing experience. 

KEY INSIGHTS

7/7 I do online research before buying products.

7/7 I am loyal to brands

7/7 I am loyal to not only product brands, but also stores/e-commerce websites

4/7 Research into new products is difficult
 

4/7 I love buying hair & beauty products because it makes me feel good.

MEET KRISH!

32 years | NYC | Marketing Manager

"Before I purchase anything, I need to do my research"

Goals

Find a better way to purchase hair and beauty products

Manage my purchases

Needs

A way to purchase beauty and hair products quickly and easily

Better information about the products available to me

Pain Points

Having to look in a series of places for hair and beauty products

Finding the right products for my textured hair and skin color

She is tired of spending a lot of money to try products that don't work for her

Problem 

When Krish needs to buy hair and beauty products, they are loyal to brands because product information is scattered and local availability is limited.

 

Users like sampling new personal care products, but they struggle to find the right products for them.

 

How might we provide users a fast and convenient way to procure the products that they love as well as discover new ones?

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.

Existing view of home page​

Low-FI sketch

Mid-Fi prototype

Hi-Fi prototype-version 1

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 of our key findings and iterations:

SEARCH TOOL

Findings

3/3 users tried using the search tool to locate products when they were asked to look for products.

Recommendations

Add a “Shop by Brand” category to help users find specific products faster, so they don't rely only on the search tool. 

HOME PAGE

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.  

This content is not relevant to me

"

"

"

It doesn't feel like a homepage to me

"

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. 

Existing Homepage

Mid-Fi Homepage

Hi-Fi Homepage

Hi-Fi Homepage - Loged In

Log In and explore your account

Look for products and checkout

Solution 

We created an e-commerce service where the content could be curated for each user.  Our research showed that it is hard for customers to find the right products for their needs. To further address the issue, we gave customers recommendations based on their setting, video content, and other information like reviews from users.  The changes helped users find better products that fit their needs. 

Deliver

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: 

1/11

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

Let's work together!

Let’s discuss how I can help you.