2023
Debit Card UX Redesign
Relay is an online business banking and money management platform. Working with 2 PMs & 12 engineers, we improved the Relay cards UX to increase card activation and spending rate.
Relay is an online business banking and money management platform. Working with 2 PMs & 12 engineers, we improved the Relay cards UX to increase card activation and spending rate.
Role
Lead Designer
Duration
May–Sep 2023
Project Type
UX Improvement
Launch
Platform
Web & Mobile
Outcomes
+5% New customer card activation & spending rate
Cards Management Layout Improvement
Card spending rate is highly correlated to how easy it is to manage cards. The previous card management layout made it difficult for customers to navigate between cards and view their spending limit. Low visibility into their spending limit often led to unexpected declined transactions.
Working with the team, I explored various ways to view key information without opening each card. After many iterations, I developed a new table layout that displays key information upfront, eliminating the need to open each card.
Other changes I introduced include:
An interactive card component that makes copying the card number, expiry date, and CVV more intuitive.
A redesigned visual aesthetic for virtual cards, making them easily distinguishable from physical cards using thumbnails.
An improved spending limit graph that clearly shows both the amount spent and the remaining balance.
I changed the page to a table layout, so that customers could see crucial information in one place: card type, cardholder, spending limit. Some other improvements include introducing:
An interactive card component to make copying card number, expiry date, and CVV more intuitive
Bar chart for spend utilization to provide better visual affordance of their spend progress
Update copy to be more approachable (e.g. Changing "Access Authorization" to "Shared vs. Individual Card")
Letting user customizing the name printed on card
Changed mutli
Before (left) and after (right) the redesign
Before (top) and after (bottom) the redesign
Before (top) and after (bottom) the redesign
In the mobile app, the Cards tab suffered from a similar navigation issue. If a customer had 10 cards, they had to swipe right 10 times to access their 10th card.
To address this issue, I introduced a drill-down navigation pattern, enabling quick and easy access to any card instantly.
I changed the page to a table layout, so that customers could see crucial information in one place: card type, cardholder, spending limit. Some other improvements include introducing:
An interactive card component to make copying card number, expiry date, and CVV more intuitive
Bar chart for spend utilization to provide better visual affordance of their spend progress
Update copy to be more approachable (e.g. Changing "Access Authorization" to "Shared vs. Individual Card")
Letting user customizing the name printed on card
Changed mutli
Before (left) and after (right) the redesign
Card Creation Flow Improvement
Card activation rate is highly correlated to how easy it is to create a card. Without introducing any structural changes to prevent scope creep, I optimized the card creation flow as following:
Simplified the flow from a multi-page to a single-page form, making it easier to review and edit
Improved clarity in product copy, changing terms like "Access authorization" to "Card type"
Added a component allowing users to customize their name on the card, reducing issues with incorrect or incomplete printing
I changed the page to a table layout, so that customers could see crucial information in one place: card type, cardholder, spending limit. Some other improvements include introducing:
An interactive card component to make copying card number, expiry date, and CVV more intuitive
Bar chart for spend utilization to provide better visual affordance of their spend progress
Update copy to be more approachable (e.g. Changing "Access Authorization" to "Shared vs. Individual Card")
Letting user customizing the name printed on card
Changed mutli
Before (left) and after (right) the redesign
Before (top) and after (bottom) the redesign
Before (top) and after (bottom) the redesign
Learnings
As the sole designer on my team, communicating details to the engineering team was challenging. With hundreds of mockups across multiple pages, it was difficult for engineers to track each change, especially when minor design updates occurred. Discrepancies between Figma's design system files and the codebase's component library, coupled with outdated CSS files, often led to extensive back-and-forth during the QA phase.
I found the most effective solution was to sit with an engineer for like an hour and review the staging branch implementation together. I learned that hyper-detailing in Figma often has diminishing returns compared to making real-time adjustments in the browser and on mobile.
Update: In 2024, Relay hired a Product Design Lead and we're getting the design system project off the ground.
I changed the page to a table layout, so that customers could see crucial information in one place: card type, cardholder, spending limit. Some other improvements include introducing:
An interactive card component to make copying card number, expiry date, and CVV more intuitive
Bar chart for spend utilization to provide better visual affordance of their spend progress
Update copy to be more approachable (e.g. Changing "Access Authorization" to "Shared vs. Individual Card")
Letting user customizing the name printed on card
Changed mutli
Check out my work with Receipt Management →