Skip to Content

Home

Resume

About

Home

Resume

About

Home

Resume

About

Resume.

Download

Thank you!

Overview

Problem Statement

The Rose Inc. mini-cart section is usually a dropdown that contains a summary of the cart details; it’s used to give the user a glance at their cart without leaving the current page that they’re on. Rose Inc. users cannot add their favorite shades to their Mini-cart for a successful checkout, leading to cart abandonment.

Role:

My role includes User Research, Data Analytics, Concept Development, Wireframe, and Visual Design.

Timeline: 3 weeks

Goals: Provide a solution for the users to find their color shades and decrease cart abandonment.

HMV: How Might We design a solution to display all the shades for the products in the Mini-cart section for a better shopping cart experience?

Why: Decreasing the abandonment rate is an effective way to increase revenue immediately.

How: Using Google Analytics and Hotjar to track user behavior and design potential solutions for the enhanced user experience.

Solution:

Solution: Adding a new feature called ‘shade finder’ carousel gallery with all the shades and descriptions in the Mini-cart section for the users to find their shade numbers and colors to add to the Min-cart section.

Design Process

Research Summary:

Assessing who my user audience are and analyzing the user behavior and familiarities on Google Analytics and Hot Jar has helped me understand whom I’m designing for and able to align and approach redesigning the mini cart section for a better user experience.

User Data Analytics Summary:

Demographics:

30% - 18yrs -22yrs

70% - 22yrs-50yrs

80% Women

20% men

User Behavior Summary:

Purchase tunnel:

After adding the products to the cart section, most of the users left the Mini cart section because they were not able to find their shades which led to page exits.

Brainstorming:

What will the users like to see on the Mini-cart section?
Would it be better to add all the shades to the cart? If yes, how many color shades to display?
Should I add color shades with shade numbers and descriptions?
What will be the best design solutions to display all the shades with a description?

After my brainstorming exercise, I developed wireframes for the responsive design, considering Rose inc. is a mobile-first design experience.

Brainstorming On Mural

Displaying all shades in the carousel.
Create a scrollable modal.
Shade color and descriptions are essential.

Challenge: The Mini-cart section is small, and there is no real estate to design a new section.

Wireframes

I created wireframes to propose new design changes and layouts based on my initial user research and user needs. The wireframe helped me better asses what functionality, layout, and components were working and what wasn't based on stakeholders' and product managers' feedback.

Feature Added: Shade Finder

I implemented the innovative "Shade Finder" feature to enhance user experience.
It incorporated a mini scrollable gallery within the interface, enabling users to discover a broader range of shades effortlessly.
Enhanced usability by including the shade/product name and description, allowing users to identify and remember their favorite shades quickly.

Feature Added: Shade Finder

Implemented efficient categorization for new arrivals and existing products, streamlining the browsing experience.
Designed intuitive icons and established a clear visual hierarchy for seamless navigation.

Design Decisions:

Introduced an exciting new feature called "Shade Finder" within the Mini-Cart section to enhance user experience.
Opted for a design approach that avoids a popup gallery modal due to limited space within the Mini-Cart section.
Incorporated a compact and user-friendly Mini Carousel Gallery with a scroll bar to facilitate easy discovery of preferred shades.
Implemented a vertical scroll bar along with the carousel gallery, empowering users to effortlessly explore an extensive range of shades.

Design Review

After a design review with stakeholders and product managers, I have developed a potential design solution to prioritize the shade finder and for the users to find their preferred shades in the Mini-cart section.

UI Cards

Incorporating brand and consistency, I started designing the UI cards with brand guidelines ensuring all the colors, components, assets, and icons consistently bring a delightful experience to the users.

Visual Design

Result

Decreased Cart Abandonment.
More user traffic to the Rose Inc. website and mobile
Increased conversion rate
Users successfully added their preferred shade to the Mini-cart to checkout.

What I have learned

Prioritizing research and user data helped me quickly understand user behavior and the improvements needed to redesign the Rose Inc. website Mini-cart section.

Resume.

Overview

Problem Statement

Design Process

Research Summary:

User Data Analytics Summary:

Brainstorming On Mural

Wireframes

Design Decisions:

Design Review

UI Cards

Visual Design

Result

What I have learned

Thank You!