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
1. Revisit/ reorganize Information Architecture
2. Mobile friendly design solutions
3. Deliver increased value and engagement
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.
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?
Analyse Existing Website
Mobile Friendly Design Solution
Increase Value and Engagement
Analyse Existing Website
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
Categorization & Hierarch
Product Filtering and sort by
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"
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
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
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
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?
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.
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
Find a better way to purchase hair and beauty products
2. Manage my purchases
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
A way to purchase beauty and hair products quickly and easily
Better information about the products available to me
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
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.
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
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:
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