HM
A one-week concept redesigning a fashion retailer’s loyalty experience — where retention economics meet UX.
HM
A one-week concept redesigning a fashion retailer’s loyalty experience — where retention economics meet UX.
Overview
Overview
A self-initiated, one-week concept built around a question every e-commerce business cares about: acquiring a customer is expensive, so what makes them come back? I used HM's (H&M) loyalty program as the case: a real program, at scale, with visible friction — and redesigned how it's structured and surfaced on the web experience.
This is an unsolicited concept; I have no affiliation with the brand.
A self-initiated, one-week concept built around a question every e-commerce business cares about: acquiring a customer is expensive, so what makes them come back? I used HM's (H&M) loyalty program as the case: a real program, at scale, with visible friction — and redesigned how it's structured and surfaced on the web experience.
This is an unsolicited concept; I have no affiliation with the brand.
This project aimed to create a concept design of the features that form the basis of a bank application in a short period of 1 week.
This project aimed to create a concept design of the features that form the basis of a bank application in a short period of 1 week.
Role
Role
Product Designer -
Solo Concept
Time
Time
2023
2023
Scope
Scope
Scope
One week meant choosing between breadth and depth. I focused on the loyalty experience end-to-end — how points are earned, how progress is communicated, and how rewards create a reason to return — rather than redesigning the entire store. The e-commerce flows around it stayed intact so the concept could be judged against a realistic context.
Throughout the project, I aimed for success by following "Design Thinking: a Non-Linear Process" principles.
Throughout the project, I aimed for success by following "Design Thinking:
a Non-Linear Process" principles.
The User Problem
The User Problem
The User Problem
Loyalty programs fail quietly. Users sign up, forget the program exists, and the points expire unused — at which point the program produces the opposite of loyalty: a vague sense of being cheated.
The design question was: how do you keep a loyalty program present in the shopping experience without turning it into noise?
Loyalty programs fail quietly. Users sign up, forget the program exists, and the points expire unused — at which point the program produces the opposite of loyalty: a vague sense of being cheated.
The design question was: how do you keep a loyalty program present in the shopping experience without turning it into noise?
The Business Problem
The Business Problem
The Business Problem
For the retailer, loyalty isn't a feature — it's retention economics. A returning customer costs a fraction of an acquired one.
So every design decision was weighed against one metric: does this give the customer a concrete reason to come back?
For the retailer, loyalty isn't a feature — it's retention economics. A returning customer costs a fraction of an acquired one.
So every design decision was weighed against one metric: does this give the customer a concrete reason to come back?
Research
Research
Research
I benchmarked loyalty mechanics across programs inside and outside fashion retail to map which structures actually change behavior — tiered levels, progress visibility, member-only access, and time-based rewards.
I benchmarked loyalty mechanics across programs inside and outside fashion retail to map which structures actually change behavior — tiered levels, progress visibility, member-only access, and time-based rewards.
The starting point: HM's existing program. Auditing it surfaced two issues — reward mechanics only a frequent shopper could reach, and friction points inside the shopping flow itself.
The starting point: HM's existing program. Auditing it surfaced two issues — reward mechanics only a frequent shopper could reach, and friction points inside the shopping flow itself.
Market context: a 2020–21 industry survey of loyalty membership in Turkey.
The notable finding — no fashion brand made the top of the list, suggesting loyalty in fashion retail was underdesigned as a category.
This survey was conducted by Ketchup in 2020-2021.
Market context: a 2020–21 industry survey of loyalty membership in Turkey.
The notable finding — no fashion brand made the top of the list, suggesting loyalty in fashion retail was underdesigned as a category.
This survey was conducted by Ketchup in 2020-2021.
The baseline mechanic — works only when earning feels frequent enough to stay visible.
The baseline mechanic — works only when earning feels frequent enough to stay visible.
The strongest retention pattern in the benchmark: a visible next tier turns membership into a goal. This became the backbone of my concept.
Note the reward types: mostly access, barely any discounts.
The strongest retention pattern in the benchmark: a visible next tier turns membership into a goal. This became the backbone of my concept.
Note the reward types: mostly access, barely any discounts.
Sephora lets members convert points into charity donations — loyalty as identity, not just economics.
Sephora lets members convert points into charity donations — loyalty as identity, not just economics.
Prepayment creates commitment, but it fits high-frequency retail; a fee would raise the entry barrier fashion loyalty needs to lower.
Prepayment creates commitment, but it fits high-frequency retail; a fee would raise the entry barrier fashion loyalty needs to lower.
The pattern that stood out: programs that work make progress visible and almost complete. A customer who can see they're 200 points from the next tier behaves differently from one who has to look their points up.
The pattern that stood out: programs that work make progress visible and almost complete. A customer who can see they're 200 points from the next tier behaves differently from one who has to look their points up.
Design Decisions
Design Decisions
1. Loyalty as a layer, not a page
1. Loyalty as a layer, not a page
1. Loyalty as a layer, not a page
Points and tier status appear at the moments they influence decisions: product page, cart, and post-purchase. The loyalty program lives where the shopping happens.
Points and tier status appear at the moments they influence decisions: product page, cart, and post-purchase. The loyalty program lives where the shopping happens.
Points and tier status appear at the moments they influence decisions: product page, cart, and post-purchase. The loyalty program lives where the shopping happens.
Home Page — Before/After
Home Page — Before/After
Before/after: membership surfaced on the home page and the nav bar — the program meets the customer where shopping starts, instead of waiting in an account page.
Before/after: membership surfaced on the home page and the nav bar — the program meets the customer where shopping starts, instead of waiting in an account page.
Before/after: membership surfaced on the home page and the nav bar — the program meets the customer where shopping starts, instead of waiting in an account page.
2. Depth on the page, not behind a click
2. Depth on the page, not behind a click
2. Depth on the page, not behind a click
The original loyalty page explained almost nothing and hid the rest behind a "more info" step. I rebuilt it with roughly five times the content on a single page. A program can't motivate customers who don't understand its rules.
The original loyalty page explained almost nothing and hid the rest behind a "more info" step. I rebuilt it with roughly five times the content on a single page. A program can't motivate customers who don't understand its rules.
The original loyalty page explained almost nothing and hid the rest behind a "more info" step. I rebuilt it with roughly five times the content on a single page. A program can't motivate customers who don't understand its rules.
Loyalty Detail Page — Before/After
Loyalty Detail Page — Before/After
Before/after: the original page ends where the questions begin — the redesign answers them in place. Roughly 5× the content, zero extra clicks.
Before/after: the original page ends where the questions begin — the redesign answers them in place. Roughly 5× the content, zero extra clicks.
Before/after: the original page ends where the questions begin — the redesign answers them in place. Roughly 5× the content, zero extra clicks.
3. Tiered structure with visible progress
3. Tiered structure with visible progress
I designed the program around levels, because a visible "next step" converts passive membership into a goal. The progress state is surfaced inside the shopping flow — not buried in an account page. The rewards themselves are framed as access — member-only products and early shipping — rather than discounts: discounting trains customers to wait, access trains them to return.
I designed the program around levels, because a visible "next step" converts passive membership into a goal. The progress state is surfaced inside the shopping flow — not buried in an account page. The rewards themselves are framed as access — member-only products and early shipping — rather than discounts: discounting trains customers to wait, access trains them to return.
I designed the program around levels, because a visible "next step" converts passive membership into a goal. The progress state is surfaced inside the shopping flow — not buried in an account page. The rewards themselves are framed as access — member-only products and early shipping — rather than discounts: discounting trains customers to wait, access trains them to return.
Profile Page — Before/After
Profile Page — Before/After
Before/after: the profile page rebuilt around level logic, borrowing progression patterns from games — the customer's current tier and next step are the first thing the page shows.
Before/after: the profile page rebuilt around level logic, borrowing progression patterns from games — the customer's current tier and next step are the first thing the page shows.
Before/after: the profile page rebuilt around level logic, borrowing progression patterns from games — the customer's current tier and next step are the first thing the page shows.
Validation
Validation
Validation
I tested the concept with 10 participants, deliberately recruited for range rather than convenience: a retiree, a homemaker, a university student, a loyal HM customer, and six participants with no attachment to the brand. Testing across this spread surfaced what a designer-only test wouldn't: the onboarding assumed too much. Users who shop rarely didn't understand how points translated into value — which told me the program's entry moment needed as much design attention as its reward structure.
In this phase, I analyzed the research results and gained insight into the problems.
In this phase, I analyzed the research results and gained insight into the problems.
What I'd Do Differently Today
What I'd Do Differently Today
What I'd Do Differently Today
I'd cut the AR fitting-room concept from the sprint. I originally included it to address sizing returns — a real and expensive problem — but two problems in one week dilutes both. Today I'd treat it as a separate track with its own validation. The fast-shipping perk from the same exploration, though, belongs in the core program — shipping priority is exactly the kind of access-based reward the tier structure needs.
In this phase, I analyzed the research results and gained insight into the problems.
In this phase, I analyzed the research results and gained insight into the problems.
The AR Exploration
The AR Exploration
AR try-on references I benchmarked during the original sprint.
AR try-on references I benchmarked during the original sprint.
AR try-on references I benchmarked during the original sprint.
The AR fitting-room exploration from the original sprint — a valid problem, the wrong week.
The AR fitting-room exploration from the original sprint — a valid problem, the wrong week.
The AR fitting-room exploration from the original sprint — a valid problem, the wrong week.
How the concept worked: the customer entered height, weight, and body type; the system generated a lifelike model to preview fit before buying — aimed directly at sizing returns.
The problem is real; it just deserved its own sprint.
How the concept worked: the customer entered height, weight, and body type; the system generated a lifelike model to preview fit before buying — aimed directly at sizing returns.
The problem is real; it just deserved its own sprint.
Once the user has entered the required information, our system utilizes AR VR technology to generate a lifelike human model.
This allows users to visualize the relevant product on the virtual model, providing an immersive and interactive shopping experience.
In this way, I aimed to minimize size problems.
Once the user has entered the required information, our system utilizes AR VR technology to generate a lifelike human model. This allows users to visualize the relevant product on the virtual model, providing an immersive and interactive shopping experience.
In this way, I aimed to minimize size problems.
I'd define the loyalty tiers with data, not intuition: purchase-frequency segments should set the point thresholds, and I'd design the dashboard views to monitor whether tier progression actually correlates with repeat purchase.
I'd define the loyalty tiers with data, not intuition: purchase-frequency segments should set the point thresholds, and I'd design the dashboard views to monitor whether tier progression actually correlates with repeat purchase.
I'd prototype the failure states: expired points, downgraded tiers, out-of-stock member rewards. Loyalty is a promise — and like any promise, it's tested when something goes wrong, not when it goes right.
I'd prototype the failure states: expired points, downgraded tiers, out-of-stock member rewards. Loyalty is a promise — and like any promise, it's tested when something goes wrong, not when it goes right.
More Works
More Works
More Works