The UX behind a 76% growth in new loyalty user registrations

Loyalty Page · 2021

Product
Hangry Loyalty Landing Page
Team
1 designer (me), 1 engineer
Role
Research, user interviews, product thinking, UX writing, UI/UX design
Outcome
Increase 76% new user registrations for Hangry loyalty program

How I Found the Real Problem

In April 2021, new loyalty program registrations dropped 30% in a single month, from 4,217 to 2,916 users. Some assumptions arose.

“Is the program attractive enough to customers?”

“Is the UI confusing?”

“Are the benefits not interesting?”

All reasonable assumptions, but unfortunately all wrong.

Before touching anything related to design, I needed to know and understand what’s actually wrong in here. So. I coordinated with the Ops & Customer Experience team to reach customers who had bought Hangry product but never joined the loyalty program.

We successfully gathered around 10 customers and I asked them one by one via online call with two main things:

“Did they know the loyalty program existed?”

“Why hadn’t they joined?”

Surprisingly, the answers were consistent around these three:

“I know about the program, but I’m too lazy to scan the bill because I have to download the app first.”

“I don’t wanna download another app, my phone storage is already full.”

“I’d like to join the program, but I don’t really know what the benefits are. If I have to download the app just to find out, I’m not interested.”

Based on that user interview, the real problem was a single friction point:

“Requirement to download the Hangry App just to participate in the program.”

How I Solved It

Scan purchase bill with phone camera
Hangry App installed? Yes/No
Open Hangry App Scanning QR + point collected
Open Play/App Store The friction is here
Yes No
Existing user flow — Journey to collect point without Hangry App

The interviews made one thing clear:

“The app was the barrier.”

So the question shifted:

“What if users could register without downloading the app at all?”

If that was possible, what was the right way to do it?

I mapped the realistic options that I could think of, which is WhatsApp Registration and Landing Page against the constraints we had, what users needed, what the business needed, and what engineering could actually take on given their current workload.

Idea No app download Low tech effort Registration Point collection
WhatsApp Regis Yes Yes Yes No
Landing Page Yes Yes Yes Yes

A landing page covered everything: no download, low tech effort, registration, and point collection in one place.

But there was another concern that came up.

“If users could register and collect points without the Hangry App, what reason did they have to download it at all?”

So I thought about what the app actually does that a landing page never would?

“It is redeeming.”

Landing page · No app · Friction removed

  • Scan QR purchase bill
  • Discover & learn about loyalty program and the benefits
  • Registration
  • Collect points (accumulate)

Hangry App teritory (Download App)

  • Cashback
  • Redeem merchandise
  • Redeem vouchers

Collect anywhere. Redeem only in the app.

The landing page wasn’t replacing the app. It was feeding it. Users who arrived with zero points had little reason to download anything. But users who had accumulated points and could see a real number sitting there, now had something concrete waiting for them. The download felt worth it because there was already something to redeem.

The friction wasn’t removed. It was moved to a better place in the journey.

Instead of redirecting users to the App/Play store when they scanned their purchase bill QR, I proposed they’d land on a web page where they could see the benefits, register directly, and collect points, all without download anything.

Hangry App installed? No
Redirect to Loyalty landing page
Scan purchase bill with phone camera
Already login/register? Yes/No
Point collected point auto collected & accumulate
Landing page User discover loyalty landing page
Yes No
New user flow — Journey to collect point without Hangry App

The page was mobile-only by design. The entry point was a QR scan on a purchase bill, users were always on their phone.

I designed base on AIDA concept (Attention, Interest, Desire, Action). I came into design from copywriting. This section is where that background shows.

I wrote all the copy by myself. The hook was the most important line on the page.

“Makin untung, makin mudah! Kini tanpa download aplikasi kamu sudah bisa menikmati keuntungan Hangry Poin.”

The landing page also had a dedicated section for the Hangry App, framed as:

“Mau cashback lebih? Belanja pakai aplikasi Hangry.”

This wasn’t upsell for the sake of it, It was the “collect anywhere-redeem in app” decision showing up in copy form.

  1. Step 1 of 4 Getting Attention Hook sentence, directly solving the problem based on user research
  2. Step 2 of 4 Building Interest Explain the facts about the loyalty program benefits
  3. Step 3 of 4 Getting Desire Show how easy it is to earn points and tease the app’s extra benefits
  4. Step 4 of 4 Do Action Offer users to join the loyalty program, reinforcing every benefit shown above
The loyalty landing page, top to bottom

Final UI — loyalty landing page — scroll the phone to explore

The Impact

The program that was losing users month-over-month reversed course, not because the product changed, but because the barrier to entry was removed.

New User Registration (February – July) Landing page launched in May 2021
4,491 Feb
4,217 Mar
2,916 Apr
3,186 May
7,144 Jun
10,146 Jul
Before launch After launch
Before vs After (3 months) Total new registrations comparison
11,624 Before
20,476 After

Growth +76%