Rethinking Prepaid Card Interactions
From a rush‑launched MVP into a polished, reliable tool for Indian taxi drivers and fleet managers, boosting speed, clarity, and Shell brand trust.
User Experience
User Interface
Visual Design
Prepaid card management
I worked on the the UX/UI overhaul of Shell’s internal Technology Delivery Portal, transforming it from a cluttered, content-heavy resource into a clear, user-first knowledge ecosystem. By auditing and restructuring the portal’s information, breaking dense text into modular components, streamlining navigation, and reinforcing visual consistency with Shell’s brand, I was able to significantly improve the user experience.
Our observations:
-
+40% in Content & Structure clarity
-
+32% in Approachability of content
-
+28% in Comprehension of information
-
+32% in Information recall
These improvements not only made the portal far easier to use, but shifted internal sentiment from "too dense" to "go-to resource" across Shell’s global P&T teams.
Explore similar projects:
01-Moving beyond the MVP
The prepaid app operates with one mission in mind:
The experience of this app is to be smooth, fast and quick.
One of the essential pillars of Shell's fleet experience is their prepaid card app.
Shell launched an MVP of the Fleet Prepaid app targeting fleet cardholders and taxi drivers in India. The initial version was functional but rushed. The styling was inconsistent, branding was weak, and user flows were cumbersome. I was brought in to rethink both UX and UI details across the app and evolve the flow based on how taxi drivers actually used it.
The prepaid feature and app has been widely used by taxi drivers, further extended by collaborations with Uber for providing it to its registered drivers.
The prepaid app is inherently a clean system for an individual's use in buying, reloading and purchasing, along with its utility for fleet managers to organise, manage transactions and topup cards for the drivers.
YEAR
2022
TYPE
B2B2C
Context
The app provides essential features: card login (including fleet admin roles), viewing balances and transactions, virtual QR payments, loading money via gateway, PIN setup, and station locator functions. Designed originally under tight deadlines, the MVP offered minimal visual polish and lacked branding coherence. Taxi drivers, our key users, struggled with usability in real-world workflows, generating a clear need for redesign and refinement.
"We are not expecting large top ups on the cards. So ensure that while the app is for the card to be quick to access and quick to use, the number of transactions for card reloads will all add up. In the background, that is to be the most important thing we focus on."
Manager from Prepaid for Fleet team, Shell
My Role
Essentially, I conducted work in the following areas:
User Experience
Analysing the failures of the MVP and redesigning the experience to suit real world application
User Interface
Creating the ways to bring forward the main offerings of the app and channel coherence in use
The MVP of the Shell Fleet Prepaid app needed substantial improvements and rethinking of UX and UI pathways, driven by real user experiences. While the core e‑wallet building blocks like balance view, QR payment, and PIN setup were functional uncovering deeper pain points in taxi driver workflows became essential. To address these, I re-engineered UX flows, redesigned visuals to align with Shell’s branding, and introduced new screens as driver use cases evolved.
In this project, I worked closely with developers and stakeholders managing various facets of Shell Prepaid (Fleet). I leveraged insights from internal team members on the financial behaviors of taxi drivers, as well as strategic plans for future Shell integrations. Because driver usage behavior remained central to decision-making, we could anticipate new flows and proactively design for them.
02-Analysis and Strategy
Identifying UX Pain Points & Research Insights
Before jumping into high-fidelity designs, I focused on understanding how prepaid fuel usage fits into a driver’s day. Who are we designing for? What decisions do they need to make quickly? And how should the app support those moments without friction?
Learning more about the app
Though functionally viable, the app's interactions and branding were inconsistent and uninspiring. Screen designs lacked coherent visual styling, and error or loading feedback was minimal. My aim was to elevate every detail, from login to QR transactions, ensuring the interface looked and felt like a trusted Shell product while addressing usability gaps.
4 Weaknesses
Opaque card-loading experience with unclear status and silent failures.
Missing or inaccessible transaction details, undermining fleet admin transparency.
Slow, cumbersome QR payment invocation, unsuitable for quick fuel-stop workflows.
Weak visual consistency and diluted Shell branding across screens.
SOLUTIONS
Rethinking the Card Loading Journey
-
Added step-by-step confirmation and retry/cancel buttons.
-
Improved microcopy to clarify each stage and retry rationale.
Transaction Screen Rebuild
-
Created a redesigned details panel with station name, fuel quantity, date, and amount.
-
Implemented expandable views and sorting/filtering for admin ease.
Speed‑Oriented QR Flow
-
Introduced separate Landing and Card Details screens, enabling immediate QR access.
-
Persistent QR preview reduced taps and streamlined scanning at pumps.
UI Consistency & Brand Reinforcement
-
Defined a visual style guide: standardized color, typography, button style to reflect Shell branding.
-
Applied consistent UI standards across dashboards, load flows, transaction screens, and error states.
Design from listening and learning
The journey of the project took me through steps that enlightened me about the product usage and push several micro changes that I believed, and later learnt, improved the app experience.
The mapping of pain points, and insights on driver workflow were crucial in building a basic understanding of the app. From there I went on to make several user routes, and tinkered with shortcomings and improvements in them. A great deal of thought was put into refining login/QR flows, redesigning transaction information (histories, individual transactions details and more).
As my work at Shell included a lot of visual design for Shell's B2B and B2B2C functions, I had a good grasp on the identity of the company and how to apply it on a product.
Bring clarity and swiftness
For this in particular, I tried to create a balance in a minimal app that was aligned to Shell's look and keeping things a bit bold, enlarged, even loud in places to not have it appear too distant or cold for an audience who are used to visually engaging applications on their phones.
03-Some details I spent time on
[or stuff that kept me up at night]
These brought about interesting questions that had me diving into research and looking through patterns of digital behaviour on other apps with the same target audience . These were also investigated and supported by simply experimenting to distill the right approach.
Login fields
I initially designed a tabbed login that allowed users to toggle between mobile and email input, a common pattern in modern apps. But during stakeholder discussions, we doubled down on the stacked button layout.
The concern? In initial testing it was observed that the login process was slow, or delayed due to lag or confusion. The team prioritised minimum steps to login, i.e. minimum steps to the card. And with that, keeping separate login buttons for the input options was eventually the ideal we went ahead with.
This wasn’t a visual choice. It was a choice for speed, to reduce friction.
A quote that stayed with me in one of the discussions was, "It can look ugly, but it has to be fast."
And it made me ask: Should good design follow trends, or follow people?
The final design looked more old-school, but it did something the other didn’t: reduced the taps on the screen + reduced ambiguity.
Pixel-perfect vs. perfectly invisible
This one kept me up because I couldn't stop seeing it, even if no user ever would. The alignment of the elements on the card page created a barely-there tension. I tested both: aligning to the card vs. aligning to the validity date.
Did it matter? Inconclusive. But it mattered to me, to my eye.
Design is made of micro-decisions, and this was mine to make. Eventually, I aligned to the card, the more dominant of the information presented. It may look off but feel right, versus the other which would look right but feel off.
Consistent icons = Consistent confidence
Further reading: Maintain Consistency and Adhere to Standards / Icon Usability
Across the app, icons for the same actions appeared in different styles, directions, and visual weights. What you're seeing here is just one example, but the inconsistency was everywhere.
I rebuilt the full icon set to enforce visual consistency, not for aesthetics, but for cognitive clarity.
According to Nielsen Norman Group, inconsistent visual elements increase cognitive load by breaking recognition patterns. When the same task is represented differently in different places, users pause, wondering if they’ve missed something. I really like this statement from that article, "Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions."
This kind of decision making isn't about making the app prettier, but about removing decision fatigue. If tapping “Load Card” looks different in two places, the experience starts to feel unreliable.
Can red mean money?
In the MVP, the remaining balance was displayed in Shell’s brand red. But red doesn’t just carry brand equity, it also carries emotional weight, especially in fintech contexts where red often signals loss, debt, or failure. I chose to switch it to a Shell-approved secondary blue, a calmer, more neutral visual cue.
There was some debate on this. At Shell, especially with my role of Product and Visual design, carrying a consistency across all the work I touched at the organisation was essential. A lot of the perception about this consistency was to use the primary colours of Shell. So taking such instances and setting examples on how to expand into secondary palette was vital for the ever evolving brand language of Shell.
In an app where users check balances daily, clarity matters more than consistency. This wasn’t a branding compromise, it was a readability correction.
Improvements after the redesign
The Shell Fleet Prepaid app has been installed over 100,000 times via Google Play. It is part of the daily lives of drivers and is required to be efficient at all times.
~25–30%
Reduction in time for loading the card
~20%
Login delays reduced
~15%
Active daily usage increase, within 3 months post-redesign
"Simpler"
Internal user feedback on the new UI
To explore more projects, click here.