Referral System Design for LINE Mini App

Manar Abu Qasem

Referral System for LINE Mini App

🔍 Project Overview

Client: Internal LINE Mini App project Role: UI/UX Designer Goal: Design a referral feature integrated inside a LINE Mini App that encourages users to invite friends, track progress, and earn in-app rewards - all within LINE’s ecosystem and UX patterns.

⚙️ The Problem

Most LINE Mini Apps lack a built-in user acquisition loop. Users join once but rarely invite others because:
There’s no easy share flow inside the app.
Reward visibility is unclear.
Tracking who joined from your invite is inconsistent.

💡 The Solution

I designed a Referral System that blends naturally with LINE’s UI and API capabilities:
Users can generate and share a unique invite link or QR code directly via LINE chat.
Friends join through deep links that open inside the same mini app.
Both referrer and referee can track progress and rewards within the app’s “My Page” section.

🧩 LINE Design Guidelines Used

Followed LINE Mini App UI Kit for consistent button and modal patterns.
Used LINE’s share intent for seamless in-app sharing.
Color scheme and typography aligned with LINE’s neutral style (white, light gray, green accents).
Emphasized clear micro-interactions: “Copied,” “Shared successfully,” “Reward earned..
System colors and fonts
System colors and fonts
User Flow
User Flow- Friend perspective
Referral System Screens
Referral System Screens
Referral System Screens -Friend perspective
Referral System Screens -Friend perspective
Designing within a super app like LINE required balancing native UX consistency with custom engagement flows. Focusing on clarity, instant gratification, and native sharing UX made the referral feature feel like part of LINE itself -not an add-on.
Like this project

Posted Nov 11, 2025

Designed a referral feature for LINE Mini App to boost user acquisition and engagement.

Likes

0

Views

4

Timeline

Oct 17, 2025 - Oct 23, 2025

Rakuten - Pronto J-Port Store Re-Design
Rakuten - Pronto J-Port Store Re-Design
Delilah e-commerce web design
Delilah e-commerce web design
Nursery School Website&Mobile UI/UX Design
Nursery School Website&Mobile UI/UX Design
3D Animated UI/UX Web Design -Landing Page
3D Animated UI/UX Web Design -Landing Page

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc