Promo Code Flow

A discount flow that does not break checkout rhythm

Project Overview

The client approached me with a small but high-impact request: users needed to apply promo codes easily before checkout.

It sounded simple, but a promo code flow can either elevate or frustrate the shopping experience. The goal was clear: design a smooth, transparent interaction that lets users feel rewarded, not confused. Delivered as a one-day design sprint.

Client

Confidential marketplace

Services

Product Design

Role

UX/UI Designer

Date

November 3, 2025

The Challenge

The marketplace already had a well-structured cart and checkout experience, but no way to apply promotions. I needed to:

Introduce the promo flow without breaking the checkout rhythm
Provide instant, clear feedback for valid and invalid codes
Keep everything aligned with the existing visual and UX language of the app

The Approach

I started by sketching out all possible user scenarios, from adding products to removing an invalid promo code. The flow covered success, error, and removal states, ensuring the system always communicates clearly with the user.

The Solution

Four key states tell a simple story:

Product page, where users add products to their cart
Cart page, where a subtle promo field appears, prompting engagement
Apply code, where the user types and taps Apply
Success feedback, with a confirmation message and an updated total

Each transition was designed to feel predictable, responsive, and rewarding.

The Impact

A clear and intuitive promo code experience
Visual consistency with the marketplace’s design system
Instant feedback and reduced friction
A future-proof flow, easy to scale for multiple codes or automatic discounts

Promo Code Flow

Project Overview

The Challenge

The Approach

The Solution

The Impact

Work with:

Work with:

Work with: