The UX behind a 76% growth in new loyalty user registrations
- 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
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.
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.
- Step 1 of 4 Getting Attention Hook sentence, directly solving the problem based on user research
- Step 2 of 4 Building Interest Explain the facts about the loyalty program benefits
- Step 3 of 4 Getting Desire Show how easy it is to earn points and tease the app’s extra benefits
- Step 4 of 4 Do Action Offer users to join the loyalty program, reinforcing every benefit shown above
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.
Growth +76%