Reducing friction for customers in a multistep checkout flow
Working for Capital One as an experience design intern, I worked to redesign an existing flow on the Capital One Shopping platform in which customers redeemed points for gift cards to reduce friction and increase clarity in the process. The existing flow left many users confused and frustrated due to poorly designed and composite steps.
Role
Experience design intern
Teams
Capital One Wikibuy product design team
Timeframe
5 weeks, June to July 2020
The Problem
The current flow for customers to redeem points for gift cards is cumbersome and causes frustration and confusion due to unclear hierarchy and steps. The objective was to keep the same content but further inform the customer about the process they are completing, while simplifying the steps and hierarchy.
My Process
Establishing the problem
Analyzing the Information Architecture
The Before State
The before state of the gift card redemption flow failed to show customers which gift cards they qualified for. Also within the process of redeeming and completing the “purchase” the unclear hierarchy left customers confused as to what they should do first.
Flow Outline
First to organize the content that needed to go into the flow I made an outline using sticky notes in Figma to map each step of the process and what content should be available to the customer then.
Wire-framing
Next, using the flow outline I created, I designed wire frames to show a rough draft of what the content would look like within the flow. Some important features I added were: a progress bar for users to understand where they are in the process, simplifying different steps into separate pages to eliminate confusion of what to do first, and a jumping off point for users to immediately start shopping once they completed the redemption process.
Final Design
The final flow was prototyped using Figma, and the specific design callouts can be found below.
This progress bar shows the user where they are in the process as well as which steps they have completed. It also works as navigation to allow users to go back and forward between steps if needed.
This gift card amount selector with pre-populated buttons prevents users from selecting an amount that is unattainable. The order modal on the far right clearly shows users how many points they have, how many they will use to get the gift card and how many they will have after redemption.
This shopping modal is featured on the order completed page and gives users a jumping off point to go spend their gift card based on their most visited stores.
