A Rewarding Shopping Experience

Manga Store: How I designed a fashion e-commerce loyalty system that makes customer rewards feel simple, useful, and enjoyable

Project Overview

The Challenge

Design a mobile-first e-commerce app for the fashion category that integrates a simple, engaging rewards system — aimed at increasing customer loyalty and repeat purchases.

Requirements

The key requirements included mobile-optimized experience, integrated loyalty program, user-friendly shopping journey, quick and intuitive checkout, wishlist and product recommendation features.

My Role

UX/UI Designer: Research, wireframing, prototyping, and final visual design

Timeline

2 weeks

Tools

Figma, Figjam, Photoshop

Project Overview

The Challenge

The challenge was to increase customer loyalty and encourage repeat purchases within the fashion e-commerce space. The solution required a mobile app experience with a simple and engaging rewards system integrated into the shopping flow.

Requirements

The key requirements included mobile-optimized experience, integrated loyalty program, user-friendly shopping journey, quick and intuitive checkout, wishlist and product recommendation features.

My Role

UX/UI Designer: Research, wireframing, prototyping, and final visual design

Timeline

2 weeks

Tools

Figma, Figjam, Photoshop

Hypotheses

▫️If users can clearly understand how to earn and use points, they will feel more motivated to return and purchase again.

▫️Offering benefits like discounts and exclusive rewards increases brand engagement and perceived value.

▫️ A fast and seamless mobile journey increases user satisfaction and reduces drop-off.

Results and Achievements

Delivered solutions that directly address user needs and business goals

✔️ Delivered a high-fidelity prototype with a fully integrated rewards system and simplified user journey

✔️ Created a mobile-first UI with clear navigation and visual hierarchy

✔️ Designed a modular loyalty feature that lets users track progress and apply points at checkout

✔️ Aligned closely with client feedback through an iterative sprint process

✔️ Grounded all decisions in research, using consumer insights and e-commerce reports

Flow - Rewards Programme

Simulating the checking of available points, available rewards and history of points earned

Flow - Rewards Utilization

Simulating purchase and the use of the available rewards at checkout

Try the Figma Prototype

The Design Process

Understand

Secondary research on fashion e-commerce and loyalty programs.

Define

Customer archetypes and core user needs identification.

Ideate

Wireframing and rewards system integration planning.

Design

High-fidelity prototype with stakeholder feedback.

Deliver

Interactive prototype and design documentation.

Customer Archetypes

Through comprehensive research and analysis, three distinct shopping behaviour patterns emerged, each characterized by unique motivations and expectations.

Identifying these patterns provided critical insights that shaped the design strategy, ensuring features and user flows directly addressed genuine customer needs rather than assumptions.

🧍‍♀️ Exploration-Oriented Shopper

A spontaneous shopper who enjoys exploring but doesn’t always have a specific product in mind.

▪️ Browses for inspiration, often via mobile

▪️Values simplicity and speed in navigation

▪️ Needs clear access to promotions and recommendations

▪️May not yet be committed to brand loyalty

💖 Relationship-Driven Shoppers

A repeat customer who values consistency, trust, and a sense of belonging with a brand.

▪️ Actively looks for rewards or exclusive perks

▪️ Wants to track their progress and feel recognized

▪️ Expects a smooth, familiar shopping experience

▪️ Is more likely to engage with a loyalty program

💸 Value-Optimizing Shopper

A price-conscious shopper motivated by deals and practical benefits.

▪️ Prioritizes discounts, free shipping, and coupons

▪️ Looks for reward opportunities before making decisions

▪️ Appreciates transparency around how to earn and redeem points

▪️ Likely to respond to urgency or limited-time offers

The Design Process

Understand

Secondary research on fashion e-commerce and loyalty programs.

Define

Customer archetypes and core user needs identification.

Ideate

Wireframing and rewards system integration planning.

Design

High-fidelity prototype with stakeholder feedback.

Deliver

Interactive prototype and design documentation.

Understand and Define

Research

I conducted secondary research focused on fashion e-commerce, mobile shopping behaviours, and loyalty programs.

The following resources provided key data and direction:

I conducted secondary research focused on fashion e-commerce, mobile shopping behaviours, and loyalty programs.

The following resources provided key data and direction:

▪️ Deloitte E-commerce Consumer Report

▪️ CTT E-commerce Portugal Report

▪️ Datareportal Portugal 2023

Based on these resources, I gathered the following insights that directly informed my design strategy:

89%

Read reviews

Users read reviews before buying.

Social proof is crucial.

- Datareportal

76%

Create Favorites

Users enjoy creating favorites lists.

Save functionality matters.

- CTT

59%

Pay more for UX

Willing to pay more for better experience. UX impacts retention.

- Datareportal

74.5%

