MOBILE APP · B2B · 0→1 · GAMIFICATION
ROLE
Associate Manager, UI/UX Designer
MY CONTRIBUTIONS
Design Strategy, Competitor Analysis, User Flow, Lo-Fi, Hi-Fi, Prototyping, Testing, Iteration
TIMELINE
5 Months
TEAM
PM, CTO, CEO, CSO, Engineers
OVERVIEW
Raena is the largest beauty product reseller platform in Indonesia to support 300,000+ beauty entrepreneurs to start and grow their businesses. Raena cooperated with over 250 brands of local and international beauty products.
Raena’s vision is to be a growth partner, but the resellers only treat Raena to restock their inventory and leave when they find a cheaper supplier. This behavior makes Raena easy to replace by its competitors.
My role was to continue the research findings by the team on the reason why resellers only treated Raena as their supplier and designed an end-to-end gamification system to motivate resellers and give them reason to stay loyal to achieve Raena’s vision.
RESULT · AT A GLANCE
Raena's resellers had access to the feature.
Gamification system ever built on the platform.
“I like this feature, it makes me stay motivated.”
01 — SITUATION
I was hired to join the Product Team to continue existing research interview findings conducted by an Account Manager from the Sales Team in Indonesia. This user interview was requested by the PM before I joined the company.
The Product Team: CTO, PM, and Engineers were located in Abu Dhabi, UAE and I was the only Product Team member located in Jakarta, Indonesia. The language barrier and cultural differences made the company realize that they needed a native Indonesian Product Designer to be a part of the Product Team, so that the team could get a better understanding of the resellers’ cultural behavior.
THE LEARNING — USER INTERVIEW FINDINGS
I learned that resellers did not see Raena as a growth partner because there was no visible milestone and it made them feel that they did not have sense of progress in their businesses.
02 — TASK
The insights from user interview findings were that resellers did not need more products, they needed visible milestones so that they have a sense of progress.
Design a gamification system that makes growth visible — so resellers feel proud of their achievements and motivated to keep building with Raena.
03 — RESEARCH
I researched 5+ Raena competitors by downloading their apps and actually participating in their gamification challenges myself. I wanted to feel the experience, not just observe it.
That insight shaped my design direction. Instead of a flat cycle, I designed a motivation loop: something that kept pulling resellers back not because of a single reward, but because they could see their own progress and feel a growing sense of achievement.
I researched gamification key elements on Google, then connected what I found to my own experience as a mobile gamer. The components that kept me engaged weren’t the rewards themselves. It was the visibility of progress: watching a bar fill, climbing a leaderboard, earning a badge that stuck. I mapped that same logic onto the reseller experience:
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.
04 — LOW FIDELITY
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
V2 Lo-Fi — Participating Brand Page combined into Challenge Detail Page
V2 Lo-Fi — Reward repositioned higher, visible without scrolling
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.
05 — LEADERSHIP ALIGNMENT
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.
06 — HIGH-FIDELITY
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.
07 — ITERATION
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:
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.
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.
08 — USER TESTING
USER TESTING · AT A GLANCE
Participants completed user testing.
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.
09 — FINAL DESIGN
10 — POST-LAUNCH
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.
11 — RESULT
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.
12 — REFLECTION
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.
THE LEARNING
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