PRODUCT DESIGN
VISUAL DESIGN
DEC 2021 — FEB 2022

Enhancing Convenience in Credit Card Management

Enhancing Convenience in Credit Card Management

Collaborated With

OneCard, FPL Technologies, Pune

The team

Design Lead, Product Designer, 2+ Product Managers, 3+ Developers

Role

Contract Product Designer

scope of work

Experience Strategy, UX Design, Visual Design

My Responsibilities

UX Design

Visual Design

Cross-Functional Collaboration

Overview

OneCard is a metal credit card introduced by FPL Technologies, an Indian fintech company, to redefine the credit card experience with simplicity, rewards, and a mobile-first approach. OneCard differentiates itself from traditional credit cards by offering sleek metal design and app-based management.

To enhance the user experience, the OneCard app required significant updates in its post-onboarding section, focusing on streamlining the user journey and digitizing core features. These updates aimed to address essential user needs, such as card delivery tracking, card activation, transaction analytics and query management. The focus was on integrating intuitive workflows, optimizing usability, and ensuring consistency with OneCard's brand ethos of delivering a simple yet sophisticated digital experience.

To enhance the user experience, the OneCard app required significant updates in its post-onboarding section, focusing on streamlining the user journey and digitizing core features. These updates aimed to address essential user needs, such as card delivery tracking, card activation, transaction analytics and query management. The focus was on integrating intuitive workflows, optimizing usability, and ensuring consistency with OneCard's brand ethos of delivering a simple yet sophisticated digital experience.

To enhance the user experience, the OneCard app required significant updates in its post-onboarding section, focusing on streamlining the user journey and digitizing core features. These updates aimed to address essential user needs, such as card delivery tracking, card activation, transaction analytics and query management. The focus was on integrating intuitive workflows, optimizing usability, and ensuring consistency with OneCard's brand ethos of delivering a simple yet sophisticated digital experience.

NEW FEATURE

NEW FEATURE
NEW FEATURE

Card Delivery Tracking

Card Delivery Tracking
Card Delivery Tracking

To elevate the unboxing experience for users receiving the card, we designed an elaborate delivery tracker that detailed the entire delivery journey.

The goal was to craft a set of distinct illustrations that visualized every step of the delivery process while adhering to OneCard’s brand language and maintaining visual consistency across the app. Each illustration needed to effectively convey complex logistics in a simple, engaging, and aesthetically pleasing manner.

Delivery Tracker

We anticipated common delivery hiccups, such as delays or missed attempts, and designed intuitive workarounds with clear call-to-actions. These ensured users felt informed and in control at all times, reinforcing trust in the delivery process and the brand's reliability.

We anticipated common delivery hiccups, such as delays or missed attempts, and designed intuitive workarounds with clear call-to-actions. These ensured users felt informed and in control at all times, reinforcing trust in the delivery process and the brand's reliability.

We anticipated common delivery hiccups, such as delays or missed attempts, and designed intuitive workarounds with clear call-to-actions. These ensured users felt informed and in control at all times, reinforcing trust in the delivery process and the brand's reliability.

Delivery Tracker

Delivery States

NEW FEATURE

NEW FEATURE
NEW FEATURE

Card Activation

Card Activation
Card Activation

Card Activation followed immediately after the card delivery process, guiding users through essential steps such as verifications and setting up their card PIN. This phase was designed to be seamless and quick, ensuring that users could promptly and securely activate their OneCard once they receive it.

Card Activation followed immediately after the card delivery process, guiding users through essential steps such as verifications and setting up their card PIN. This phase was designed to be seamless and quick, ensuring that users could promptly and securely activate their OneCard once they receive it.

Card Activation followed immediately after the card delivery process, guiding users through essential steps such as verifications and setting up their card PIN. This phase was designed to be seamless and quick, ensuring that users could promptly and securely activate their OneCard once they receive it.

Card Activation - Call to Action on Dashboard

Activation Process

End States

IMPROVED FEATURE

IMPROVED FEATURE
IMPROVED FEATURE

Transaction & Analytics

Transaction & Analytics
Transaction & Analytics

A key component of the OneCard app was providing users with a comprehensive view of their transactions, including spends, refunds, and repayments. Users could track their spending patterns, identify top spending categories, and see the merchants they used most frequently.

Spends and Analytics

In addition to an overview, users could access detailed information for individual transactions, such as status updates and options to attach notes, upload bill images, or categorize expenses for reimbursement lists. The app also offered actionable insights by displaying EMI eligibility, points redemption options, and available offers linked to specific transactions, enhancing both usability and engagement.

Transaction Details

IMPROVED FEATURE

IMPROVED FEATURE
IMPROVED FEATURE

Ticket Management

Ticket Management
Ticket Management

This module focused on addressing a critical issue in the older version, where tickets related to the same issue were scattered and disorganized. The goal was to redesign the ticket pages to group related tickets together, creating a more intuitive and structured experience. This not only made navigation easier but also helped reassure users, who are often in a state of panic when registering a ticket or checking for updates.

Support Tickets - Partially Expanded - Fully Expanded

Reflections
Key-Takeaways & Learnings

An agile design process with cross-functional teams allowed for regular feedback loops, rapid iterations and alignment with user needs, ensuring continuous improvement based on real-time feedback.

An agile design process with cross-functional teams allowed for regular feedback loops, rapid iterations and alignment with user needs, ensuring continuous improvement based on real-time feedback.

An agile design process with cross-functional teams allowed for regular feedback loops, rapid iterations and alignment with user needs, ensuring continuous improvement based on real-time feedback.

A clean, intuitive interface not only improves usability but also enhances user engagement. Thoughtful visual design makes financial features more accessible and builds trust—crucial for a financial product.

A clean, intuitive interface not only improves usability but also enhances user engagement. Thoughtful visual design makes financial features more accessible and builds trust—crucial for a financial product.

A clean, intuitive interface not only improves usability but also enhances user engagement. Thoughtful visual design makes financial features more accessible and builds trust—crucial for a financial product.

What could be done differently?

The absence of a unified design system led to inconsistencies across features. Implementing a comprehensive design system early on would have streamlined the process, improved consistency, and facilitated better collaboration.

The absence of a unified design system led to inconsistencies across features. Implementing a comprehensive design system early on would have streamlined the process, improved consistency, and facilitated better collaboration.

The absence of a unified design system led to inconsistencies across features. Implementing a comprehensive design system early on would have streamlined the process, improved consistency, and facilitated better collaboration.

You’ve reached the end. Thank you for stopping by.

You’ve reached the end. Thank you for stopping by.

You’ve reached the end. Thank you for stopping by.