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

  • Low retention

  • High confusion

  • High support volume

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

My Role
In this project, I was responsible for:
  • 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.

Client
Mobile reward-based earning platform
Users
Mobile-first, reward-driven users from paid acquisition
Business Goal
Increase activation, retention, and cashout trust
Key Challenge
High-friction earning flows and low reward comprehension
Devices
iOS & Android | Mobile-first (350–450px optimized)
CMS
Vue.js + Tailwind · Proprietary backend

02. Screenshots

Key interface decisions that define the portfolio experience
*You can click on an inmage or stay on ti so the carousel will stop moving

03. Challenge / Solutions

Key issues identified and the design decisions made to address them
Challenge
  • Low reward comprehension due to complex coin-based systems and unclear payout logic.
  • Overloaded mobile interfaces on 350–380px screens with excessive information density.
  • Offer details displaying steps, recurrent tasks, and progression rules simultaneously, causing cognitive overload.
  • Confusing cashout logic with hidden fees and unclear eligibility thresholds.
  • Referral system lacking clarity, motivation, and visible progression.
  • High UI inconsistency due to rapid iteration and absence of a formal design system.
  • Frequent design–development misalignment slowing down shipping velocity.
  • Need to support paid acquisition traffic with unrealistic earning expectations.
Solution
  • Behavior-driven earning loop architecture (Choose → Complete → Earn → Cash out → Repeat).
  • Conversion of rewards from coins to dollar values for immediate comprehension.
  • Progressive disclosure system separating Rewards, Recurrent Tasks, Questline, and Steps.
  • Motivational referral dashboard with tier logic and real-time performance insights.
  • Lightweight modular component library enabling rapid iteration without full design system overhead.
  • Direct collaboration with Frontend (Vue + Tailwind) to ensure state accuracy and visual fidelity.
  • Dedicated acquisition-to-app funnel alignment with expectation management and early activation incentives.

04. Context

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

Understanding the initial product environment, constraints, and structural limitations

Before the redesign phase, the product faced:

  • High user acquisition but low activation and retention performance.
  • Complex reward logic based on large coin values and unclear payout perception.
  • Overloaded mobile interfaces on ultra-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 first step was not visual redesign, but restructuring the earning logic and user progression model to align acquisition expectations with in-app behavior and create a coherent behavioral loop.

ampliar

05. Core Experience Design

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

Information Arquitecture

The information architecture was restructured around a closed earning loop to reduce cognitive load and guide users toward immediate action.

Primary sections were reorganized to reflect behavioral progression (Earn → Activity → Cashout → Referrals → Settings), ensuring users always understand what to do next.

The structure supports scalability for new content types (Games, Surveys, Apps) without breaking progression logic.

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.

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.

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.