✈️
🔒 Case Study
Enter access code
to view this project
Incorrect — try again.
You've got the eye for it.
Open Communication Channel ✈️Senior Product Designer
Crafting thoughtful digital experiences in fintech, AI, and beyond — where precision meets simplicity.
Designed the end-to-end landing, enrollment, and onboarding experience for Fiserv’s small business cash management suite within East West Bank’s digital banking product.
Led the 0→1 design of a debit card perks program, driving activation and daily engagement across 1M+ users.
Gesture-first tarot with dual visual themes and a collectibles system built to make every pull a ritual.
End-to-end user research study uncovering critical usability gaps and reshaping the product roadmap through moderated sessions.
Designed and launched a social discovery platform combining research, interaction design, and promotional video production.
About
Currently leading design initiatives at East West Bank (Velo Digital), crafting seamless experiences across native mobile, online banking, and web platforms.
I focus on creating minimal, elegant interactions powered by emerging technologies — with a portfolio spanning fintech, AI, and aviation UX. Beyond design, I'm a pilot in training, driven by curiosity and fresh perspective.
Get in touch
Whether it's a product, a system, or something no one's designed before — I'm ready to collaborate.
Say Hello ✈️✦ UX / UI Case Study
An Anime-Inspired Tarot App for Every Kind of Reader
Project Overview
A mobile tarot app for every kind of reader — built around a fully committed anime art direction that merges immersive visual storytelling, structured reading flows, and a collectibles system that rewards daily practice.
"How might we design a tarot app — for all experience levels — that feels like entering another world, while building a sustainable daily reading habit?"
The Problem
Most tarot apps are flat reference tools — pull a card, read a text block, close the app. No atmosphere, no habit loop, no reason to return. Visual design skews toward cold minimalism or dated clip-art, failing the digitally-native audience increasingly drawn to tarot.
No habit mechanics — no streaks, reminders, or progress rewards
Transactional sessions with no reflection or journaling layer
Card meanings as walls of text — no hierarchy or depth toggle
Cold, generic apps — no sense of world, character, or atmosphere
01 — Discovery & Research
Competitive Analysis
Six apps assessed. No competitor had invested in retention design — streaks, reminders, and rewards were absent or afterthoughts. Visual quality was consistently low.
User Interviews
Beginners feared 'getting it wrong' — wanted guidance, not condescension
Casual readers wanted a habit but found no app made it easy or motivating
All groups responded to character-based apps — a guide or companion resonated
Users don't just want to pull a card — they want a ritual companion. The app's character and world need to feel as considered as the tarot content itself.
02 — User Flows
Home & Discovery
Daily draw CTA, Zodiac This Month, and Fantasy Quest — a gamified narrative layer rewarding consistent use.
Reading Flow
Intention → spread → focus → 78-card arc draw → layered card reveal. Each step builds atmosphere and anticipation.
Card Detail
Keyword tags, layered meanings (positive / negative / reversed), consistent framing across all 78 cards.
Collectibles
Unlockable card collection rewarding daily draws and reading streaks — the habit loop's reward layer.
03 — Visual Design & UI
A single recurring oracle character guides every reading. Warm tan/cream for home & discovery; deep navy for reading screens — a deliberate palette shift that signals entry into the ritual space.
Home screen
Reading entry
Spread selection
Focus selection
Coffee Support — Monetisation Feature
A "Buy Me a Coffee" integration surfaced through the app's sidebar — letting users support development with bonus in-app credits. Designed across three states: intro modal (with Lottie animation), amount selection, and validation errors.
04 — The Card Draw Interaction
A fan of 78 card backs arcs across the screen. Swipe to browse, tap to select — physically fanning a real deck, translated to mobile. Unlike the standard 'tap one face-down card', the arc makes all 78 choices visible, reinforcing that the selection is real.
Pre-selection
Card placeholder visible above the arc, awaiting a draw
Post-selection
Chosen card rises from the arc into the reading position
05 — Card Detail & Reading Results
EN — keyword tags & meanings
ZH — localised card content
Amber keyword tags — fast, scannable signposting before body text
Short prose under each keyword — approachable for beginners, detailed for practitioners
Light background signals 'reading mode' and reduces fatigue during longer sessions
Fully localised — card names, keywords, and meanings available in English and Chinese
06 — Three-Card Reading Flow
Three sequential draws, one position unlocked at a time. Results shown individually per card — not a three-up layout — so each card's meaning gets full attention.
0 drawn
Past drawn
Past + Present
All 3 drawn
07 — Testing
Key Findings
5/6 completed the full flow without error on first attempt
Card arc was the standout moment — all 6 called it 'satisfying', 'tactile', 'like a real deck'
Oracle character felt like a trust signal — users felt 'guided', not alone with information
Iterations
Added 'Swipe & Tap' affordance label — first-time users were unsure of the gesture
Increased keyword tag spacing — users losing their place mid-scroll
Replaced spread selection text labels with card icon visuals
Outcomes & Reflection
The character, world, and visual consistency create a product genuinely distinct from every existing tarot app. The multi-step reading flow and collectibles system lay the groundwork for a habit product with real retention potential.
Proud of
Card draw arc — translating the physicality of real tarot into a gesture-first mobile mechanic
Dual palette theme — ritual transition without any user action required
Oracle character throughline across every reading screen
Next steps
Reading Log — saving past readings with date, focus, and notes (most requested in testing)
Deeper Collectibles — new card back designs or oracle outfits as practice rewards
Onboarding path — first-run reading calibrated to self-reported experience level
✦ Product Design Case Study
Enhancing Card Value Experience for International Students
Overview
Velo by East West Bank had no debit card rewards experience. I led the design of a new Debit Card Perks program — giving international students and debit card customers a way to discover offers, earn cash back, and track rewards directly inside MB and OLB.
Design Process
Jira Ticket Workflow
The Problem
EWB customers had no way to access debit card rewards through the bank's digital products — a missed opportunity for engagement and value, especially for price-sensitive international students.
The Solution
A Debit Card Perks program built into MB and OLB — surfacing exclusive cash-back offers, automatic reward tracking, and a geo-targeted map of nearby deals.
Key Features
Cash back across 8 categories: Grocery, Gas & Auto, Restaurants, Shopping, Travel, Health & Beauty, Home Goods, Entertainment
Account Summary with real-time cash-back balance, pending rewards, and lifetime totals
Search indexed across merchant name, category, and descriptive keywords
Map integration showing geo-targeted offers within a configurable radius
Consistent CTA experience across mobile and desktop
Student Perks is a key selling point of the Student Product and operates as a subset of Debit Card Perks — same infrastructure, tailored feature set for enrolled students.
Design Exploration
Research
I analysed competitor products across U.S. and international markets — especially critical for a bilingual audience familiar with both U.S. banking apps and Chinese super-app paradigms.
What it shaped
Categorisation
Icon-led category browsing drawn from JD.com and Meituan super-app patterns, adapted for banking.
Map integration
Geo-targeted offer discovery informed by Dianping and Ctrip's local discovery layers.
Cash-back surfacing
Pending vs. settled cashback framing drawn from Chime and Rakuten's transaction-level transparency.
Target users
NRA students and SSN/NRA debit card customers — bilingual, price-sensitive, actively seeking deals.
Visual Design
Type built on Nunito Sans for legibility across Latin and extended character sets. A bespoke category icon set and a colour system designed to handle a wide range of merchant brand colours without visual conflict.
Colour system
Category icon set
Quicklinks entry point
The Perks diamond quicklink (highlighted) is the primary entry point from the MB home screen.
Part I — Mobile Perks
Entry point — one tap from home
My Perks — featured offers
Home Perks — category browse
Map integration & local offers
Location permission — trust-first design before requesting access
Geo-targeted pins — offers surfaced by proximity
Part II — Online Banking
The desktop experience mirrors mobile — same offer detail pages, same cash-back flows, same enrolment path. Customers switching between mobile and web encounter no capability gap.
Marketing Webpage
A companion marketing page introducing Debit Card Perks to prospective customers — communicating value, surfacing key categories, and driving enrolment from outside the logged-in banking environment.
Outcome
The Debit Card Perks program gave East West Bank a new lever for engagement — offering meaningful discounts to debit card holders across both mobile and web, while addressing an underserved segment and strengthening EWB's partnerships with retail merchants.
✦
Velo by East West Bank · 2022
✦ UX Research Case Study
Optimizing the Velo banking experience for overseas customers
The Problem
Velo's product set lacked the depth to serve its non-resident alien (NRA) customer base — limiting growth and weakening the experience for overseas users with distinct financial behaviours.
The Solution
Expand offerings with additional NRA checking products and refine onboarding and money-movement flows — synthesised from moderated sessions with overseas customers across three distinct segments.
Target Audience
Interview questions covered basic context and pain points across onboarding, transfers, and service expectations. Findings were synthesised into personas for each segment.
Investor
Family / Immigration
High Spender
Research Process
Research spanned three time zones — the U.S. team, the Beijing product team, and APAC interviewees. This flowchart shows how preparation, interviews, and post-session logistics were divided.
Journey Map
Five stages — Awareness, Considerations, Enrollment, Funding, Loyalty — capturing feelings, thoughts, and pain points. Drop-off risk was highest at Funding, where fee opacity and transfer complexity drove churn.
Top Insights
Competitive Context
NRA customers frequently held accounts at major Chinese state banks alongside Velo. Understanding their onboarding and transfer benchmarks set the bar Velo needed to meet — or exceed.
Design Response
Research findings drove two high-priority prototype updates: a progress-bar onboarding flow and a simplified domestic wire transfer experience.
01 — Onboarding: progress bar added
A progress bar introduced a clear sense of where users were in registration — addressing anxiety from an opaque ITIN and SSN process.
02 — Domestic wire: friction reduced
Key information — amount, method, fees, confirmation — surfaces progressively, reducing cognitive load and improving trust.
Before
After
✦
By listening closely to overseas customers, the team turned qualitative insight into two shipped flows: a clearer onboarding experience and a less friction-heavy wire transfer journey.
✦ UX/UI · Creator Economy · Case Study
A messaging app that helps creators monetize follower outreach and support charitable causes
The Problem
Experts and creators receive far more DMs than they can handle, with no incentive to respond. Followers seeking advice rarely get a reply — leaving value on the table for everyone.
The Solution
A mobile app that lets creators set a price for responding, accept or reject requests, schedule paid meetings, and route a percentage of earnings to charity.
Product Walkthrough
Covers onboarding, the inbox, fee-setting, payment, the public Q&A library, and creator controls.
Research
Interviews across creators and nonprofit representatives. Creators consistently saw product-market fit; charities responded openly — "all money is good money."
User Persona
Design Process
Aligned CEO, graphic design, and content strategy on goals and scope. Wireframes covered onboarding, conversations, payments, Q&A, and profile — refined before moving to high-fidelity.
User flowchart
Key Features
High-Fidelity Prototypes
Full prototype coverage across onboarding, messaging and payment, and the broader feature set including Q&A, contacts, settings, and payments.
01 — Onboarding flow
02 — Messaging, pricing & donations
03 — Features, Q&A, contacts & payments
✦
Creators are compensated for their time. Followers get reliable access. Charities gain a new funding channel. Grounding the design in direct user interviews ensured the final product addressed real pain points across every group.
✦ Product Design Case Study
Designing the enrollment & onboarding experience for Fiserv's small business cash management suite inside East West Bank's digital banking product.
01 — Context
East West Bank's digital banking product (Velo) served a growing base of small business customers who had no integrated way to manage cash flow, pay vendors, or track payables — all from within their existing banking app. CashFlow Central (CFC), a Fiserv product, offered the right solution. My role was to design the complete customer-facing experience that would bring CFC to life inside EWB's ecosystem — from the very first marketing touchpoint through to post-enrollment.
This was a strategic product expansion, not just a feature addition. Getting it right meant understanding both the Fiserv platform's technical constraints and the behavioral patterns of EWB's small business customers — many of whom were international business owners and first-generation entrepreneurs with high expectations for clarity and trust.
CFC sits inside Velo's existing Transfer & Pay surface and surfaces a dedicated promo card on the dashboard. The customer never leaves the bank — the entire CFC experience renders inside a frame served via OAuth SSO.
01 · Dashboard promo card
02 · Transfer & Pay entry tile
How do you introduce a powerful new product inside a banking app people already trust — without disrupting that trust or overwhelming them at the point of enrollment?
Ecosystem
CFC is implemented as a framed experience inside EWB's banking app — users never leave the app, but the CFC UI is rendered within a frame via OAuth-based Single Sign-On. That created a tight set of design constraints.
OAuth SSO handoff. Authentication is handled by EWB; CFC receives the user via SSO with no separate login required.
API-driven account maintenance. Subscriber and bank account add / modify / delete / reactivate must be handled via API on EWB's side — not within PartnerCare or the CFC UI.
EWB-hosted Terms & Conditions. EWB chose to host their own T&Cs rather than use Fiserv's standard hosted version, requiring custom compliance coordination.
CheckFree RXP coexistence. Existing RXP customers needed to see the CFC entry point with the option to use both platforms side-by-side, or opt into a one-off migration.
Business-DDA-first funding. The first funding account enrolled must be a business DDA/MMA — personal accounts can be added later but cannot be used for billing.
User Journey Map
The CFC customer journey was mapped across two versions — BE 1.0 (full marketing-to-enrollment arc) and BE 2.0 (refined based on learnings). The end-to-end journey spans seven key touchpoints.
Introduces CFC to existing and net-new Bill Pay customers.
In-app awareness without disrupting core banking tasks.
Education-first, before any enrollment action is possible.
Sent to customers who don't engage after the initial campaign.
The user selects their business and proceeds — single or multi-entity.
Nudges users who drop mid-flow back into the experience.
Activation and retention across the first 90 days of usage.
02 — Problem-Solving
Research combined competitive analysis, internal stakeholder interviews, and review of existing CheckFree RXP customer behavior data. Three user profiles emerged — and the design had to serve all three without becoming a confusing one-size-fits-all experience.
Level 1 · Owner
Authorized signatory.
Accountable for all financial decisions. Enrolls the business, accepts T&Cs, approves sub-users. Only one per business.
Level 2 · Manager
Office manager / finance.
Executes payments day-to-day. Can approve Level 3 transactions, set up Autopay, and run single transactions independently.
Level 3 · Staff
Junior employee.
Restricted access with approval guardrails. Below-limit transactions go through; above-limit needs L1 or L2 sign-off.
EWB's non-resident-alien base benchmarks their banking against Chinese super-app paradigms (WeChat, Alipay) — expecting a frictionlessness traditional U.S. banking products rarely deliver.
Painpoints
First-time users had no education moment before being pushed into enrollment. There was no clear explanation of what CFC was, what it cost, or what they were signing up for — leading to drop-off at the very first screen. Fee information was particularly absent, creating post-enrollment frustration when charges appeared.
Owners with more than one entity under their EWB account had no clear way to understand that enrollment was per-business, not per-account. They expected to enroll once and have all businesses covered. The lack of an intermediary selection step led to incomplete enrollments and support tickets.
When a Level 2 or 3 user tried to access CFC before their admin had approved them — or before the L1 user had accepted the T&Cs — they hit a dead end with no explanation. The absence of a clear pending state created confusion, repeated login attempts, and unnecessary support calls.
Solutions
Solution 01
Introduced a mandatory landing page — "Every payment. Perfectly tracked." — that all new users see before any enrollment action is possible. The page covers three core benefit pillars (Convenient, Powerful, Flexible), surfaces fee information upfront, and uses a single clear CTA to set intention.
Prototype: interactive landing screen with benefit cards, fee callout, and CTA state variations.
Solution 02
Designed a dedicated selection screen — modeled on the Zelle for Small Business pattern already familiar to EWB users — that surfaces all eligible businesses before enrollment begins. Crucially, the primary CTA mutates from "Enroll →" to "Continue →" for any business already enrolled, preventing duplicate enrollment API calls.
Prototype: covers single, multi, enrolled, and ineligible states.
Solution 03
Designed a clear holding screen — "Contact Your Administrator" — for sub-users who attempt access before admin approval. A warning icon (not an error icon), plain-language copy, and a single "Ok, got it" CTA route the user back to the dashboard. The design avoids exposing internal hierarchy language while giving users enough context to act.
Prototype: full sub-user path from T&C pending → approval pending → access granted.
03 — Process
The design process began with a cross-functional kickoff: PM, engineering, QA, compliance, and the Fiserv product team. Initial brainstorming focused on the branching logic — user tiers (L1/L2/L3), business count (single vs. multi), enrollment status (new vs. returning), and error states (pending, inactive, ineligible).
An early assumption — that one unified flow could serve all user types — broke down quickly. The L1 admin and L2/L3 sub-user experiences were fundamentally different in permissions, approval dependencies, and post-enrollment destinations. Two parallel flows were necessary.
A visual map of every branching point in the enrollment journey — Is there more than one company? Is this an admin or sub-user? Has the L1 user accepted T&Cs? Does the business have eligible accounts? — became the source of truth for design and engineering handoff.
High-fidelity screens were built in Figma across iOS mobile and desktop online banking — full platform parity, every error / empty / loading state accounted for. Below: animated walkthroughs of the message card surface and the in-app introduction.
Message card · in-app awareness
Enrollment · intro & benefits
CTA Mutation
Enroll → Continue. One of the smallest changes in the file — and it prevented duplicate enrollment API calls for already-enrolled businesses. Driven by enrollment status returned from the API at screen load.
T&C Equal-Weight Buttons
"Yes, I Agree" and "No, I do not agree" were given deliberate visual parity. A conscious decision against dark patterns, approved by compliance.
Fee Transparency Placement
The landing page surfaces a clear fee callout before any enrollment action — satisfying the product requirement for explicit fee communication prior to enrollment.
Bilingual-Ready Copy
Short sentences, no idioms, no passive constructions — written translation-ready for EWB's Mandarin-speaking NRA customer base.
Error State Design
Three API-driven error states required careful copy and UX treatment — avoiding alarm while giving users a clear path forward. A fourth state (No T&C) handled the dependency between L1 acceptance and sub-user access.
Pending · Contact Your Administrator
Ineligible · No qualifying accounts
Pending
Sub-user enrolled but L1 hasn't approved. Tone: neutral, action-oriented, no alarm. Warning icon — not error.
Ineligible
Shown when no qualifying DDA/MMA accounts exist, or when an L2/L3 user tries to enroll. Copy directs to Customer Support.
Inactive
Clear dead-end with a dashboard escape hatch. Avoids technical language — communicates the issue without exposing internal status labels.
No T&C
Sub-users cannot access until the L1 user has accepted T&Cs. Communicates the dependency without exposing the internal hierarchy.
Email Touchpoints
A coordinated email arc — campaign, re-engagement, abandoned-enrollment, post-enrollment, and milestone emails — extends the experience beyond the banking app. Copy is approved through compliance and written for EWB's bilingual customer base.
Campaign email · "Now business payments are faster and easier"
04 — Impact
CashFlow Central represented a significant new capability for East West Bank — bringing integrated cash management to a small business customer base that previously had no native solution within the Velo app. The enrollment experience went from zero to a fully designed, compliance-approved, engineering-ready flow in a single product cycle.
Beyond the metrics, the project established a reusable design pattern for framed product integrations within EWB's digital banking ecosystem — applicable to future third-party embeddings with significantly reduced design overhead. The phased BE 1.0 → BE 2.0 framework also set a precedent for iterating customer journeys based on engagement data, rather than releasing a single monolithic flow.
05 — Takeaways
This project sharpened my ability to design inside systems with hard constraints — where the most consequential decisions aren't about visual style, but about information architecture, state management, and the exact wording on a modal button. In financial product design, every unclear state or dead-end screen doesn't just frustrate the user — it erodes trust in the institution itself.
Holding the user experience and the technical implementation model in my head simultaneously was one of the most demanding aspects of this project. The API surface area directly shaped what was possible on screen — and understanding it deeply meant I could advocate for the right UX without proposing technically impossible solutions.
I also learned that compliance review, when treated as a design partner rather than a gatekeeper, actually improves the product. The T&C equal-weight button decision, the fee transparency placement, the plain-language error copy — all were strengthened, not weakened, through compliance collaboration.
Finally, decision-mapping before wireframing saved weeks of rework downstream. Every time a new edge case surfaced in QA, we could trace it back to the decision tree and resolve it systematically.
If I were to run this project again, I'd push earlier for moderated usability testing with actual small business owners — specifically during the business selection flow. The multi-company intermediary pattern worked logically and passed internal review, but I believe there was meaningful room to reduce cognitive load for users managing more than three businesses simultaneously.
I'd also establish a shared error state library with engineering earlier in the process. We ended up designing error states reactively — as each API response scenario was identified during development — rather than proactively mapping every possible API state at the start.
Lastly, I'd advocate more strongly for an A/B test on the landing page CTA copy. "Start using CFC" was the chosen label, but "Get started" and "See how it works" were both strong contenders. Even a small conversion improvement from copy testing would have compounded significantly over the first quarter.
