Leaploot | aitorarina

2026

App | SaaS | Web

Leaploot

Behavior-driven earning platform redesigned to increase activation, retention, and user trust through structured progression and friction reduction.

Stack

Type: Consumer SaaS · Reward-based Platform · Growth Product
Role: Senior Product Designer (UX/UI)
Scope: Activation · Retention · Monetization · Progressive Disclosure · UX Architecture · Conversion Funnel Optimization

01. Snapshot

Quick project overview, scope, role, and overall context

Intro

LeapLoot is a mobile-first earning platform where users complete game-based tasks to earn real money.

The product had strong acquisition but weak behavioral performance:

Low activation and retention
High confusion and support volume

The redesign focused on transforming LeapLoot into a structured earning loop optimized for clarity, motivation, and progression.

My Role

In this project, I was responsible for the whole design process and:

Design of a scalable behavioral UX architecture for a reward-based earning platform.
Redesign of core earning, offer detail, and cashout flows to increase activation and retention.
Implementation of progressive disclosure to reduce cognitive load in high-density mobile screens.
Creation of a modular component system to support rapid iteration without a formal design system.
Direct collaboration with Frontend (Vue + Tailwind) to ensure accurate implementation and state consistency.

02. Context

Understand the project context, its constraints, and the goals to be achieved

Before the redesign, the product faced strong acquisition but poor behavioral performance.

Key issues included:

High user acquisition but low activation and retention performance.
Complex reward logic with unclear payout perception.
Overloaded mobile interfaces on small screens (350–380px).
Cashout confusion generating recurring support tickets.
Rapid product iteration without a formal design system.
Frequent design–development inconsistencies due to limited engineering bandwidth.

The approach focused on restructuring the earning logic and user progression model before addressing visual design.

03. Challenge / Solutions

Key issues identified and the design decisions made to address them

Challenge

- Low reward comprehension due to complex coin-based systems.
- Overloaded mobile interfaces with high information density.
- Offer detail screens presenting too much information at once.
- Confusing cashout logic with unclear eligibility.
- Lack of motivation and clarity in the referral system.
- Inconsistent UI due to rapid iteration without a system.

Solution

- Behavior-driven earning loop (Choose → Complete → Earn → Cash out → Repeat).
- Conversion of rewards from coins to dollar values.
- Progressive disclosure separating rewards, tasks, and progression.
- Clear and motivational referral system with visible progress.
- Modular component system for consistency and scalability.
- Alignment between acquisition messaging and in-app experience.

04. Core Experience Design

How the product is structured, navigated, and experienced from the user’s perspective

Information Arquitecture

The experience is structured around a closed earning loop guiding users through clear progression:

Earn → Activity → Cashout → Referrals → Settings.

This ensures clarity, scalability, and continuous engagement.

Navigation & Discovery

Navigation was simplified to prioritize earning actions and reduce friction between discovery and execution.

Content categorization (Featured, Hot, New, Boost, Fast) improves scanability and accelerates decision-making on small screens.

Filtering and sorting patterns were unified to maintain consistency across content types and prevent navigation ambiguity.

Interaction Patterns

Consistent component behavior was introduced across dropdowns, toggles, selectors, and state-based elements.

Clear system states (Running, Paid, Expired, Canceled) reduce ambiguity in task progression.

Disabled states and eligibility messaging were standardized to reinforce clarity in reward and cashout flows.

Offer & Progression Experience

Offer details were modularized using progressive disclosure to prevent cognitive overload.

Reward logic, recurrent tasks, questlines, and step requirements were separated into structured layers.

Persistent continuation CTAs reinforce forward momentum within the earning loop.

The experience was optimized for ultra-small mobile screens while preserving clarity and hierarchy.

05. Visual

Quick project overview, scope, role, and overall context

Visual Identity

A minimal visual system focused on clarity and contrast, allowing content and structure to drive the experience.

Color system designed to reinforce clarity and trust in reward-based interactions, using contrast to highlight key actions and states.

DG #34FF66

DY #FFF176

D1 #465667

D2 #293645

D3 #1E2833

D4 #11161D

D5 #020914

Components

Core product components designed to support navigation, readability, and interaction across long-form case studies

1 / 7

Filtering & Discovery

Organizes a large volume of opportunities into a structured discovery system, enabling efficient navigation across multiple content types.

2 / 7

Expandable card showing real-time progress, rewards, and task breakdown within active offers

Active Offer Card

Structured card displaying active user progress within ongoing offers.

