UI / UX Design
Gamification module
Designed a complete gamification ecosystem embedded within an existing points or cashback app to drive shopping mall customer engagement. The project covered everything from benchmarking and strategy to the final mobile app and admin panel experience, including missions, leaderboards, rewards, loyalty tiers, and a no-code management interface for campaign configuration and rule administration.
Year :
2025
Industry :
Tech
Client :
Alloyal
Project Duration :
3 Months
THE CHALENGE
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.
How the work was structured
.1
Benchmark
.2
Scope Definition
.3
Information Architecture
.4
Screen Flows
.5
Prototyping
.6
Handoff
Phase 01 · Benchmark
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
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 into a single, cohesive experience, revealing a clear opportunity for differentiation.
Phase 02 · Scope Definition
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.
Admin
• 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.
APP
• 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.
Phase 03 · Information Architecture
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.
Phase 04 · Screens & User Flows
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 admin panel. The process covered every possible state, including success, empty, loading, validation, and error scenarios, to ensure a predictable and reliable experience.
Each screen was designed with special attention to edge cases and system behavior, helping reduce ambiguity, prevent user errors, and create a seamless experience regardless of the situation. This level of detail was particularly important given the configurable nature of the gamification ecosystem, where changes made in the admin panel could directly impact the customer experience.
Invoice Scanner
The invoice scanner was one of the most critical journeys in the product. Users could register purchases by scanning receipts through QR Code or OCR powered by Tesseract.js. The system then queried the Minas Gerais State Tax Authority (SEFAZ), validated the retailer’s tax ID (CNPJ), and automatically applied any active campaign multipliers. Every possible outcome—including processing, successful validation, unregistered retailers, and duplicate invoices—was carefully mapped and supported by dedicated UI states to provide clear feedback and reduce user uncertainty.
Missions with Granular Progress Tracking
Each mission included a dedicated detail view displaying progress indicators, completion status, and a history of qualifying actions. Rather than relying on generic empty states, missions without activity presented contextual guidance to help users understand how to begin progressing and earning rewards.
App
Admin
Time-Based Leaderboards
The leaderboard experience was designed around three distinct phases: forming (fewer than three participants), active (competition in progress), and completed (winners defined). To keep users motivated regardless of their ranking, participants outside the top 10 could still see their position highlighted in a persistent card displayed at the bottom of the leaderboard.
App
Admin
Campaign Management Flow
Retailers could create promotional campaigns through a guided setup flow that included investment and projected revenue calculators. Campaigns then moved through an admin approval process supported by a complete audit trail, tracking creation, approval, rejection, and cancellation events. Once active, campaign performance could be monitored in real time through metrics such as distributed points, participating invoices, and overall engagement.
App
Admin
Phase 05 · Design Decisions
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. Each choice was driven by research insights, business goals, and the need to balance engagement mechanics with operational simplicity.
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.”
results
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.
2
2
Mapped Platforms
0
0
App Sections
0
0
Admin Modules
0
0
Loyalty Tiers
0
0
Products Benchmarked
0+
0+
Screens and States Designed
Technologies Defined in Scope
React Native
qr-scanner 1.4.2
Multi-tenant admin
qr-scanner 1.4.2
API SEFAZ MG
44-Digit OCR Extraction
Insights
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 (Not Executed):
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
More Projects
UI / UX Design
Gamification module
Designed a complete gamification ecosystem embedded within an existing points or cashback app to drive shopping mall customer engagement. The project covered everything from benchmarking and strategy to the final mobile app and admin panel experience, including missions, leaderboards, rewards, loyalty tiers, and a no-code management interface for campaign configuration and rule administration.
Year :
2025
Industry :
Tech
Client :
Alloyal
Project Duration :
3 Months
THE CHALENGE
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.
How the work was structured
.1
Benchmark
.2
Scope Definition
.3
Information Architecture
.4
Screen Flows
.5
Prototyping
.6
Handoff
Phase 01 · Benchmark
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
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 into a single, cohesive experience, revealing a clear opportunity for differentiation.
Phase 02 · Scope Definition
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.
Admin
• 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.
APP
• 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.
Phase 03 · Information Architecture
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.
Phase 04 · Screens & User Flows
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 admin panel. The process covered every possible state, including success, empty, loading, validation, and error scenarios, to ensure a predictable and reliable experience.
Each screen was designed with special attention to edge cases and system behavior, helping reduce ambiguity, prevent user errors, and create a seamless experience regardless of the situation. This level of detail was particularly important given the configurable nature of the gamification ecosystem, where changes made in the admin panel could directly impact the customer experience.
Invoice Scanner
The invoice scanner was one of the most critical journeys in the product. Users could register purchases by scanning receipts through QR Code or OCR powered by Tesseract.js. The system then queried the Minas Gerais State Tax Authority (SEFAZ), validated the retailer’s tax ID (CNPJ), and automatically applied any active campaign multipliers. Every possible outcome—including processing, successful validation, unregistered retailers, and duplicate invoices—was carefully mapped and supported by dedicated UI states to provide clear feedback and reduce user uncertainty.
Missions with Granular Progress Tracking
Each mission included a dedicated detail view displaying progress indicators, completion status, and a history of qualifying actions. Rather than relying on generic empty states, missions without activity presented contextual guidance to help users understand how to begin progressing and earning rewards.
App
Admin
Time-Based Leaderboards
The leaderboard experience was designed around three distinct phases: forming (fewer than three participants), active (competition in progress), and completed (winners defined). To keep users motivated regardless of their ranking, participants outside the top 10 could still see their position highlighted in a persistent card displayed at the bottom of the leaderboard.
App
Admin
Campaign Management Flow
Retailers could create promotional campaigns through a guided setup flow that included investment and projected revenue calculators. Campaigns then moved through an admin approval process supported by a complete audit trail, tracking creation, approval, rejection, and cancellation events. Once active, campaign performance could be monitored in real time through metrics such as distributed points, participating invoices, and overall engagement.
App
Admin
Phase 05 · Design Decisions
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. Each choice was driven by research insights, business goals, and the need to balance engagement mechanics with operational simplicity.
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.”
results
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.
2
2
Mapped Platforms
0
0
App Sections
0
0
Admin Modules
0
0
Loyalty Tiers
0
0
Products Benchmarked
0+
0+
Screens and States Designed
Technologies Defined in Scope
React Native
qr-scanner 1.4.2
Multi-tenant admin
qr-scanner 1.4.2
API SEFAZ MG
44-Digit OCR Extraction
Insights
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 (Not Executed):
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
More Projects
UI / UX Design
Gamification module
Designed a complete gamification ecosystem embedded within an existing points or cashback app to drive shopping mall customer engagement. The project covered everything from benchmarking and strategy to the final mobile app and admin panel experience, including missions, leaderboards, rewards, loyalty tiers, and a no-code management interface for campaign configuration and rule administration.
Year :
2025
Industry :
Tech
Client :
Alloyal
Project Duration :
3 Months
THE CHALENGE
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.
How the work was structured
.1
Benchmark
.2
Scope Definition
.3
Information Architecture
.4
Screen Flows
.5
Prototyping
.6
Handoff
Phase 01 · Benchmark
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
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 into a single, cohesive experience, revealing a clear opportunity for differentiation.
Phase 02 · Scope Definition
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.
Admin
• 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.
APP
• 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.
Phase 03 · Information Architecture
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.
Phase 04 · Screens & User Flows
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 admin panel. The process covered every possible state, including success, empty, loading, validation, and error scenarios, to ensure a predictable and reliable experience.
Each screen was designed with special attention to edge cases and system behavior, helping reduce ambiguity, prevent user errors, and create a seamless experience regardless of the situation. This level of detail was particularly important given the configurable nature of the gamification ecosystem, where changes made in the admin panel could directly impact the customer experience.
Invoice Scanner
The invoice scanner was one of the most critical journeys in the product. Users could register purchases by scanning receipts through QR Code or OCR powered by Tesseract.js. The system then queried the Minas Gerais State Tax Authority (SEFAZ), validated the retailer’s tax ID (CNPJ), and automatically applied any active campaign multipliers. Every possible outcome—including processing, successful validation, unregistered retailers, and duplicate invoices—was carefully mapped and supported by dedicated UI states to provide clear feedback and reduce user uncertainty.
Missions with Granular Progress Tracking
Each mission included a dedicated detail view displaying progress indicators, completion status, and a history of qualifying actions. Rather than relying on generic empty states, missions without activity presented contextual guidance to help users understand how to begin progressing and earning rewards.
App
Admin
Time-Based Leaderboards
The leaderboard experience was designed around three distinct phases: forming (fewer than three participants), active (competition in progress), and completed (winners defined). To keep users motivated regardless of their ranking, participants outside the top 10 could still see their position highlighted in a persistent card displayed at the bottom of the leaderboard.
App
Admin
Campaign Management Flow
Retailers could create promotional campaigns through a guided setup flow that included investment and projected revenue calculators. Campaigns then moved through an admin approval process supported by a complete audit trail, tracking creation, approval, rejection, and cancellation events. Once active, campaign performance could be monitored in real time through metrics such as distributed points, participating invoices, and overall engagement.
App
Admin
Phase 05 · Design Decisions
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. Each choice was driven by research insights, business goals, and the need to balance engagement mechanics with operational simplicity.
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.”
results
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.
2
2
Mapped Platforms
0
0
App Sections
0
0
Admin Modules
0
0
Loyalty Tiers
0
0
Products Benchmarked
0+
0+
Screens and States Designed
Technologies Defined in Scope
React Native
qr-scanner 1.4.2
Multi-tenant admin
qr-scanner 1.4.2
API SEFAZ MG
44-Digit OCR Extraction
Insights
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 (Not Executed):
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.