4th Ave / UI Redesign

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

Deliverables

Redesign existing website.

Create an initial design system package.

Deliver spec docs and coordinate with the developer.

My Role

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.

Tools Used

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

Challenge

Initially, I worked on a UX design team to gather initial research and prototypes. I am now the lead, UX/UI Designer, and with the help of an initial re-design package from a marketing agency. I am responsible to Iterate the design concept for the responsive website and coordinate the creation of it with developers.

New Design

Concept

The new design will invoke a minimalist branding aesthetic with slightly muted tones. The imagery leans into close up for product and model shots to articulate the ethos of the 4th Ave Market brands

Graphics

Color palette

Text Styles

Logo

Design Process

Design Studies

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:

Top Navigation Menu

Concept A

Concept A

2 Main menu, Black is always visible

Concept based using existing menu as a reference

When scrolling down, white menu fades out

Concept B

Landing Page

Concept A

Concept B

Final Concept

Concept C

Deliver

Solution

Hi-Fi Phone

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

Category Page

Product Page

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.

Here is an example of an animation that helped communicating the design intent.

Top product interaction

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

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

More Case Studies

Home Page4th Ave | UX Design4th Ave | UI DesignFetch | UX/UI Design