Project — 03 · Webview E-commerce

Exology

An affiliate commerce platform where sales agents manage stock, share product links, and earn rewards — entirely through a mobile WebView experience.

Role
UX/UI Designer
Scope
Research · UX Flow · UI Design ·
Design System · Handoff
Platform
Webview E-commerce
Overview

Project overview

Exology is an affiliate commerce platform that lets sales agents manage inventory, share product links, and accumulate rewards — entirely through a mobile WebView experience.

The brief was to replace a fragmented, LINE-driven operation with one self-contained app: agents top up stock, sell through unique affiliate links, and watch their earnings grow — while customers move from link to checkout with as little friction as possible.

The problem

Where agents were getting stuck

Agents need a system that is simple and self-contained, gives them real-time visibility into earnings, and offers incentives that keep them motivated to sell consistently.

  • Fragmented stock managementAgents had to top up stock through multiple LINE groups, often resulting in order mistakes, payment confusion, and delayed confirmations.
  • No real-time commission visibilityAgents could not track their earnings or sales performance. Commission summaries were shared manually by the admin team once per month.
  • No affiliate attribution systemWithout unique affiliate links, it was difficult to accurately track which agent generated each sale.
  • Friction in customer checkoutThe checkout flow required too many steps, causing a high drop-off rate before payment completion.
Research & insights

Reading the signals

Research insights drawn from user interviews and market analysis. Four themes shaped every decision that followed.

Everything depended on one admin

Agents submitted stock requests via LINE and waited for admin confirmation. If admin was offline, everything stopped. This became the core design goal — a self-service workspace that removes admin as a bottleneck.

Stock ran out after the pitch, not before

Stock status arrived after the sale — causing failed orders and eroding customer trust. We surfaced real-time availability directly on the product card, before agents open the detail page.

Orders disappeared into a black box

After submitting via LINE, agents had no idea what happened next and had to follow up repeatedly. We designed a persistent Order Status screen tracking every step — pending through delivered — in real time.

Hidden earnings killed selling motivation

Commission was verbal or via LINE — no running total, no history. We made Commission a primary nav item so earnings are visible on first open, applying the Goal-Gradient Effect to sustain motivation.

Design goal

Give agents live visibility without admin — get customers from link to payment in the fewest taps possible.

The solution

What I designed

Developed intuitive iconography and a visual language that makes commerce feel approachable. Built interactive prototypes for user testing, applied progressive disclosure to complex features, and designed a comprehensive onboarding experience that educates new agents.

What it delivers

  • Top up stock in under a minute, without leaving the app.
  • Know exactly what you've earned — the moment you open the app.
  • Click a link, pay in seconds — no friction between intent and purchase.
  • Every unit sold brings agents one step closer to a reward worth staying for.

UX decision highlights

  • Prioritize three core metrics on the dashboard.
  • Compress the stock top-up flow into three taps.
  • Keep reward progress visible to motivate action.
  • Enable one-tap checkout with a saved address.
User flows

Two journeys, one connected system

The agent keeps stock topped up and shares links; the customer buys in a few effortless taps. Each side has its own flow but feeds the same real-time engine.

Agent workflow

Start
Sign in / Register
Homepage
Top up stock
Share affiliate link
Customer purchases
Stock deducted
↻ repeat while stock remains

Key design decisions

  • Stock must be topped up before agents can share the affiliate link.
  • Every sale automatically deducts stock in real time — no admin action needed.
  • Agents can continue selling immediately while stock remains.

Customer workflow

Clicks affiliate link
Sign in / Register
View products
Add to cart
Enter / confirm address
Select payment
Order confirmed
Saved address auto-fills

Key design decisions

  • Minimized steps to checkout — saved address auto-fills to reduce friction.
  • Returning customers skip address entry entirely for faster repeat purchases.
  • Clear order confirmation and shipping status reduce post-purchase anxiety.

Behind every confirmed sale

One purchase fires a chain of automated events — no manual reconciliation, no waiting on admin.

1
Payment is verified
2
Agent stock is deducted
3
Commission is credited
4
Reward points are added
5
Shipping notification is triggered
Agent top-up flow

From stock package to shareable link

Watch the full top-up journey — four steps from picking a stock package to copying a ready-to-share affiliate link.

Prototype screens go here — 4 steps
▶ Prototype walkthrough
Key design decisions

The reasoning behind the moves

01

Progressive disclosure

Decision — Key info above the fold only; full specs sit behind “See more.”

Why — Agents pitch in under 30 seconds — less upfront info means faster, more confident delivery.

02

Persistent order status

Decision — A live status screen (pending → confirmed → shipped → delivered) instead of a one-time success message.

Why — Replaces manual follow-up via LINE. Visibility of System Status — Nielsen #1.

03

Stock, earnings & link on Home

Decision — Home surfaces remaining stock, current earnings, and the affiliate link right after top-up.

Why — The three things agents check every time, in one place. Visibility of System Status + Goal-Gradient Effect.

Structure & system

The design system I built

A Sukhumvit Set type scale, a gold-on-dark palette with clear semantic colours, and a reusable component set that kept every screen consistent.

Color · brand & neutrals

primary/dark
#371C00
primary
#6E4819
primary/light
#EED688
text-white
#FFFFFF
gradient/primary
371C00 → 6E4819
gradient/light
6E4819 → EED688
placeholder
#8B8373

Type scale · Sukhumvit Set

heading 1 / 62 · 3.812remHeading 1
heading 2 / 48 · 3.062remHeading 2
heading 3 / 38 · 2.438remHeading 3
body / 16 · 400Body text — the default for reading.
caption / 12 · monoCAPTION / META LABEL

Components · built once, every state defined

Key features

The four screens agents live in

DashboardOverview of sales & performance.
ShopBrowse and purchase stock.
Membership tierTrack level & rewards progress.
RewardsRedeem points for rewards.
Results & impact

A self-running
selling engine

24/7
Agents top up stock independently — no more waiting on admin.
100%
Real-time stock status — pitch only what's actually available.
✓Monitor, not coordinate
Admin shifted from LINE chat to a dashboard overview.
↗Self-tracked
Commission and order status visible at a glance.
Reflection

What I'd carry forward

What worked

Embracing the WebView constraint

Designing within LINE’s WebView limits forced ruthless prioritization — every screen had to earn its place, which kept the agent workflow lean and fast.

What I'd do differently

Define edge cases up front

Stock states, expired links and commission disputes were handled reactively. Next time I’d map failure states alongside the happy path from day one.

Next project

Bluestat POS →

View project