The Payoff: A Celebration, Streamlined
The redesign focused on experience over pure metrics, achieving:
A visually festive feature that stood out while respecting the master brand.
An intuitive, gesture-based selection flow that felt faster and more natural.
Broader reach by enabling sends to non-users via a secure web portal, removing friction.
The Diagnosis: Dated & Confusing Designs
The red packet journey hadn’t evolved in years and felt disconnected after the app’s recent homepage revamp. User feedback and flow analysis highlighted its confusing navigation and hierarchy, and outdated UI visuals.
My Role & Scope
I led the end-to-end redesign of the red packet journey, owning:
Competitive analysis, and journey mapping
Wireframing and iteration with technical constraints in mind
Full UI design and custom Chinese New Year illustrations
Rive motion design and state-machine animations
Close collaboration with Tap & Go team, design lead, PMs, and developers
Comprehensive handoff documentation tailored to account tiers
UX Strategy – “How Might We Make Sending Feel Effortless?”
Research & User Journey
I analyzed competitors (Citibank, BOC, Hang Seng) — some used single-page simplicity, others guided multi-step personalization. Combined with user feedback and support data to identify pain points.
I then mapped journeys for all user tiers and permissions. Early developer syncs clarified constraints (e.g., dynamic amount rendering, non-user sharing).
2. Key Features
Clear Visual Hierarchy: New illustrations and brand-aligned colors guide attention to CTAs while showcasing packet designs.
Mobile-First Gestures: Vertical scroll + drag-and-drop banknotes replaced clunky top selection — faster and more natural.
Inclusive Sharing: Non-Tap & Go users receive red packets via secure web link — removing adoption barriers.
UI & Celebration – “How Might We Amplify Festive Joy?”
Dynamic Motion with Rive
I first designed original Chinese New Year illustrations and layered subtle decorations across backgrounds. I then worked closely with devs and used Rive's state machines for interactive animations.
Banknotes design that reacts to input amount
User's selected red packet design in the send and receive progress
Immersive Festive Atmosphere
Some other animation that I made also include:
Decorative festive elements (eg. red packet and feichun animated icons)
Background color theme changing
Dynamic background and red packet open motion (build anticipation)
Final Look: A Complete Makeover
Handoff & Collaboration
Delivered detailed documentation organized by account type, including:
All user flows and edge cases
Animation specs and Rive assets
Technical notes on dynamic states
Ensured developers could implement complex motion and responsiveness accurately.
Key Learnings: Crafting Festive Experiences
This project was a rewarding challenge in modernizing a deeply meaningful tradition:
Tradition Meets Tech: I learned to draw UX inspiration from physical rituals (like handling banknotes) to create digital interactions that feel innate and respectful.
Narrative as a Guide: Establishing a core story of "celebratory giving" guided every decision, from illustration style to animation timing, ensuring the feature felt cohesive and emotionally resonant.
Early Technical Dialogue: Proactively discussing animation feasibility and state management with engineers was crucial to delivering a rich, performant experience within mobile constraints.
