Loyalty Tiers feature redesign for B2B
e-commerce platform

redesign

Project outcomes

Empowered brands driving over 90% of Yotpo Loyalty's ARR to adopt self-service with an industry-leading UX, strengthening Yotpo's leadership in loyalty.

Problem

Meet the user persona

Alex

Lifecycle Marketing manager in e-commerce brand

It's Alex's job to incentivize his customers' to buy more (AOV📈) and more often (RPR📈). To do this, he wants to create a loyalty tiers program.

A loyalty tiers program means the more you shop, the better rewards you get – like bigger perks for loyal customers.

But every time Alex tries to set up loyalty tiers with Yotpo platform, he gets more questions then answers.

So Alex decides to reach the customer success manager to set up program for her.

In result, the fact that Alex cannot set up and edit the program by herself, it costs Yotpo much more to acquire and sustain Alex as a customer.

Yotpo HQ - Our CSM costs are way too high!

So the challenge was

Reduce IM/CSM costs by enabling customers to self-manage loyalty tiers programs.

Solution

By entire UX revamp in very limited Yotpo design system environment, we enabled the full self-service for Yotpo's clients. Created a shift for outdated UX pattern for tiered loyatly programs setup.

Before

After

Research highlights

Analyzed how shops configure loyalty tiers — number, duration, thresholds, and benefits.

Most merchants used 3–4 spend-based tiers.

Analyzed common patterns in how merchants typically set up their loyalty tiers program.

Users first make decisions in Excel, then configure them in the admin panel.

Gained a deep understanding of the existing complex backend logic behind loyalty tiers.

Much of the original logic was rarely or never used by real customers.

Scoped releases around system limitations and time needed to add components.

The DS didn't support horizontal scroll for the chosen layout.

Competitive landscape

Most competitors used nearly identical UI patterns, where the setup flow and the shopper's view looked nothing alike – making tier setup confusing.
We decided to rethink this model and searched for inspiration outside standard loyalty-tier interfaces.

Market standard of set-up interface

Standard admin interface showing separate pages for each tier setup

Every tier sets up on a separate page.

Customer-Facing Tier Display

The whole program is displayed on a single table.

In conclusion

Loyalty-tier setup should mirror shopper UI, removing Excel as the middle-man.

Concept evolution

Early table concept version 1 showing initial brainstorming results

1. Early version

This raw version is a result of the team brainstorm on how the table view of loyalty tiers could look like.

The main goal of this creative session was to challenge the very possibility of table display and wether it's possible with Yotpo's DS.

Intermediate table concept version 2 with refined UX decisions

2. Intermediate version

At this stage, the final table view started to take shape. We took most of the key decisions on feature's UX.

However, the inline editing of each cell still was the unresolved issue, as the settings of each cell can be quite complex.

Final viable table concept version 3 with side panel editing

3. Viable version

We finalized the editing pattern by introducing a side panel component whose content reflects the selected cell.

This made the layout easily adaptable to any amount of content within the editing form.

Viable version validation

The first concept validation came from unmoderated user testing on UserTesting.com, where all 10 participants successfully completed the main task — creating a new tier and editing its benefits.

Later, when testing the table concept with real users and our CSMs, the task success rate remained well above our defined threshold (90%+).

Table view key features

Global settings and cell editing interface overview

Global tier settings

Another major challenge was the global settings section. Displaying all settings alongside the main table proved difficult, so instead of forcing them into the table layout, we revisited the existing settings.

Before