UI/UX Design
Gamification Module
Designed a complete gamification ecosystem embedded within an existing points or cashback app to drive shopping mall customer engagement and repeat purchases, spanning the customer-facing mobile experience and the no-code admin panel that lets administrators and retailers run it on their own.
The Challenge
The shopping mall needed to increase customer engagement within its existing app and encourage repeat purchasing behavior across its stores. The proposed solution was a gamification system, but with a critical requirement: administrators and retailers needed to be able to configure campaigns, missions, rewards, and point rules independently, without relying on the development team for every update or adjustment.
Core Problem
Low customer return rates after their first visit to the shopping mall. Although the app already existed, it did not provide enough value or incentives for users to open it regularly and remain engaged over time.
Project Goal
Create habit-forming customer engagement through missions, rewards, and leaderboards, all managed through a no-code admin interface that allows administrators and retailers to configure and launch experiences independently.
How the work was structured
Exploring industry trends, competitor solutions, and gamification patterns that informed the design direction.
Defining the product objectives, user needs, business requirements, and project scope.
Presenting the organization of features, information hierarchy, and navigation across the experience.
Walking through the main user flows, interactions, and decision points within the product.
Showcasing interactive prototypes, usability considerations, and design refinements.
Covering design specifications, reusable components, documentation, and implementation support.
Understanding the Loyalty Market
Before designing any screens, I analyzed the leading loyalty and gamification programs in the market to identify common patterns, differentiators, and opportunity gaps. The research covered 16 products and focused on five key dimensions: user engagement, reward mechanics, progression systems, mission structures, and overall user experience.
Programs Analyzed in the Benchmark
| Level progression | Missions | Points | Benefits | |
|---|---|---|---|---|
 Loop Inter | ||||
 Clube iFood | ||||
 Pontos Azul | ||||
 Playstation Stars | ||||
 My Nintendo | ||||
 Meli+ | ||||
 Microsoft Rewards | ||||
 Duolingo | ||||
 Shopee |
