Twid enables users to use their accumulated rewards as a payment method across merchants. The challenge wasn't simply to redesign the interface—it was to make a relatively unfamiliar payment behaviour feel simple, predictable and trustworthy.
Client:
TWID
Role:
Senior UX Designer
Scope:
Product UX · Interaction design · Design system thinking · Email marketing
Sector:
Fintech
Outcome:
30% reduction in reward redemption time
The core design question
How might we reduce the mental effort required to understand, choose and redeem rewards—without removing the information users need to feel confident about the transaction?
Product context
How might we reduce the mental effort required to understand, choose and redeem rewards—without removing the information users need to feel confident about the transaction?
The priciple
Earn rewards
↓
Discover rewards
↓
Pay with rewards
↓
Receive confirmation
Users aren't simply redeeming a coupon. They are effectively using an accumulated value as part of a payment transaction.
The problem I framed
The problem was not UI clutter. It was decision friction.
Existing Web UI
The current experience places unnecessary cognitive load on users due to the absence of a clear visual hierarchy, making it difficult to identify the most important information and actions at a glance.
The reward selection feels unnecessarily heavy, particularly in scenarios where only a single reward option is available.
The existing mobile UI
Outdated and visually cluttered, making it difficult for users to quickly understand and navigate the interface.
The information hierarchy is weak, with insufficient distinction between primary and secondary content, causing everything to compete for attention.
The excessive use of multiple colors reduces consistency and creates a fragmented visual experience, ultimately weakening the product's visual identity.
Design decision #1
The established principles for the system
Decision: Automatically select the only available reward.
Decision: Use contextual feedback and micro-interactions rather than relying only on static UI.
Decision: Prioritise the amount, reward value and primary action.
Decision: Optimise the primary redemption journey while handling edge cases contextually.
Decision #2
Designing the redemption system
Instead of designing each screen independently, I mapped the experience around user state.
The UI changes depending on the state, rather than forcing every user through the same interaction model.
Revamped UI
Hassle less flow for user to accomplish Pay with Rewards.
Revamped UI
If there is only one valid reward, automatically surface it and move the user directly toward payment.
Option considered and the decision
Keep existing selection
Auto-select the reward
Remove reward selection entirely
I wanted to remove unnecessary interaction without hiding important information.
Decision #3
What I deliberately avoided
Adding another confirmation step
Making users manually select a single reward
Showing unnecessary reward information during checkout
Introducing additional navigation
Using animation where static feedback was sufficient
More UI is not equal to more clarity
UI animations
Feedback as part of the transaction
Tap Pay
↓
Processing state
↓
Reward applied
↓
Payment confirmed
Revamped UI
The user had to navigate through unnecessary steps.
Decision
Collapse ancillary steps into the primary payment journey.
Why
The user's intent was already clear; additional navigation added friction without adding information.
Result
A shorter path to completing payment.
Old UI
New UI
My contribution
UX audit of the existing redemption journey
Information architecture
Interaction model
Reward selection logic
Responsive/mobile experience
Interaction and motion design
Collaboration with Twid stakeholders
Final UI design
I collaborated with
Product/business stakeholder
Twid leadership