Shipped
Shipped
6 Weeks
· UX-led explainer concept
· Storyboarding & style definition
· Cross-team motion collaboration
Conversion increased from
15% → 35% among users who watched the explainer.
Here’s a quick summary
I was added to the Gas vertical redesign alongside Swathin, our Senior Visual Designer to strengthen the UX at key touch points as a phase 2 release, since the phase 1 release improved only the visual consistency, but claim conversion remained low,
Phase 1 vs phase 2
Phase 1 release revealed that the underlying issue was clarity, not aesthetics. That's why Phase 2 focused on solving the real problem that is; clarity at the moment of cash-back claim.
Phase 1 -
UI update
Multiple Cashback Paths
Unlike other vertical flows, the Gas Cash-back experience combined multiple claim paths. Once a station is selected, gas cash-back can follow different paths like:
Which meant one thing:
Claim conversion was the business-critical moment.
With a two-week timeline assigned, I needed a fast, structured way to diagnose usability gaps, without running a full user study, so I chose a heuristic evaluation.
I evaluated the Gas cash-back flow against core usability principles and reached following insights:
In summary,
Observed User Behavior
A significant portion of drop-offs occurred at card confirmation and receipt validation steps
of users opened the “How it works” sheet before initiating a claim
closed the “How it works” sheet within 5 seconds among users who opened it
of claim attempts required retries due to eligibility or flow confusion
This suggested that:
Instructional content was being skimmed or skipped.
Users were initiating claims without fully understanding the sequence.
Comprehension friction was affecting successful completion.
Rather than redesigning the entire details page, the focus was on two high-leverage interventions:
1.
2.
The strategy aimed to:
Protect the claim conversion moment by reducing cognitive load
Improve mental model for users
Increase their confidence before initiating claims
Shell Rewards required registration before refuelling. But this requirement wasn’t visually emphasised.
Instead of reading multiple steps, users could understand the sequence in seconds.
The explainer:
Reduced cognitive effort
Reinforced eligibility rules visually
Improved clarity of claim timing
Increased confidence before tapping “Claim Cashback”
o design the explainer, we translated Way’s existing isometric visual language into motion.
Since the app already used isometric object illustrations, maintaining visual continuity was essential. We explored a few motion references and established a simple isometric video style with minimal colors and action-focused transitions to keep the experience clear and consistent with the product.
Story boarding
I first documented the steps in words to establish intent and order, and then translated them into storyboards to visualize pacing, transitions, and system responses.
3D Assets creation
Created a reusable set of isometric assets aligned with the app’s visual language
Motion styles & Cues
Embedded motion stages and cues, specified transitions, emphasis moments, directly into the storyboard and documented it to support smooth handoff to motion production
Users who watched the explainer were more than 2x as likely to successfully claim cash-back, indicating a clear uplift in engagement.
35%
Conversion among full video watchers
15%
Conversion among non-watchers
This project showed me that not every problem requires a full redesign. Working within system and engineering constraints pushed me to focus on clarity at critical interaction points, which ultimately improved claim conversion. It reinforced that good UX often comes from making complex systems easier to understand, not necessarily simpler.