Indopaket Affiliator Web

A new home for referrals

Indopaket wanted to introduce an affiliate experience for content creators. The design challenge was to support code sharing while making earnings and payout information understandable.

My part: UI design and frontend implementation using React, Vite, and Tailwind CSS.

Status: Launch planned for late September 2026 alongside the separate mobile app; post-launch results are not yet available.

The experience had to balance a low-friction sharing flow with clear commission and payout information. Business constraints are discussed only where they explain a design decision; sensitive program rules and operational details are omitted.

Where I started

Market research and competitor benchmarking informed the design, with a focus on how affiliate products present codes, earnings, and payouts.

My starting idea was simple: keep the code within reach, make earnings readable, and explain where a payout stands. I still need to see how that holds up with creators.

I started with market research and competitor products. I haven’t interviewed creators or run usability tests yet, so these are ideas to test, with room to change.

What I looked at → what I’d try → what’s next

From research to a testable direction

1. 01
   Available foundation

   Research inputs

   Market research + competitor benchmarking

2. 02
   Proposed direction

   Design hypothesis

   Accessible codes + understandable earnings

3. 03
   Next step

   Creator testing

   Observe sharing, interpretation, and next actions

1. Share a code
2. Check earnings
3. Understand payout status

Three things I wanted to make clearer

1. Make Sharing Immediate

I wanted creators to find their code and get back to sharing it without a detour.

The dashboard gives the referral code a dedicated place alongside the account summary, with copy and share actions.

The idea behind it

A short path back to creating

1. 01
   Access

   Find the code

   A dedicated place on the dashboard

2. 02
   Action

   Copy or share

   Visible actions alongside the code

3. 03
   Intended outcome

   Return to content

   Continue the creator’s publishing workflow

Still on my mind: The desktop dashboard still gives substantial space to financial summaries and transactions. Whether sharing needs stronger visual priority is a question for further testing.

2. Make Earnings Legible

The earnings view needed to answer a fairly personal question: what have I earned?

The interface separates earnings summaries from transaction history and uses distinct balance and commission statuses.

The idea behind it

Three questions the interface should answer

1. 01
   Overview

   What did I earn?

   An earnings summary provides the overview

2. 02
   Detail

   Where did it come from?

   Transaction history adds context

3. 03
   Interpretation

   What does it mean?

   Status wording explains the balance

A question for testing: Can creators explain the differences between those statuses without additional guidance?

3. Make Payout Expectations Clear

Earning commission and receiving a payout are different moments. I wanted the interface to make that distinction easier to follow.

Payout status and progress provide context for interpreting commission balances.

The idea behind it

Make the meaning of each status visible

1. 01
   Earnings

   Earned commission

   Recognize the earnings balance

2. 02
   In progress

   Awaiting transfer

   Understand the current payout status

3. 03
   Completed

   Already paid

   Distinguish completed transfers

A question for testing: Can creators identify the current payout stage and understand whether any action is needed?

The Part I’m Still Thinking About

The referral code has its own place on the dashboard, alongside balances and transactions. That gives creators access to sharing and earnings in one view, but it also leaves a question: is the money side of the screen taking attention away from sharing?

Secondary research informed this version. I haven’t tested it with creators yet, so I’m keeping that question open.

For the next iteration, I’d start by watching someone find their code and explain their commission and payout status. That should help me revisit the hierarchy and wording with something more useful than a hunch.

Delivery and Implementation

I built registration and account recovery, profile setup, the dashboard, referral code management, earnings history, settings, and public information pages.

01

Shared React components

Form controls, status messages, and layouts stay consistent across account setup and the dashboard.

02

Loading, empty, and error states

Loading, validation, empty, and error states are part of the implementation, alongside populated screens.

The launch is still ahead, so there are no post-launch results to share yet. For now, here’s what I built and why.

What I’d ask creators to try

The next step is to test the proposed task sequence with creators:

• Can they find and copy or share their referral code easily?
• Can they distinguish earnings, pending payouts, and completed transfers?
• Can they understand payout progress and any required next action?

I’d use what I learn to revisit the dashboard hierarchy and status wording. I also want to understand when creators use their phones for this, rather than assume mobile is always their starting point.

Read the separate Affiliator Mobile case study →