The component consolidates key information into a compact layout:
current reward accumulation, total potential reward, remaining time, and a direct CTA to resume gameplay.

An expandable interaction reveals deeper task-level details, including completed steps, remaining actions, and contextual information, enabling users to understand progress without leaving the flow.

3 / 7

Reducing Cognitive Load

Referral System

Transforms referral logic into a transparent and motivating system, making earnings, tiers, and progress clearly visible.

4 / 7

Global & Single Page

Cashout System

Clarifies eligibility, payout options, and fee structures through explicit states, reducing user frustration at the most critical moment of the experience.

5 / 7

Card info + Sorting

Offer Detail Structure

Breaks down complex reward structures into clear, actionable layers, separating steps, rewards, and requirements to avoid cognitive overload.

6 / 7

Recurrent Purchase

Progress Tracking

Provides continuous, glanceable feedback on user progress, reinforcing motivation and encouraging task completion within short mobile sessions.

7 / 7

Card Design

Earn Card System

Enables users to quickly evaluate earning opportunities by making reward value and effort immediately understandable within constrained mobile screens.

Interface Screens

How the platform is navigated and experienced in real use

Challenge:
High information density and poor comparability between offers.

Solution:
Simplified card structure, reward clarity (coins → dollars), and scalable categorization system.

Challenge
The highest friction moment in the product. Users believed they had “enough money” when fees made cashout impossible. Disabled states and eligibility were unclear. Needed to show payout options (PayPal, VISA, Apple…) without overwhelming the user.

Solution:
1. Insufficient balance 2. Minimum-only eligible 3. Eligible for multiple amounts

Challenge:
Users misunderstood eligibility and payout conditions.

Solution:
Clear availability states, predefined amounts, and transparent fee breakdown.

Challenge:
High information density and limited visibility made it difficult to compare offers on small screens.

Solution:
Reduced visual complexity, converted rewards to dollars for clarity, and introduced categorization and filtering to improve comparison and scalability.

Challenge:
Low motivation and unclear earning logic.

Solution:
Motivational entry point, real-time stats, and visible tier progression.

Challenge:
Fragmented configuration across multiple sections.

Solution:
Unified settings hub with clear grouping and fast access to key actions.

06. Responsive Design

Adapting the experience across different devices without compromising clarity or usability

Mobile-first architecture (350–450px optimization).
Reduced visual density for high-frequency decision screens.
Progressive disclosure to prevent cognitive overload.
Persistent CTAs to reinforce behavioral continuity.
Transparent eligibility and reward states.

The same earning logic, progression clarity, and motivational feedback were preserved across all mobile flows.

Responsive

Limited-Time Cashback Boost & Persistent Mobile Navigation

Cashback Boost: A promotional modal introduces a limited-time cashback opportunity where users can unlock a higher reward by making a…

1 / 8

Streamlined Authentication

The login screen prioritizes quick access by offering both traditional authentication and Single Sign-On options. Key design decisions include: -…

2 / 8

Opportunity Discovery Interface

The Earn section acts as the central hub where users discover earning opportunities. The interface combines: - a featured games…

3 / 8

Offer Detail Experience

The offer detail page organizes information into clear action layers: - Primary Play Now CTA - Task list with individual…

4 / 8

Progress Tracking Dashboard

The Offers screen helps users track their ongoing and completed earning activities. The interface separates tasks into two states: -…

5 / 8

Transparent Cashout Experience

The cashout interface provides a transparent overview of the withdrawal process. Key UX elements include: - Predefined withdrawal amounts with…

6 / 8

Referral Growth Interface

The referral section communicates earning potential from inviting new users. The interface includes: - A promotional banner highlighting referral benefits…

7 / 8

User Configuration Panel

The configuration interface allows users to customize key account preferences. Available settings include: - Username and account information - Currency…

8 / 8

07. Outcome / Learnings

Key issues identified and the design decisions implemented to resolve them

Outcome

Clearer reward comprehension and faster first-task activation.
Reduced cognitive overload across high-density mobile flows.
Significant decrease in cashout-related misunderstandings and support friction.
Stronger progression clarity within the earning loop.
Improved alignment between paid acquisition expectations and in-app behavior.
A modular UX foundation capable of scaling new content types and features.

Learnings

Behavior-driven products must be designed as loops, not isolated screens.
Progressive disclosure is critical in high-density mobile environments.
Transparency in monetization builds trust more effectively than marketing claims.
Consistency can be achieved without a formal design system if modular thinking is applied early.
Close collaboration with engineering is essential when UX depends on conditional logic and state-driven behavior.