rharodesign@gmail.com / 401-649-5662

  • Instagram - Black Circle
  • LinkedIn - Black Circle

4th Ave Market

The brand is a black-owned responsive  E-Commerce website that sells hair, beauty and personal care products, curated to resolve the unique needs of people of color and professionals that serve them, recently launched on 2019. 

Time: 2 weeks   Tools: Sketch, Invision, Adobe CS

Tools

Deliverables

1.  Revisit/ reorganize Information Architecture

2.  Mobile friendly design solutions

3.  Deliver increased value and engagement

My Role

My responsibility in a multidisciplinary 4 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 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.

Problem 

When people of color need to buy hair and beauty products, they are loyal to brands because product information is scattered and local availability is limited.
Users likes sampling new personal care products, but they struggles to find the right
products for them.
How might we provide users a fast and convenient way to procure the products that they loves as well as discover new ones?

Overview

1

2

3

4

Analyse Existing Website 

Information Architecture

Mobile Friendly  Design Solution

Increase Value and Engagement

1

Analyse Existing Website

​Steps Taken:

Usability Testing on Current Website, Heuristic Analysis,  Competitive Analysis.

We started by testing the current website with 5 target users, doing a heuristic and competitive analysis, here are our top findings:

1. Categorization & Hierarchy:

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

2. Product Filtering and sort by:

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

5/5 users wanted an easier way to find products

3. Account registration / Login issue:

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

2/5 users completed the sign-up/register process.

Account registration / Login issue

3

1

2

Categorization & Hierarch

Product Filtering and sort by

Good Findings

4/5 users would use this site again.

"I would use this website because there is a lot of product"

"I would use this website again and would recommend it"
 

2

Information Architecture

​Steps Taken:

Existing site map, Card Sorting 3 rounds (open, hybrid and closed), 

Tree testing, Revise site map.

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

130 + Categories

We started by analyzing the site map of the existing website.

After analyzing the existing site, we started by testing the existing content and categories, we did 3 round of card sorting and one round of

tree testing.

Card Sorting Round 1 open:

We tested with 19 participants 50 categories from the 130+ existing  to come up with the primary and secondary level categories.
 

Card Sorting Round 2 Hybrid: 

We tested 4 categories with 20 participants 

To test the primary level categories gathered from Card Sorting Round 1 and allow users to add additional categories as needed.

Card Sorting Round 3 closed:  

We tested 13 secondary level categories with 23 participants,To test the secondary level categories collected from Card Sorting Round 1 & 2 with new tertiary level categories

Tree Testing:

We gave 21 users tasks that related to potentially confusing products to understand which hierarchy path users would follow to get to the product

To test the primary, secondary level categories gathered from all Card Sorting and all of our lists/results/data.

Following is the revised site map with the proposed Primary, Secondary and Tertiary Navigation based on our research:

Mobile Friendly & Increase Value

+

3

4

​Steps Taken:

User interviews, Sketching, Wireframes, Rapid prototyping, Mid and Hi-Fi Prototypes, Usability testing.

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 started by designing a mobile version of the website and 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.

Persona: Meet Krish!

Age: 32 | Gender: Female | Location: NYC | Occupation: Marketing Manager

Goals

Find a better way to purchase hair and beauty products

2. Manage my purchases

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

Not knowing whether or not I’m getting the best price for the product

Needs

A way to purchase beauty and hair products quickly and easily

Better information about the products available to me

Design Process

Using the existing website as a starting point and an initial design studio with the client, we started developing the phone friendly version of the website and started adding elements that increase value and engagement on the website. 

HOME PAGE DESIGN PROCESS

Existing view of home page​

Low-FI sketch

Mid-Fi prototype

Hi-Fi prototype-version 1

Design intent: For the home page we created a more engaging and relevant experience for the user, we are displaying some information about the company for first time users to get them familiar with the brand, also help users to find the products they are looking for easier and faster, and highlight some relevant brands and content. 

The Solution 

Our solution is create a e-commerce were the content can be curated to each user, since our research shown that is hard for them to find the right products for their needs, also to help them with this we are giving them recommendation based on their personal setting, video content and more information like reviews from users to help find better product that fits their needs.

PRODUCT DETAIL PAGE 

LOGGED IN HOME PAGE 

Log In and explore your account

Look for products and checkout

Spec Docs

For the client delivery, I was in charge of developing a spec doc so he can provide to front-end developer to help them implement our design, here are some of the pages: 

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