AddCart E-commerce Experience

Objective Definition

To improve the user experience and visual design of an e-commerce platform for desktop, mobile web, and a mobile app, focusing on increasing conversion rates, user engagement, and retention.

Key Responsibilities:

Led the end-to-end design process.

Conducted research, created wireframes, prototypes, and high-fidelity UI designs.

Collaborated with product managers, developers, and marketing teams.

Problem Statement

The existing AddCart platform faced the following challenges:

High cart abandonment rates on the desktop and mobile app.

Inconsistent design across web and mobile.

Limited engagement with new arrivals and top-selling sections.

Goal Redesign the platform to create a more intuitive and visually appealing shopping experience while ensuring accessibility and responsiveness.

Research Phase

User Research

Conducted interviews with 10 frequent e-commerce users to understand pain points.

Collected insights from user reviews and feedback on the app store.

Key Findings

Users wanted simplified navigation and better filter options.

Many users found the product pages too information-heavy.

Mobile users preferred quick access to the cart and checkout.

Competitor Analysis

Amazon
Strengths

Seamless product search with smart recommendations.

Detailed product pages with reviews, ratings, and Q&A.

One-click purchase for faster checkout.

Weaknesses

Overwhelming design for new users.

Too many promotions causing distractions.

Zara
Strengths

Minimalist, visually appealing design focused on aesthetics.

Strong emphasis on seasonal collections and trends.

One-click purchase for faster checkout.

Weaknesses

Limited filter options, leading to a longer browsing time.

Less detailed product descriptions.

H&M
Strengths

Easy navigation and well-organized categories.

Engaging loyalty program integration.

Weaknesses

Inconsistent mobile experience compared to the desktop site.

Basic cart functionality without personalization options.

Design Process

Information Architecture

Created a user flow diagram to simplify the shopping process.

Reorganized navigation by introducing clear categories (e.g., “New Arrivals,” “Casual,” “Top Selling”).

Wireframing

Designed low-fidelity wireframes for desktop, mobile web, and the mobile app.

Focused on the placement of filters, product cards, and CTAs.

Prototyping

Developed clickable prototypes in Figma to demonstrate flows for adding items to the cart, applying filters, and navigating between sections.

Accessibility

Easy-to-read fonts and high-contrast buttons

UI Design

Design Language:

Colors Used AddCart’s signature blue for trust and white for a clean, modern look.

Typography Selected a modern sans-serif font for readability and consistency.

Icons Designed minimalist, intuitive icons for filters, navigation, and cart actions.

Key Screens Redesigned
Homepage:

Highlighted promotions (“50% off on everything today”).

Added a carousel for new arrivals and top-selling items.

Category Page:

Improved filter options with interactive sliders and multi-select checkboxes.

Streamlined the grid layout for better product visibility.

Product Details Page:

Simplified content with clear pricing, size selection, and reviews.

Added a sticky “Add to Cart” button for mobile users.

Cart Page:

Introduced a cleaner design with product thumbnails, quantity adjustment, and promo code sections.

Design System: Created reusable components like buttons, cards, dropdowns, and icons to ensure consistency across platforms.

Usability Testing

Conducted testing with 8 users using the prototypes

Collected feedback on navigation, filter usability, and checkout flow

Improvements Based on Feedback:

Enhanced the visibility of the filter section on smaller screens

Added breadcrumb navigation for better context

Optimized the mobile cart experience by reducing taps required for checkout

Collaboration with Developers

Provided detailed design specifications and assets via Zeplin

Conducted weekly standups with the development team to address challenges

Performed design QA to ensure fidelity between the design and final product