KEY INSIGHT:
The most engaging programs consistently combine three core mechanics: tier-based progression, recurring missions, and time-based leaderboards. While these elements were common individually, very few competitors connected them in a single, cohesive experience, revealing a clear opportunity for differentiation.
Defining What to Build
Using the benchmark findings as a foundation, I collaborated closely with the product team to define the scope for both sides of the ecosystem: the customer-facing mobile app and the admin panel. We used a Product Backlog Building (PBB) workshop to prioritize features, align stakeholder expectations, and establish a shared vision for the gamification experience before moving into solution design.
- Multi-Tenant Management by Client/Shopping Mall.
- Configuration of Tiers, Points, and Benefits.
- Creation of Custom Missions (Checkpoints).
- Leaderboard and Seasonality Configuration.
- Campaign Management with Retailer-to-Customer Flow.
- Banner Management with Campaign Assignment.
- Executive, Engagement, and User Profile Dashboards.
- Pending Benefits Approval.
- CPF Authentication, Registration, and Password Login.
- Customizable Tier System (Bronze → Diamond).
- Daily, Weekly, Monthly, and Special Missions.
- Time-Based Leaderboards with Podium Rewards.
- Invoice Scanner (QR and OCR).
- Points History with Expiration Alerts.
- Achievements with Tier Progression.
- Offers and Stores Section with Point Multipliers.
DESIGN DECISION:
The discovery phase made it clear that the admin experience required the same level of attention as the customer-facing app. A poorly designed, configurable gamification system simply shifts complexity to administrators and retailers, increasing operational errors that ultimately impact the end-user experience. This insight strongly influenced the UX strategy for the admin panel, prioritizing clarity, guided configuration flows, and error prevention from the outset.
Two Journeys, One Consistent Logic
The information architecture was designed in parallel for both the mobile app and the admin panel, ensuring that every entity configured by administrators, such as loyalty tiers, missions, campaigns, and leaderboards, had a direct and transparent representation in the user experience. This approach created a consistent ecosystem where operational decisions made in the admin interface were clearly reflected in the customer journey, reducing complexity, improving predictability, and making the system easier to manage and understand from both perspectives.
Loyalty Tiers
Admin configure point ranges and benefits for each tier. The app displays a progress bar, current benefits, and tier comparisons.
Missions
Admin create missions using hardcoded criteria or custom checkpoints. The app organizes them by category and displays real-time progress.
Leaderboards
Admin configure periods and rewards by position. The app displays the podium, the full ranking list, and the user’s position highlighted below the top 10.
Campaigns
Retailers create campaigns with multipliers. Admins approve them. The app reflects them in the Hot Points and Active Campaigns sections.
Designing Every Journey in Detail
With the information architecture validated, I mapped the complete user flows for each feature across both the mobile app and the admin panel. Each flow was designed screen by screen, covering the main paths, edge cases, and states required for implementation.
Invoice Scanner
The invoice scanner was one of the most critical journeys in the product. Users could register purchases by scanning receipt QR codes or photographing invoices processed by OCR, validating purchases made inside the mall and converting them into points.
Missions with Granular Progress Tracking
Each mission included a dedicated detail view displaying progress indicators, completion status, and a history of qualifying actions.
App
Admin
Time-Based Leaderboards
The leaderboard experience was designed around three distinct phases: forming (fewer than three participants), active (competition running), and closed (results and rewards). The interface adapts to each phase, keeping expectations clear for participants.
App
Admin
Campaign Management Flow
Retailers could create promotional campaigns through a guided setup flow that included investment and projected revenue simulation, followed by admin approval before going live.
App
Admin
Key Choices That Shaped the Product
Beyond features and screens, the success of the gamification ecosystem depended on a series of strategic design decisions. Throughout the project, every interaction was evaluated not only from the user’s perspective but also through the lens of operational efficiency, scalability, and long-term maintainability. The following decisions helped transform a complex loyalty and engagement platform into an experience that was intuitive for customers, manageable for retailers, and sustainable for administrators.
Progress Visibility
Every mission, tier, and leaderboard displays quantified progress (8/10, $350/$500) — never just a progress bar without numerical context.
No-Code Configuration
Every gamification parameter (points, missions, tiers, seasonality) can be adjusted by admins without deployments. Hardcoded criteria are used only where complex business logic is required.
Expiration as a Sense of Urgency
The points history proactively notifies users about points that are about to expire and recently expired points, with a CTA to scan new receipts.
The greatest challenge was ensuring that the admin panel never felt like a technical tool. Every configuration was designed using business-oriented language rather than system terminology, retailers see “point multiplier,” not “entity conversion factor.”
What Was Delivered
The project resulted in a consistent design system across both the mobile app and the admin panel, with complete coverage of states and user flows for handoff to the development team.
Loyalty platforms analyzed to identify opportunities, interaction patterns, and business rules that informed the product strategy.
Core areas designed covering the complete user journey, including missions, achievements, rankings, rewards, and profile management.
Management modules created, enabling no-code configuration of campaigns, rewards, missions, rankings, and user progression.
Level progression system structured with exclusive benefits, milestones, and reward mechanics to encourage long-term engagement.
Loyalty and gamification products reviewed to evaluate engagement mechanics, progression models, and reward systems.
Responsive screens and interface states, covering the mobile experience and the complete administrative platform.
What I Learned
Well-designed gamification is not about adding points to an existing flow. It is about creating genuine reasons for users to want to open the app tomorrow. This project taught me to think about short, medium, and long-term engagement loops simultaneously, daily missions feed the weekly leaderboard, which in turn drives tier progression. Each mechanic needs to reinforce the others.
On the admin side, I learned that configuration interfaces are products in their own right. The quality of the admin design directly impacts the quality of the experience delivered to the end user, and this indirect cost is rarely visible on the roadmap.
NEXT STEPS:
Usability testing with real shopping mall customers to validate mission adoption, and post-launch quantitative analysis to adjust point thresholds for each tier based on real purchasing behavior.
More projects
View all
UI / UX Design
Charles C.D.
Charles is a continuous deployment tool that speeds up the feedback cycle of your application through simultaneous validation with specific user groups.
Design System
Citric Design System
Citric is a design system that helps create clean, consistent, and scalable interfaces. It unifies styles, components, and rules, making the design process faster.