Add or Replace Card
Web responsive re-design
Timing
12 weeks
Tools
Sketch & Zeplin
Personal Contribution
Overall design and flow from start to finish
The Challenge
Updating the design for the current Replace or Add Card flow experience.
Consolidating steps 2 and 3 of the existing flow to eliminate multiple steps in the experience.
Discover.com offers all its credit card member numerous card art designs to choose from.
Old Flow
Data insights
An account holder can have multiple users/cards on their account.
A user can “Add a Card(s)” or “Replace Card(s)”.
The user may not understand what “replacing a card” or “Adding a card” means.
Wireframes and design explorations
I brainstormed with the creative team about how we could design this page, and we quickly came up with a couple of possible solutions. This brainstorm helped me move faster with designs and gave us time to review internally before sharing with the clients.
New Flow
Key highlights:
New card art gallery layout for easy browsing
Marquee highlights the quick “3-steps” for adding or replacing card art.
Combining steps 2 and 3 from the old flow with a progressive disclosure after “Add Card” or “Replace Card” is selected, making it a one-click process.
Tooltips were added to highlight any ambiguity about the banking jargon, like, “What does adding a card mean?”
Replace Card
The three-step flow for “Replacing a Card” below is quick. The default selection of your current card and a progressive display at the bottom right before the Submit button make it easy and fast for the user to get to the confirmation screen.
Replace Card multiple users/cards and errors
Discover.com lets a user add additional users, and this screen reflects that by showing a dropdown with the listed users on the account and displaying all the cards that the user activity has. A user can have max 4 cards and 4 authorized users.
Error state when the user clicks the submit button without selecting a card to replace.
Error state for when there is no active card on file
Add Card flow
Adding a card follows the same three step process simplifying the old flow.
Add Card multiple users/cards and errors
Replace Card mobile screens
Various scenarios in the replace card flow include an error state for when a user does not select a card before clicking the “Submit” button.