UX & UI Design

Cash Out to GiftCards

MVP Iteration

Overview

How might we progress users through a flow for redeeming rewards cash for a digital gift card?

Objectives

Business
Reduction of the $2.6 Million currently sitting in users’ wallets as un-redeemed, by offering an alternate way to redeem rewards. From a business perspective, the goal is to move reward money from liability to revenue.
 
Users
Make redemption process/flow easy, understandable, and intuitive.

Research

Research done prior to my start on the project indicated the following:
Users did not like to select an option and click “Next” (when “Next” was below the “fold”). In situations where content was long (as on selecting gift card screen) or user screens were small, users seemed to struggle with realizing they need to click a button to advance. A few users called out that they expected to select something and automatically advance.
eGift card resonated with users. They liked that it communicated they would receive the gift card instantly, not have to wait for the gift card to be mailed to them.
– From copy on the first page, users did make assumptions that all gift cards would have bonuses and that they would be close to 10%. They were slightly disappointed at smaller percentages; however, some users mentioned smaller percentages would be appealing if it was a store that they frequented often (i.e. Walmart, Target).

Original Screens

Requirements

– Included Platforms: Desktop, mWeb, iOS, and Android
– Add the ability to select “Get Digital Gift Card” as a method to Redeem Rewards.
– Allow users to choose a single merchant to redeem their entire rewards balance in the form of a Digital Gift Card that appears in their RetailMeNot wallet.
– Include an option for gift cards to have a “bonus” percentage to increase card value.
– Allow users to change their mind and instead select “Get Cash with PayPal”.

Solution

Copy Updates After working with our team copy writer to clarify message, we decided to change “Available Balance” to “Rewards to Apply” in an effort to communicate the entire rewards amount users had would be applied to their chosen method to cash out.

Major Usability Changes
– Added “1 of 3”, instead of just having the step the user was on, in order to better communicate how long the process would take.
– Removed “Step 1” from the “Choose Method” screen, as depending on which option you selected, the numer of steps to follow would not be the same.
– Removed extra clicks to advance in the flow. In this version, each screen only required one click to move forward. 

Desktop

Desktop InVision Prototype

mWeb

mWeb InVision Prototype

iOS
Android

Analytics
While analytics are often the item that gets cut during the launch of a new feature or product, setting up proper tracking of our data is VITAL. Proper set-up allows us to track user successes and learn insights that will inform decisions for future iterations of this project and/or other product projects. Improper set-up could lead to misleading information and improper conclusions. I created this deck for my product manager on recommeded analytics to ensure we were tracking properly for this product launch.

Future Iterations
Consider updating progress bar pattern to include the ability to navigate back and forth between steps, as most form wizards normally would allow.