rharodesign@gmail.com / 401-649-5662

  • Instagram - Black Circle
  • LinkedIn - Black Circle

4th Ave / Free Samples

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: On-Going   Tools: Adobe XD, Sketch, Invision, Adobe CS

Deliverables

My Role

Tools Used

Re-Design existing website.

Create an initial design system package.

Deliver spec docs and coordinate with the developer.

As a lead UX/ UI Designer, continue working on developing the responsive website. I am teaming up with stakeholders and developers to build the new design concept. 

UI Design, micro-interactions, design system, and building specifications document.

Challenge

Develop the free samples program tool

Encourage users to sign up and to continue to use the samples program 

Encourage users to fill reviews

REPEAT!

Research

Concept

3 Consumers + 4 Professionals

#A6272E

#F8A72F

#5F4E21

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?

Design Process

Task Flow

Working closely with the 4th Ave Market team on creating the design elements. I created and developed various initial design study concepts explorations and iterated on them, always referring to the initial UX research in the design choices.
Following are examples on that process:

Create and account and sign in for the sample program

Solution 

The re-design of the e-commerce focuses on delivering a user center experience, where you have a more interactive element that can help you find your new favorites products.

 

The website integrates more video content and information like reviews from users to help find a better product that fits their needs.

Hi-Fi Desktop 

LANDING PAGE

Hi-Fi Phone 

PRODUCT PAGE

Hi-Fi Desktop

Hi-Fi Desktop

CATEGORY PAGE

Interactions

Interactions

We created micro-interactions to improve the experience of the users and help the developers to express the design intent of some of
the elements. 

Landing Page Animation

Top product interactions

Deliver

Spec Docs 

I was in charge of creating a Specification Document for the client and initial design system, so he can provide to the developers to help them implement our design.

Free Samples Program 

Preview

I have been working with the client to develop a Free samples program, will update the case study shortly. Here is a preview of the progress: 

Challenges

  • Develop the free samples program tool

  • Encourage users to sign up and to continue to use the samples program 

  • Encourage users to fill reviews

  • REPEAT!

Task: Create an account and fill the survey

Order free samples

Add reviews

Next Steps

Do usability test for Hi-Fi Desktop and Mobile Prototype

Develop the "My Profile Page"

Develop the "samples program" tool (currently in progress  with the client)

Personalization / Preferences 

Let's work together!

Let’s discuss how I can help you.

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.