E-commerce — Mobile Experience

E-commerce Purchase Flow

E-commerce Purchase Flow

Designing a mobile purchase experience focused on clarity, speed and reducing friction during checkout.

Designing a mobile purchase experience focused on clarity, speed and reducing friction during checkout.

Role: Product Designer

Type: Concept project

Year: 2026

Overview

Overview

This project explores the design of a mobile e-commerce purchase flow, from product discovery to order confirmation.

The goal was to create a simple and clear experience that helps users browse products, understand key information and complete a purchase without friction.

The focus was on applying familiar patterns and structuring the flow in a way that supports quick decision-making.

Problem

Problem

Mobile e-commerce experiences often introduce unnecessary friction during the purchase process.

Users are required to navigate multiple steps, interpret dense product information and make decisions with limited clarity.

This can lead to hesitation, errors or drop-offs, especially during key moments like product selection or checkout.

Product Approach

Product Approach

The product was approached as a linear purchase flow, where each step supports a specific decision:


  • Browsing products

  • Understanding product details

  • Selecting options

  • Reviewing the cart

  • Completing the purchase


The goal was to reduce cognitive load by simplifying each step and maintaining consistency across the flow.

Core Structure

Core Structure

Core screens of the purchase flow

User Flow

User Flow

The flow was designed as a straightforward sequence from product discovery to checkout, minimizing unnecessary steps and keeping users oriented throughout the process.

Wireframes

Wireframes

Early wireframes were used to define layout, hierarchy and content structure before moving to final UI.

The focus was on clarity of information and positioning of primary actions.

Prototype

Prototype

A simple prototype was created to validate the flow and interaction between steps.

Deep Dive

Deep Dive

Product List

Product List

The product list is designed to support quick scanning and comparison.

Products are displayed in a simple grid, prioritizing image, name and price. A minimal structure reduces visual noise and helps users move quickly to product selection.

Product Detail

Product Detail

The product detail page focuses on clarity and decision-making.

Key information such as images, price and description are structured to reduce ambiguity. The primary action (add to cart) is always visible and clearly prioritized.

The process starts from a predefined trigger.

Instead of requiring full configuration, the system uses pre-configured states.

This reduces friction and allows users to focus on the logic.

Add to Cart

Add to Cart

To handle the transition after “Add to cart”, I explored different interaction patterns.

Instead of navigating to a new page, I used a bottom sheet that updates its content after the action. This keeps the interaction consistent with size selection and avoids breaking the flow.

This approach allows users to quickly confirm the action and decide whether to continue shopping or proceed to checkout.

The process starts from a predefined trigger.

Instead of requiring full configuration, the system uses pre-configured states.

This reduces friction and allows users to focus on the logic.

Cart

Cart

The cart provides a clear overview of selected items, quantities and total cost.

The layout emphasizes transparency, allowing users to review their choices before proceeding to checkout.

Checkout

Checkout

The checkout is simplified into a single step to reduce friction.

Only essential information is required, helping users complete the purchase quickly without unnecessary interruptions.

Key Design Decisions

Key Design Decisions

  • Reduced the checkout to a single step to minimize friction

  • Prioritized primary actions (Add to cart, Checkout) for clarity

  • Structured product information to support quick understanding

  • Maintained consistent layout patterns across all screens

  • Limited visual complexity to reduce cognitive load

Outcome

Outcome

The result is a simple and coherent purchase flow that follows familiar e-commerce patterns while improving clarity and usability.

The project demonstrates the ability to design complete user flows, structure information effectively and deliver functional interfaces aligned with real product scenarios.

Andrea Picariello

Product Designer

Andrea Picariello

Product Designer

Andrea Picariello

Product Designer