Understanding the Problem
This case study expands on a concept I submitted to Revolut's CEO as an unsolicited proposal, driven by a specific usability challenge: enabling users to access their card details in fewer taps, without needing to scroll.
The decision to pursue this redesign stemmed from my personal experience using the app, which aligned with anecdotal evidence and internal discussions suggesting many new users did not engage with the card details section on day one. This helped justify a focused UX exploration.
No formal response was received, but preparing and presenting design thinking at that level sharpened how I communicate decisions under scrutiny. This portfolio adopts and expands that original proposal into a complete UX case study.
Faine
Proto-persona based on my own experience of using the app.
Role: UX/UI Designer,
Age: 54
Location: London, UK
Tech Comfort: Very High
Motivation: Efficiency, clean UI, quick access to key features
Pain Points:
- Too many screens to get to basic info
- Confusing label hierarchy
- Feature discoverability hidden in icons
Goals:
- Reduce friction in everyday interactions
- Find flows that work intuitively for fastpaced lives
- Advocate for usable design backed by realworld behaviour
"Accessing my card shouldn't feel like a treasure hunt. I need it fast, during checkout, while verifying identity, or helping someone send me money."
Behaviour:
Regularly documents UI problems during daily use. Advocates for small, high impact fixes over complete redesigns. Often tests flows in multiple fintech apps for comparison.
Priya
(The First-Time Fintech User)
Proto-persona based on general research.
Role:
HR Manager at a mid-sized company
Age:
41
Location:
Manchester, UK
Tech Comfort:
Moderate
Motivation:
Manage household and work-related spending with ease
Pain Points:
- Doesn't recognise icons without text
- Forgets where certain features live in the app
- Gets nervous about exposing sensitive information
Goals:
- Feel safe and confident navigating app features
- Quickly access account/card info when needed
- Trust the app won't "do something unexpected"
"I just want to check my details and move on, why is that buried in layers?"
Behaviour:
Logs in mostly when making online purchases or sending money. Tends to avoid exploring new features unless prompted. Needs clearer onboarding or visual cues.
Luca
(Digital Native, On-the-Go)
Proto-persona based on general research.
Role:
Uni Student, Freelance Creative
Age:
23
Location:
Berlin, Germany
Tech Comfort:
High
Motivation:
Speed, accessibility, minimalist design
Pain Points:
- App is too slow or unresponsive
- Overly complex navigation or too many steps
- Dated user interface or lack of modern features
Goals:
- Execute transactions quickly and efficiently
- Seamless integration with other digital tools
- Visually appealing and intuitive design
"I want to tap once, get what I need, and go. If I'm digging, it's already broken."
Behaviour:
Multitasks across several finance apps. Uses biometric login, face ID, and expects frictionless flows. Highly visual and quick to drop apps that overcomplicate things.
Current User Flow (Pre-Redesign Flow)
The fastest path for a user to access their card details is a multi-step process that is hidden and requires scrolling. To fully document this pain point, I built a high-fidelity prototype that recreates the current Revolut user journey. This allowed me to map the user's emotional state and identify key points of friction that a static journey map cannot fully capture.
📲 Interactive Prototype
Try this: find and copy the card number. Notice how many steps it takes.
Current Flow: Step-by-Step Analysis
Home Screen
Splash Screen
Revolut logo appears while the app loads.
➡️ No functional issue, but adds time before reaching accounts.
Authentication
Biometric or passcode confirmation.
- ✅ Security is essential.
- ⏱ Adds ~2–3 seconds friction.
Accounts Overview
The user sees balance and widgets, but card access is buried.
- Must scroll down to find the card carousel.
- Or notice a small "Card" button in the top-right (low prominence).
- ❗ New users often miss both entry points.
Card Preview Screen
- The user must scroll down the home screen to reach the card widget.
- The selected card is displayed here, but essential details (number, expiry, CVV) remain hidden.
- This creates friction because card access is visually detached from the account overview above, requiring extra movement and effort.
Card Details (Hidden)
Details like number, expiry, CVV remain hidden.
- Requires tapping "Show" (low-contrast icon, not immediately discoverable).
- Anecdotal and published research suggests low-contrast, easy-to-miss actions like this are a common cause of feature abandonment: users often don't register 'Show' as tappable at all.
Copy Action
The user taps "Copy" to take card number.
- ✅ Confirmation toast ("Card number copied") appears.
- ❗ But there's no clarity on how long data stays in clipboard.
- ❗ No auto-masking post-copy, leaving data visible.
Result
The task is complete, but only after:
- 5 screens
- Multiple taps + a scroll
- 12–15 seconds on the fastest path; some test users took around 45.
I identified several low-effort, high-impact "quick wins" designed to reduce friction by refining, rather than replacing, Revolut's existing strengths. These improvements focused on labelling, visual hierarchy, and affordance clarity. The annotated screen examples below visually demonstrate the "before" and "after" of these key design changes, highlighting how targeted UX improvements directly addressed user pain points identified in our initial research.
"Card" Label
Show a clear card label (e.g., 'Main Account') to identify the card quickly.
UX Impact: Improves navigation & reduces hesitation
"Stats" Label
Rename the analytics widget to 'Stats' for clarity.
UX Impact: Increases discoverability
Re-label "Details"
Rename to 'Bank Details' to reduce ambiguity.
UX Impact: Reduces ambiguity
Primary Card
Visually promote the primary card to enhance visual hierarchy.
UX Impact: Enhances visual hierarchy
Chevron (expandable)
Add a chevron to make the widget expandable and improve discoverability.
UX Impact: Improves discoverability
Help
Show a persistent '?' Help icon to reduce drop-off and add a trust signal.
UX Impact: Reduces drop-off, adds trust signal
Branding
Add the Revolut 'R' above the fold to reinforce brand identity.
Ideation & Concept Selection
Before settling on the final layout, I explored three distinct concepts: (1) a bottom-sheet drawer for card details, (2) a dedicated 'Card' tab in the main navigation, and (3) the current 'expanded widget' approach. Concept 3 was selected because it offered the best balance of speed (2-tap access) and familiarity with Revolut's existing design language, requiring the least cognitive load for returning users. Sketches of these alternatives were reviewed during the initial design sprint.
Low-Fidelity Wireframes
Low-Fidelity Wireframing Approach
For this project, I had a clear vision from the outset: to improve the existing card access flow in Revolut without deviating too far from the app's native design patterns. Since the goal was not to reinvent the interface but to refine and streamline it, I used an AI-based wireframing tool to quickly generate layout sketches that reflected familiar mobile UI conventions.
These low-fidelity wireframes served as a starting point, helping me test layout structure and hierarchy efficiently. From there, I manually refined the designs in Figma to incorporate UX best practices, user insights, and better visual hierarchy, all while maintaining consistency with Revolut's established visual language.
While AI helped accelerate the early ideation phase, every design decision, from tap reduction to label clarity, was made deliberately and grounded in user feedback, usability heuristics, and mobile-first design standards. The final UI was built with precision to align with both Revolut's tone and user expectations.
see hand drawn in appendix
Mid-Fidelity Digital Wireframes
These were translated into Figma, focusing on layout hierarchy and iconography.
V1
Multi-Card, Toggle Interaction (No Scroll)
In this early version, I explored a toggle-based interaction for switching between multiple cards directly on the home screen. The intent was to give users immediate, no-scroll access to their cards while testing a less conventional layout.
As I reviewed the interaction in context, several UX concerns emerged. Firstly, the toggle UI deviated from typical patterns seen in financial apps, leading to uncertainty around what would happen when a card was toggled:
Would it expand inline?
Launch a modal,
or open a new screen?
This lack of affordance clarity made the interaction feel unpredictable.
I also noticed potential accessibility and ergonomics issues.
The toggle switches were placed close together, which could compromise thumb reach and tap accuracy, especially on smaller devices or for users with motor impairments.
Visually, the layout lacked a clear information hierarchy: all cards appeared equal, with no emphasis on a primary card or default action, which is especially important in scenarios where users need to act quickly.
V2
Single Card with Direct Actions (No Scroll)
In this second iteration, I moved away from the toggle-based multi-card layout and focused on a clearer, more predictable experience. The goal was to reduce ambiguity and surface key actions more directly, while keeping the experience within the initial viewport (no scroll required).
I kept a single, primary card visible on the home screen and introduced subtle pagination dots underneath as a cue that the area could be swiped horizontally. This mirrors a pattern used in the current Revolut banking app, where users move between cards via horizontal swiping. I kept this familiar interaction to reduce cognitive load and help users recognise what to do without needing to explore.
At this stage, the interaction for revealing card details was still handled through icon-based actions placed directly on the card, such as "Copy card number" and "Copy CVV." These icons were deliberately unlabelled, consistent with Revolut's current UI, but their positioning and visual treatment were designed to feel intentional.
Ultimately, this version helped me realise the need for a more conventional mental model, cleaner spacing, and clearer interaction feedback, setting the stage for the more focused MVP versions that followed.
V3
Final Prototype: Structured, Trust-Centred, No Scroll
This final version builds on everything learned from the previous iterations and is the version I tested with users. The layout preserves the no-scroll experience, placing all core content and actions, including the card and related controls, within the initial viewport.
The card component itself is now more visually grounded and clearly separated from the account controls above. I introduced dedicated actions beneath the card: "Show details," "Freeze," and "Settings," providing users with a clearer, more predictable path to interact with their card. These are persistent and labelled, a shift away from the icon-only approach in V2, making the flow more discoverable and inclusive.
Unlike earlier versions that experimented with toggles or inline icons, this layout places greater emphasis on user control and intentionality. Sensitive details remain masked by default, and the user must tap "Show details" to reveal them, creating a deliberate pause before exposure. This mirrors the current Revolut app pattern and reinforces the idea that trust is built through small, consistent interactions that make the user feel in control.
Users can explore the new design interface in a format that closely mirrors the current Revolut app, but with key usability and clarity improvements.
High-Fidelity Interactive Prototype
📲 Interactive Prototype (HFV3)
Try this: show the card details, then copy the card number.
Key Prototype Interactions
A fully interactive Figma prototype was created to simulate the redesigned card access flow. It includes all key interactions such as:
- Tapping to show/hide card details
- Clipboard copy behaviour with confirmation feedback
- QR code display
- Persistent Help icon interaction
Problem, Process, and Validation
I started by identifying the core problem - users needed 4-5 taps and/or scrolling just to access their card details. This created unnecessary friction for a basic banking task.
Through iterative prototyping, I tested different approaches - from toggle interactions to single card layouts - always keeping the 'no scroll' principle at the centre of each design.
User testing validated my approach. The final design reduced interaction steps from 5+ to just 2/3 taps, whilst improving user satisfaction.
Final High-Fidelity Interactive Prototype
📲 Interactive Prototype (HFV4)
Try this: show the card details, then copy the card number. Notice what appears after you copy.
Following feedback from the HFV3 usability test, the prototype was refined to reduce friction, improve clarity, and strengthen user confidence. While the core layout remained consistent, several meaningful changes were made to enhance discoverability and reduce interaction effort.
These refinements were driven by both usability observations and informal follow-up discussions with participants, highlighting areas of hesitation or uncertainty in the earlier version.
The following screens highlight the key improvements made in the final version of the card access flow:
Simplified Card View
Removed the card stack entirely, keeping only the primary card visible with swipeable pagination dots to show other cards.
Explicit Copy Action
Added a clear, labelled “Copy” call to action to replace the previous unlabelled icon, making the function immediately obvious.
Enhanced Readability
Bolded key text elements to improve visual hierarchy and scannability, guiding the user's eye to important information.
Consistent Visual Grouping
Utilised colour coordination to reinforce grouping of related elements and align with native Revolut design patterns, ensuring familiarity.
📚 Design Principles Applied
While not listed outright in the interface, this iteration reflects core UX principles woven into the execution:
Reduced Interaction Cost through fewer taps and better defaults
Improved Affordance with clear labels for key actions
Stronger Visual Hierarchy to guide attention intuitively
Reinforced Trust Signals via masked card details and copy confirmation
Lowered Cognitive Load by aligning with familiar patterns and simplifying UI density
This redesign demonstrates the power of direct user feedback, even in an informal setting. By listening to users' verbal hesitations and preferences, I was able to make a small but critical change that transformed the experience from "good" to "great."
The final design, which includes clear text labels on all critical actions, not only makes the process faster but also builds a stronger sense of trust and clarity, directly impacting user confidence and, ultimately, business success.
Key Documents & Resources
Low fidelity V4 wireframing
USER SURVEY
Google Docs
Quick Feedback: Accessing Your Card Details in a Mobile Banking App
I'm collecting feedback on a redesigned card access flow for a mobile banking app (inspired by Revolut). The goal is to understand how users feel during the process — especially around clarity, speed, and security. This will take less than 2 minutes. Thank you for helping me improve the design!
RESPONSES USER SURVEY
Google Docs
Quick Feedback: Accessing Your Card Details in a Mobile Banking App
I'm collecting feedback on a redesigned card access flow for a mobile banking app (inspired by Revolut). The goal is to understand how users feel during the process — especially around clarity, speed, and security. This will take less than 2 minutes. Thank you for helping me improve the design!
Thank You for Reading
What started as a small frustration turned into a closer look at how Revolut handles clarity and trust.
If you'd like to talk it through, or just say hello, I'd love to hear from you.
Revolut Case Study - UX/interaction design