Product Design
Streamlining Card Management for efficiency — My OneCard Redesign
My Role
• Product Designer
• UX Researcher
Tools
• Adobe XD
• Figma
• Zepplin
• InVision
Collaborators
• Senior Designers
• Product Manager
• CX Team
• Developers
Project Duration
5 Weeks
↳ Research: 2 Weeks
↳ Design: 2 Weeks
↳ Interactions: 1 Week
At a Glance
Overview
OneCard is a premium, mobile-first credit card platform with over $1.4B valuation and 10M+ app users.
I redesigned the "My OneCard" section — the hub for card controls, statements, and security features — as part of their next-gen platform evolution, OneCard 2.0.
600K+
Card Users
$262M
Funding Raised
$1.4 Billion
Valuation (FY23)
Metal
Credit Card
Contributions
Ownership
Led the redesign independently — from research and wireframes to final handoff.
Teamwork
Synced with Senior Designers, PM and CX teams for feedback loops.
Reality Check
Balanced ideal UX with real-world constraints (Flutter, cross-platform, tiny screens).
solution
Interactive Dashboard
Transformed 3 screens into an interactive, thumb-friendly dashboard.
Unified Scroll
Unified key actions into a single, ergonomic scroll experience.
Enhanced Security
Implemented time and interaction based security measures for protect card details.
Impact
5–7s Faster
Task time to lock card or find statements dropped significantly.
3 → 1 Screens
Previously scattered actions were consolidated into a single, seamless screen.
~50% Less Tapping
Cut down excessive taps and screen shifts by harnessing scroll gestures in navigation,
90% Success Rate
Majority of users completed key tasks without any external help or guidance during usability tests.
Before
After
Project Overview
OneCard is a fast-growing FinTech company based in Pune, India, valued at $1.4B with over $350M+ funding as of FY23.
They offer two key products:
OneCard — a premium mobile-first metal credit card.
OneScore — a free credit score
tracking platform.
In March–April 2022, I joined OneCard as a Product Design intern, focusing on redesigning the critical “My OneCard” section of their mobile app — the hub where users control their card settings, view statements, manage EMIs, and access security features.
At the same time, OneCard had begun laying the groundwork for OneCard 2.0 — a refreshed mobile platform aiming for stronger UX, performance, and scalability.
My work was intended not only to solve immediate usability issues but to build a foundation that could support OneCard 2.0’s vision for the future.
My Role
I worked independently, coordinating with customer experience teams and senior designers for feedback checkpoints. As the lead designer for this feature, I drove the full end-to-end process:
The app was built on Flutter, meaning the redesign had to:
Work across both Android and iOS.
Adapt to a wide variety of screen sizes — especially smaller phones where real estate is a premium.
Problem Statement
The original "My OneCard" section, while visually polished, had serious UX flaws:
The card graphic dominated the screen, occupying up to ~40% of vertical space on smaller devices. [1]
Essential controls (Freeze Card, Set PIN, NFC toggle, Copy Number) were hidden inside multiple layers of navigation. [2]
Important information like EMI summaries or Statements were buried deep and not discoverable without significant effort. [3]
UI inconsistencies like incorrect NFC icons led to confusion and hesitation. [4]
Result
Common tasks like locking a card, copying card details, or viewing statements required multiple taps and excessive scrolling, causing frustration especially among busy or less tech-savvy users + users with smaller screen sizes had the static card take up over ~60% of the space on their device.
Redesign Goals
To address these problems, I set clear guiding goals for the redesign:
Optimize Screen Space
Reduce wasted real estate; prioritize functional elements over decorative graphics.
Reduce Scrolling and Navigation Depth
Make essential controls and information accessible within 1–2 interactions.
Restructure Information Architecture
Logical grouping and progressive disclosure of content to guide users naturally.
Ensure Cross-Platform Consistency
Designs must feel intuitive on both Android and iOS devices using Flutter’s shared environment.
User Research & Insights
To root design decisions in user reality rather than assumptions, I carried out a multi-layered research strategy:
01
Guerrilla Interviews with Internal Users
I conducted casual interviews with over
8 OneCard Users across departments.
By engaging them during breaks or post-meeting moments, I captured spontaneous feedback about how they used the app and what frustrated them.
02
Support Feedback
Analysis
I worked with the Customer Experience team to review real customer tickets.
Patterns emerged where users repeatedly asked:
How do I freeze my card?
Where can I find my statements?
How do I manage EMI payments?
This highlighted systemic navigational and discoverability issues, not isolated confusion.
03
Telephone Conversations with Real Customers
Arranged through the CX team, I held 4 short telephone calls with active OneCard users who had previously complained about app navigation.
Rather than scripted surveys, these were free-flowing conversations where users described their pain points organically.
Some quotes that stood out:
"I feel the card section looks beautiful, but when I actually want to do something, it’s not obvious where to start."
"After a while, I gave up looking for my billing information — thought maybe it's just not available."
These conversations built direct empathy and crystallized the real user needs beyond assumptions.
Key Pain Points Identified
Excessive vertical scrolling, especially painful on smaller screens.
Critical actions hidden too deep into menus.
Confusing or non-intuitive icons causing hesitation.
Missing feedback created doubt about successful actions.
Ideation & Planning
Armed with these insights, I broke down the redesign approach into two major parts:
Part 1
Optimizing the Card Area
The existing large static card graphic, while visually impressive, was wasting valuable space.
I explored ways to:
Shrink the card without losing brand value.
Make the card interactive — allowing direct actions like Lock Card or Copy Card Number.
Anchor the card at the top as a functional dashboard element rather than a decorative centerpiece.
Part 2
Structuring the Content Area
For everything beneath the card, the goal was to:
Surface critical content (Statements, EMIs, Vault) without deep navigation.
Group related actions logically.
Reduce friction through clear, visible sections with recognizable icons.
Early Sketches & Wireframing
To move quickly, I began with low-fidelity sketches and whiteboarding sessions:
Key Sketch Explorations:
Shrinking the card into a slim header-like presence while keeping it visually impactful.
Creating a set of quick action icons directly overlaid on the card (Lock, NFC, Copy).
Experimenting with wallet-inspired stacked card layouts to hint at navigation layers — later dropped based on usability concerns.
Iterative Design Process
I moved from sketches into mid-fidelity mockups, iterating across 7+ versions. Here are the key turning points:
Iteration 1
Horizontal Card Tilt
Slightly shrunk the card. Minor space saved, but didn’t dramatically improve usability.
Iteration 2
Card as a thin header
Converted the card into a thin header strip. Solved space issues but lost emotional connection to the "metal card" brand feel.
Iteration 3
Wallet Stack Concept
Tried layering sections like wallet cards. Users found it confusing and non-intuitive during quick tests.
Iteration 4
Side-by-Side
Pulled up the card controls as a side bar on right so that the top are a is fully dedicated to card + controls. It helped reduce the vertical scroll but felt odd.
Iteration 5
Unified Single Scroll
One main card at top:
Anchored, tilted, interactive.
Underneath: content sections neatly stacked (Statements, EMIs, Vault, Rewards, Settings).
Single, progressive scroll — no deep-diving into submenus.
Navigation Flow
Simplified, gesture-first access to card controls and essential actions
This new interaction model replaces fragmented layers with a centralized, gesture-driven experience.
Key actions like copying the card number, freezing the card, or checking transactions are now accessible via natural swipes and minimal taps, reducing cognitive effort and aligning with thumb ergonomics.
By structuring the card as a gateway to controls and details, and consolidating interactions into a fluid vertical flow, users complete high-priority tasks in seconds, without ever feeling lost or backtracking.
Final Design Outcomes
Key Improvements
Combined 3 different screens into 1 seamless interaction-centric screen.
Card shrunk ~30% and made functional — acts as a mini dashboard.
Top 3 controls one tap away (Lock Card, Copy Number, NFC toggle).
Statements, EMIs, Rewards surfaced clearly within the first screen height.
Figma Prototype
My OneCard
Primary Screen
Drawer Open
Card Controls
Card Details
Card Controls
Scrolled
Annotated Details
Card tilted at an angle embracing the depth and lighting effects off a physical metal card
Reduced the static card and saved ~40% space resulting in increased usable screen estate
Gesture-centric drawer that can be easily accesssed
Instructions retained to make action very clear for the user
Better contrast ratio with the existing status hex codes
My OneCard
Primary Screen
Retained the original tap-to-flip gesture to make the interaction prediction-free and leverage the familiarity existing users have
Copy Card Number
CTA retained
Card controls and more options are retained and teased prompting the user to scroll
Card Controls
Caution message added to make the users aware and protecting sensitive information
Navigation UI gets hidden to avoid unplanned taps. Gets retracted upon going back to the previous stage.
Inspired from traditional banking apps that log you out after a certain interval of inactivity.
Countdown timer for visibility of the card details. After 20 seconds the card flips back and goes to the original state to protect card details from prying eyes.
Card Details
Transactions Drawer
Drawer overlays on top of the existing content making it easier to access transaction menus.
Usability Testing and Validation
To validate the redesign
Guerrilla Testing
Conducted quick usability sessions with 8 colleagues (non-design backgrounds).
Structures Task Test
Set up 2 scenario-based tasks (Lock Card + Find Statement) and recorded time to completion.
Feedback Recording
Took notes on user confusion points, friction areas, and emotional reactions.
Results from the tests
Task time reduced by ~5–7 seconds for Lock Card and Statements.
~90% users completed critical actions without needing guidance.
Users described the new flow as “obvious,” “smooth,” and “less effortful.”
Estimated Impact
Metric
Before
After
Scroll Depth
2-3 Screen Heights
~1.5 Screen Height
Clicks to Lock Card
3-4
1
Discoverability (Statements/EMI)
Low
High
User Task Time
~15 Seconds
~7-10 Seconds
Reflection
This project reinforced an essential truth for me
Good design isn't just about making things usable — it's about making essential things effortless to find.
Working under real-world constraints — Flutter quirks, small screen challenges, limited timeframes — I learned the value of ruthless prioritization, clarity, and empathetic iteration.
While OneCard 2.0 as a project is still in works, the "My OneCard" redesign laid down a future-ready UX foundation: A faster, simpler, more empowering experience that truly puts users back in control of their financial lives and creative experiences that are inclusive of all people, platforms, prioritites!
Liked what you read?
Other Projects
Dive into other projects!
