MOBILE APP · B2B · 0→1 · GAMIFICATION
Designed Gamification for Indonesia’s Largest Beauty E‑Commerce Platform
ROLE
Associate Manager, UI/UX Designer
TIMELINE TEAM
6 Months, June 2023 - December 2023
TEAM
PM, CTO, CEO, CSO, Engineers
MY CONTRIBUTIONS
Design Strategy, Competitor Analysis, User Flow, Lo-Fi, Hi-Fi, Prototyping, Testing, Iteration
The Problem
Raena was a beauty-focused e-commerce platform offering skincare, body care, hair care, and makeup products. It connected brands with small-scale resellers and dropshippers, many of whom were based in smaller Indonesian cities with less reliable digital infrastructure and connectivity than major metropolitan areas.
Most resellers operated through a hybrid business model. They primarily sold products through social media and messaging apps, while some also ran informal home-based or neighborhood storefronts alongside their online businesses.
Raena’s vision was to become a long-term growth partner for beauty entrepreneurs. However, resellers largely treated the platform as a transactional restocking channel and often switched suppliers as soon as they found a lower price. Without loyalty or retention mechanisms, Raena had little to reinforce its value as an ongoing business partner.
The platform grew rapidly, from approximately 1,500 resellers in mid-2021 to more than 300,000 at its peak less than a year later, representing nearly 200 times growth. However, this hypergrowth outpaced Raena’s ability to retain the resellers it acquired. With little differentiation beyond price, its large and fast-growing user base could disappear just as quickly as it had been built.
The Task
Translate a company's vision, becoming a growth partner, into a reason for resellers to build their business with Raena, not just restock from it. There was no existing loyalty framework and no design precedent internally. I picked up the research my PM had started and worked through the account managers who talk to resellers daily. From there I defined what progress should mean to a reseller, and designed the system around it.
The Solution
Designed an end-to-end gamification system that makes growth visible, to make resellers feel proud of their achievements and motivated to keep building with Raena.
RESULT · AT A GLANCE
60 → 63%
Increased retention from 60% to 63% among small-scale resellers based in smaller Indonesian cities.
300K+
Raena's resellers had access to the feature.
1st
Gamification system ever built on the platform.
Feedback
“I like this feature, it makes me stay motivated.”
FINAL DESIGN
01 — RESEARCH
An e-commerce platform that let anyone start a beauty business with zero capital in Indonesia
To understand why reseller retention was declining, the Product Manager asked Account Managers, who interacted with resellers daily, to investigate the issue. Because the broader product team was based in Abu Dhabi and did not have direct knowledge of the Indonesian market, I was brought in as the team’s Indonesian product designer to help interpret the findings and translate them into product opportunities.
USER INTERVIEW FINDING
Without visible milestones to show their progress, they felt little sense of achievement or business growth from continuing to use the platform.
The research showed that resellers lacked a clear sense of progress while using Raena. This led us to explore whether visible goals, milestones, and rewards could make their growth feel more tangible and give them a reason to stay engaged. Gamification emerged as a potential way to bring those elements together.
EXPLORED
5+
Competitor apps
CONVERGED INTO
3
Design principles
SYNTHESIZED INTO
4
Behavior patterns
I analyzed gamification across five Indonesian commerce and service platforms, combining direct market references with analogous products known for loyalty and engagement mechanics.
5+
Competitor apps explored
Challenges and leaderboard to create motivation and social drive
Progress bars and points to make growth visible in real time
Badges and rewards to build a sense of achievement that compounds
THE PRINCIPLE
The goal was never to make shopping feel like a game. The goal was to make growth feel visible and motivating, because that’s what the research said resellers were missing.
WHAT I EVALUATED
Progress
62% complete
Milestones
2 reached
Rewards
+120 pts
Voucher
Incentive cue
Challenges
2 of 5
Tasks completed
03 — LOW FIDELITY
I mapped the first journey resulting in strategy alignment
I designed the first user flow by using flow charts so that I can have blueprints as a part of my strategy before designing.
V1 Lo-Fi: 6-screen flow: Challenge Discovery → Challenge Detail → Participating Brands → Brand Page → Product Detail → Checkout
I set up a meeting with the PM through Google Meet to discuss and review the Lo-Fi screens I designed. During the meeting, I shared the prototype with a link from Figma and I asked him to interact with it by speaking out loud. The PM shared his screen and I was observing his first interaction experience.
He tested the Lo-Fi prototype from challenge discovery to checkout. His feedback were:
The flow was too long.
The reward lived too low on the screen.
When the PM said the flow was too long, I realized every tap is a chance to drop off and learned why the excitement could fade. So, I iterated the flow.
V2 Lo-Fi: 5-screen flow: Challenge Discovery → Challenge Detail → Brand Page → Product Detail → Checkout
I simplified the flow by removing the stand-alone “Participating Brand Page” and combined it within the Challenge Detail Page. In V1, resellers had to scroll all the way down to see the reward. So in V2 I moved it higher. In V2 ‘what do I get?’ is answered the moment they land on the screen. Three days later, I ran another review with the PM. He tested V2 and signed off on the changes. That gave me the green light to present the strategy to leadership.
V2 Lo-Fi: Participating Brand Page combined into Challenge Detail Page
V2 Lo-Fi: Reward repositioned higher, visible without scrolling
I initiated a cross-functional strategy meeting, CEO, CSO, PM, CTO, all on a Google Calendar invite. With the team split across time zones, we met over video call: the CEO, CSO, and I from Jakarta, the PM and CTO from Abu Dhabi.
I presented the competitor analysis that shaped my direction on how existing platforms relied on flat reward cycles that ended the moment a reward was claimed, and why that wouldn’t give resellers the ongoing sense of progress they were missing. Then I walked stakeholders through the early Lo-Fi screens, showing how those findings translated into design decisions, and opened the floor for feedback before moving into visual design.
The gamification system had already been assigned to me by my PM. This meeting was about alignment, not proposal. The CEO confirmed it supported Raena’s broader business goals, while the CSO used the framework to think through challenge mechanics, rewards, and sales logic. With everyone aligned, I got the green light to move into Hi-Fi design.
04 — HIGH-FIDELITY
A departure from Raena’s palette, on purpose
The research had already told me Challenges needed to feel like more than shopping because resellers weren’t missing products, they were missing a sense of progress and status. That much was settled. What I still had to figure out was how far to take it. Two directions emerged, each arguing a different degree of departure from Raena’s existing visual world.
The two visual directions presented to the CEO: black/pink (familiar) vs. purple (departure)
The first direction stayed close to Raena’s existing brand, black, pink, familiar. I pushed it harder: bold black, diagonal striping on the challenge cards, signaling a different mode without breaking from the shopping experience. The logic was that staying in the brand family would reduce friction for resellers who already knew the app.
The second direction was purple, a full departure from Raena’s palette. I chose it because it carried a premium, achievement-oriented feeling that nothing in Raena’s existing language communicated. Where black and pink asked resellers to feel familiar, purple asked them to feel like they’d earned access to something different.
My instinct said purple. Shopping was transactional, product after product, deal after deal. Resellers didn’t need more of that; they needed something that felt like progress, achievement, status. Anything that looked like the rest of the app would undercut that message before a single tap. Challenges needed to feel like its own world.
I presented both directions to the CEO over Google Meet. She chose purple. It validated that the stronger departure was the right call. With purple validated.
05 — ITERATION
Two pieces of feedback that changed how progress felt
Once I completed the Hi-Fi design, I presented the full experience to the whole team: CEO, CSO, CTO, and Engineers. The CTO flagged two problems:
"The targets feel uncompelling, they're just text: Purchase 10 million IDR worth of items to reach the next level."
"The challenge itself felt static and passive. I did not know what was the reason for me to purchase it right now."
I addressed each problem separately:
Before and After: text-only targets replaced with mountains showing progress and rewards
For the targets, I set up a brainstorm with the CTO. The question wasn’t visual, it was the same one the whole project had been asking: what makes a reseller feel motivated to keep going? We explored ladders, progress bars, level indicators.
We landed on mountains: small, medium, large, each one a visible marker of how far they’d climbed. The specific reward sat directly beneath each mountain, so ‘what do I get if I reach this?’ was answered without extra navigation.
THE LEARNING
Sometimes the best solutions come from thinking out loud with a stakeholder, not presenting a finished answer.
Before and After: countdown timer added to challenge cards to create urgency
The urgency problem came from a different place entirely. Outside work, I play mobile games and I asked myself what makes me act now instead of later. The answer was always the timer. Not because it adds information, but because it makes ignoring something feel like a loss. A reseller who’d scroll past a challenge twice will stop when they see a countdown running. Urgency isn’t about pressure, it’s about making inaction feel costly.
The CTO approved both directions. From there, I set up a full stakeholder meeting with the CEO, CSO, CTO, and Engineers to walk through the complete flow and functionality. The meeting served two purposes: giving leadership a clear picture of the final experience, and giving the Engineering team a chance to raise any feasibility concerns before building. No blockers surfaced. I handed the design to the Engineering team to move into development.
06 — USER TESTING
Validating the experience before it went live
USER TESTING · AT A GLANCE
12
Participants completed user testing.
100%
Navigated the flow without guidance.
Before the official launch, I built a clickable prototype in Marvel, uploaded my Figma screens, and shared the link in the company’s general Slack channel for internal testing. Marvel’s heatmap feature let me see exactly where participants clicked throughout the journey, giving me behavioral data rather than just self-reported feedback.
12 participants completed the test. The heatmap showed clean navigation across the board: challenge discovery, participation, and the reward claim flow were all navigated correctly without guidance and no critical confusion points surfaced.
That result gave me and the team the confidence to move forward to launch. The sample was small and participants were internal, not real resellers, so I knew it was not a perfect test. But the core navigation logic held up, and that was what we needed to know at that stage.
07 — FINAL DESIGN
Final design, before launch
08 — POST-LAUNCH ITERATION
When launch revealed what the design missed
The launch went well, resellers were actively participating in challenges. Then the shipping team messaged me on Slack. They shared an Excel file showing the addresses resellers had submitted through the reward claim form. One entry read:
“Bali Street 2, then you go straight to the big tree, then turn left after the yellow house.”
The shipping team could not process deliveries like that. The reward flow I designed accepted any free text, which made sense from a flexibility standpoint but created an operational breakdown the moment real resellers used it.
I sat down with the shipping team first to understand what they actually needed to process a delivery reliably. Then I brought that to the CTO, who’d been supervising me directly since the PM resigned after Hi-Fi.
Together we redesigned the form: name, street address, and phone number pulled directly from the reseller’s saved profile, pre-filled so there was nothing to mistype. For location, I replaced the open text field with a structured picker: province, city, district, sub-district, all from a standardized list. Every field stayed editable, so resellers who’d moved still had full flexibility.
That structure gave the shipping team consistent, standardized data they needed to process deliveries, while still giving resellers the control they expected.
Before and After: address form redesign, an open text field replaced with a structured province/city/district/sub-district picker.
09 — RESULT
Resellers felt they were moving forward
RESULT · AT A GLANCE
60 → 63%
Increased retention for small resellers,
300K+
Raena's resellers had access to the feature.
1st
Gamification system ever built on the platform.
Feedback
“I like this feature, it makes me stay motivated.”
Following launch, Month 1 retention for 9K+ small resellers increased from 60% to 63%. A measurable improvement through product design alone with no human touchpoint and it was a meaningful result.
Resellers said: “I like this feature, it makes me stay motivated.” That quote mattered because it reflected the original insight. This was never about points, levels, or rewards. It was about helping resellers feel like their effort was actually making progress for their businesses.
10 — REFLECTION
Design doesn’t end when the interface ships
This project taught me that end-to-end design does not stop at the edge of the screen. Two moments made that clear.
The first was the reward claim form. I designed the entire experience without once asking the shipping team how they process deliveries. The gap never showed up in a review or alignment meeting. It showed up after launch, in an Excel file full of addresses like ‘turn left after the yellow house.’ The lesson wasn’t about testing coverage. It was about scope. I’d been thinking about the user journey without thinking about the operational journey that had to support it. Every team that touches the product after it ships is part of the design process too.
The second was how I set up that CEO meeting during Hi-Fi. My instinct was to go straight to the decision maker and that’s how things worked at the agency I came from. And the outcome was good: the CEO chose purple, validating the direction. But I’d bypassed my PM to get there. He raised it with me in a 1:1 and walked me through how alignment actually works in a product org. The decision was right. The process wasn’t. From then on, I aligned with my PM before moving anything forward and when he resigned and the CTO took over, I carried that habit forward.
Both moments pointed to the same blind spot: I was focused on the product, not the system around it. The design itself was right. What I missed was the people and operations.
GOING FORWARD
Before I finalize a design, I map out every team that touches the product after it ships.
NEXT PROJECT