Want Free Shipping

Top driver for purchases - rewards should address this.

- Datareportal

39.2%

Fast Checkout

Priority for users - streamlined process essential.

- Datareportal

83%

Experience = Quality

Experience matters as much as product quality.

- Datareportal

Mobile First

Mobile is the primary discovery channel.

- CTT

Simplify Checkout

One-page checkout is

preferred.

- Deloitte

Make Offers Noticeable

Promotions should be visible upfront.

- Deloitte

Findings

89% of users read reviews before buying

- Datareportal

76% of users enjoy creating favourites lists

- CTT

59% are willing to pay more for a better experience

- Datareportal

83% say the experience matters as much as product quality

- Datareportal

Mobile is the primary discovery channel

- CTT

The top drivers are: free shipping (74.5%), coupons (49.9%), fast checkout (39.2%)

- Datareportal

One-page checkout is preferred

- Deloitte

Promotions should be visible upfront

- Deloitte

Key Factors

The product screen must highlight ratings and social proof

Users expect to save products easily

UX directly impacts retention and value perception

A seamless journey builds trust and connection

The APP needs to support intuitive mobile navigation

Loyalty rewards should reflect these expectations

Checkout must be streamlined and fully visible

Home screen should highlight deals and rewards

Findings

89% of users read reviews before buying

- Datareportal

76% of users enjoy creating favourites lists

- CTT

59% are willing to pay more for a better experience

- Datareportal

83% say the experience matters as much as product quality

- Datareportal

Mobile is the primary discovery channel

- CTT

The top drivers are: free shipping (74.5%), coupons (49.9%), fast checkout (39.2%)

- Datareportal

One-page checkout is preferred

- Deloitte

Promotions should be visible upfront

- Deloitte

Key Factors

The product screen must highlight ratings and social proof

Users expect to save products easily

UX directly impacts retention and value perception

A seamless journey builds trust and connection

The APP needs to support intuitive mobile navigation

Loyalty rewards should reflect these expectations

Checkout must be streamlined and fully visible

Home screen should highlight deals and rewards

Key Factors

The product screen must highlight ratings and social proof

Users expect to save products easily

UX directly impacts retention and value perception

A seamless journey builds trust and connection

The APP needs to support intuitive mobile navigation

Loyalty rewards should reflect these expectations

Checkout must be streamlined and fully visible

Home screen should highlight deals and rewards

Ideation and Wireframing

I translated research insights into low-fidelity wireframes focused on integrating the rewards experience into the overall shopping journey. Key design decisions included highlighting promotions early, simplifying the points system interface, and embedding progress tracking directly into the user flow.

The wireframes prioritized clarity and usability, ensuring users could easily earn, track, and apply points without friction.

Customer Archetypes

Through comprehensive research and analysis, three distinct shopping behaviour patterns emerged, each characterized by unique motivations and expectations.

Identifying these patterns provided critical insights that shaped the design strategy, ensuring features and user flows directly addressed genuine customer needs rather than assumptions.

🧍‍♀️ Exploration-Oriented Shopper

A spontaneous shopper who enjoys exploring but doesn’t always have a specific product in mind.

▪️ Browses for inspiration, often via mobile

▪️Values simplicity and speed in navigation

▪️ Needs clear access to promotions and recommendations

▪️May not yet be committed to brand loyalty

💖 Relationship-Driven Shoppers

A repeat customer who values consistency, trust, and a sense of belonging with a brand.

▪️ Actively looks for rewards or exclusive perks

▪️ Wants to track their progress and feel recognized

▪️ Expects a smooth, familiar shopping experience

▪️ Is more likely to engage with a loyalty program

💸 Value-Optimizing Shopper

A price-conscious shopper motivated by deals and practical benefits.

▪️ Prioritizes discounts, free shipping, and coupons

▪️ Looks for reward opportunities before making decisions

▪️ Appreciates transparency around how to earn and redeem points

▪️ Likely to respond to urgency or limited-time offers

Core User Need

Customers want to shop without wasting time, clearly understand what they're getting, and feel rewarded for their loyalty.

Ideation and Wireframing

The wireframes prioritized clarity and usability, ensuring users could easily earn, track, and apply points without friction.

Final Screens

A snapshot of the final screens, shaped by research and iteration.

Design Refinement and High-Fidelity Prototype

Following alignment sessions with project stakeholders, I refined the initial wireframes to ensure the final solution met both the defined requirements and the intended product vision. Based on their feedback, I enhanced the visual hierarchy, clarified the loyalty flow, and adjusted component behavior to improve usability and better reflect user goals.

Before and After

Below, you’ll find a comparison between early wireframes and the high-fidelity prototype, highlighting how the design evolved through iteration and feedback.

See It in Action

Watch the complete flow.