Affiliate Program UI for a Shipping Platform

Indopaket Affiliator is a low-barrier affiliate program that allows users to earn commission by sharing referral codes for Indopaket’s shipping services.

Unlike existing membership-based referral programs, this flow is designed to work without requiring prior seller or membership context. Incentives are applied automatically when referral conditions are met, benefiting both the affiliator and the end user.

I worked on the frontend and UX implementation for this program, delivering interfaces for both web and mobile experiences. The main challenge was designing a system that feels trustworthy, understandable, and motivating, while staying intentionally simple.

This project is ongoing and planned for release around late August 2025.

---

Context & Product Intent

Indopaket already operates internal referral and membership-based programs. The Affiliator Program was introduced as an alternative growth channel with a simplified entry experience. The intent was clear:

• no role complexity
• no requirement to become a seller or member
• minimal setup before sharing From a UX standpoint, this meant removing assumptions about prior knowledge and designing flows that work even for first-time users with no existing relationship to the platform.

---

UX Principles Applied

Recognition Over Recall (Nielsen’s Heuristic #6) Commission status, referral codes, and pending rewards surface immediately on the dashboard — users should not need to navigate or remember where to find them. One glance answers “did I earn anything?”

Progressive Disclosure The flow is broken into stages — Register → Get Code → Share → Earn — revealing only what’s relevant at each step. New users are never confronted with advanced analytics or full commission breakdowns before they’ve had a chance to complete even one referral.

Mental Model Clarity “How I earn” must be self-evident without reading instructions. The UI is structured around the user’s mental model: share a code, someone uses it, you get paid. Anything that disrupted that story was deprioritized or removed from the flow.

Error Prevention (Nielsen’s Heuristic #5) Fraud-aware constraints — self-use prevention, usage limits, abnormal activity handling — are surfaced to users as clear, plain-language explanations rather than opaque error codes. Users understand what’s blocked and why, without exposing internal system logic.

Trust through Transparency Commission states are always explicit: pending vs. confirmed, with transaction context explaining why a reward was or wasn’t granted. Ambiguity in earnings erodes trust fast — this design treats clarity as a trust signal.

---

UX Challenges & Key Decisions

Designing for First-time Users
Because affiliators may have no prior context with the platform, onboarding needed to be:

• short
• self-explanatory
• confidence-building The UI avoids internal terminology and focuses on what matters immediately: share code → usage → reward visibility.

Learning and Applying Gamification Thoughtfully
This project pushed me to study gamification patterns more deeply, including reading references and benchmarking similar affiliate systems.

Rather than adding surface-level rewards, the focus stayed on:

• clear progress and earnings visibility
• simple mental models for “how I earn”
• incentives that support repeated sharing, not distraction Gamification here is subtle and functional, not decorative. Specific mechanics are intentionally kept high-level in this description.

Commission Visibility Over Everything Else
Early design iterations experimented with broader analytics. These were later reduced to keep the primary focus on:

• commission earned
• pending vs. confirmed rewards
• clear transaction context Anything that did not support these goals was deprioritized.

---

Frontend & Mobile UI Implementation

Web & Mobile Interfaces
I implemented the UI across web and mobile contexts using a React-based architecture, ensuring consistent behavior while adapting layouts for smaller screens. Revenue and discount information remains immediately visible across device sizes.

Onboarding & Sharing Flow
Designed a straightforward onboarding and sharing flow: Register → Get Code → Share → Earn, supported by inline validation and clear feedback states.

Dashboard & Transaction UI
Built interfaces for:

• referral codes with one-tap copy and share
• commission summaries (earned vs. pending)
• transaction lists that clearly explain why a reward was granted Consistency between summary and detail views was essential to maintain trust.

Fraud-aware UX Constraints
Frontend UI reflects system constraints such as:

• self-use prevention
• usage limits
• abnormal activity handling Messaging explains blocked actions clearly, without exposing internal system logic.

---

Key Takeaways

• Designing UX for users with no prior system context
• Implementing commission-based flows with trust as a priority
• Applying gamification in a restrained, purpose-driven way
• Balancing growth goals with clarity and simplicity
• End-to-end UI implementation using React / Next.js This project sharpened my understanding that sometimes the hardest UX work is making things feel obvious, especially when users have no reason to learn your system deeply.

Implementation details are presented at a conceptual level to respect platform security and business boundaries. Specific eligibility rules and incentive calculations are intentionally abstracted in this overview.