Allowing Users to Replace their Lost, Damaged, or Stolen ‘My Love Rewards’ Card
Love’s Connect App
Overview
The ‘My Love Rewards’ card allows professional truck drivers to earn rewards based on how many gallons of fuel they purchase each month.
My Role
Lead visual designer
Interaction designer
Prototype
Animate
Timeline
Six months
(2019)
(2019)
Platforms
iOS
Android
A high-level overview of my design process
The Customer Problem
If a driver’s card is lost, damaged, or stolen, the only option was to call Love’s customer service to transfer the credits, points, and status from their old card to their new one. This is not ideal, as it resulted in lots of waiting, and reading long numbers over the phone.
The Business Problem
Love’s customer service representatives were getting too many of these calls, taking away time they could be helping our drivers in other ways.
Opportunity
How can we save time for the user, while keeping our customer service reps more freely available?
Goal
Implement a feature in the Love’s Connect App that allows our customers to replace their card, and transfer their old credits to their new card.
The Team
In addition to the above, other contributors include QA Analysts, UX Writer, and Customer Service Manager
Research and Testing
Moderated usability testing was conducted at a nearby Love’s location. The goal was to gather feedback on the card replacement prototype.
We put together an InVision prototype for user testing. Here were our main findings:
- Lack of clarity around whether certain UI elements were interactive or not
- Validity of old card was not well-communicated
- Biggest takeaway: The Confirm and Transfer screen was unclear. 8 of the 15 participants attempted to progress past the screen without checking all three boxes
Design Iterations
Below are two versions of the Confirm & Transfer process. They each failed for the following reasons:
- Too much text
- Unclear that their old card would no longer be usable
- Lack of certainty around which card should be selected in step 1
- The card does not accurately represent the real My Love Rewards card
We simplified the Confirm-and-Transfer process.
All three check boxes must be selected to continue
Ensuring the users knew that they could no longer use their old card was critical.
Participant attempting to progress past the "Confirm and Transfer" screen without checking all three boxes
This was a UX problem we felt we successfully solved.
User receives two instances of visual feedback if button is pressed without checking both boxes
1. The bottom "Confirm and Transfer" button wiggles
2. The "(check both boxes)" at the top turns red
1. The bottom "Confirm and Transfer" button wiggles
2. The "(check both boxes)" at the top turns red
Design Solution
The user follows a simple and linear path to get their new card up and running, keeping them in the loop from start to finish.
Entry point is found clearly on “My Profile” screen
Friendly and welcoming introduction
Scanning their new card
The final step conveys a rewarding message, giving the user a feeling of satisfaction upon completion.
Transfer summary
Most important step: confirming the transfer of credits
All done!
Launch and Success Metrics
Customer service got fewer calls regarding this issue, and could quickly direct the customer to the app.
Number of Users who Completed the ‘My Love Rewards’ Card Transfer
Since its release, over 122,000 users have completed the ‘My Love Rewards’ transfer
App is easy to use, and the points add up quickly. If you lose your card or its stolen it is super easy to replace and transfer to a new card. Good job on this app loves. Thank you for keeping america moving.
by Harold Brauminger
Sun, Aug 22, 2021
Easy to transfer cards when you need to. Good job…
by Karen Akin
Sun, Aug 25, 2021
v 7.4.3