Fetch Rewards aims to provide a seamless receipt scanning experience that lead to savings on every purchase.
With user experience at the forefront of our priorities, all design decisions are met with the intention of bringing delight and satisfaction into the user’s life.
Overview: We all make mistakes.
We aim to be perfect.
In fact, one of our north star metrics involves hitting a percentage of “Perfect scans”, which means the user gets to their desired result without having to interact past submitting their receipt; but….
We sometimes make mistakes. There’s a variety of ways something could go wrong. And just to name a few:
Bad OCR (Optimal Character Recognition) reading.
Wrong UPC (Universal Product Code) assignment.
Missing points
There’s a lot more than this. These are what our support team sees most and we’re actively trying to solve the issues at the root.
It’s almost inevitable that there could be a hiccup on one of your receipt scans. We still want to provide the user the best experience, even through this use case. This project is called “Receipt Corrections”.
Previous UI
Emotional Journey Mapping
Fetch Rewards is built on a foundation of delight. When we’re able to push a delightful moment in the user flow, we emphasize on that. But what happens when the user is starting at a negative emotional point? What does delight mean in that scenario? The norm is the be colorful, fun, and illustrate the experience; but is that the right perspective when the user is using the feature from an unhappy state?
These are the questions that pushed us to uncover new insights while creating the emotional journey map. Empathize and try to see the problem from every angle.
Problem
The disconnect from the receipt details screen (The receipt breakdown a user sees after submitting their receipt) and the corrections flow cause the user to question whether their requested correction is properly processing. There is no communication from the point a user submits those corrections, leading users going through the proper corrections flow (Which is the desired behavior) to consider contacting support. A situation in that unnecessarily overloads the support team’s workload.
This is one of the only features within the Fetch Rewards app where the user starts at a negative emotional state. The workflow that needs to be designed to satisfy the user is different than how we treat the rest of the product. Delight in this situation comes from a smart, simple and quick workflow.
Challenge
Breaking the problem down into three key objectives we’re able to see the problem as individual initiatives, each with a unique way of solving.
A connected flow.
The current UI feels as if you’re being brought into a separate section of the app when correcting. The receipt should be at the forefront of the corrections flow.
Push the boundaries on the intelligence of the experience.
A satisfied user at the end of the corrections flow is one who completes the flow without any more roadblocks or hiccups. Be smart and understand what the user is seeking.
A feedback loop.
Ensure the user knows where their process is at. Consistently update and ensure they can always go in the app and see when they can expect their corrections result.
User Goal
The user goal was to create an experience that creates a sense of ease and simplicity. Almost as if we knew where we went wrong and was guiding the user to the correct spots on the screen. Ensure that the user will always know where their correction request is in the full process. There should be no surprises through this flow.
Business Goal
The business goal was to decrease the number of support tickets in regards to missing points on a receipt. The unintuitive UI led users to write into support rather than go through the designated flow for them to correct the receipt themselves. An implication of this project was to create a smarter more effective product matching catalogue that we could leverage throughout the initial moments of the receipt scanning process as well.
Research
Data Analytics
The understanding of how many users go through these processes is important in figuring out how to design the feature out. Through the help of the support team, data analytics, and mobile metrics we were able to understand the problem deeper.
Leverage backend collaboration
Designing a smart solution requires the effort of everyone. Backend workflows need to be aligned with how the design operates and vice versa. Understanding the current state of the workflow helped see how we could improve in the designs.
Audit correction reasons
There are a variety of reasons why a corrections flow would be necessary. At a high level, the core of the problems can be broken down into two categories: Did we itemize it incorrectly? Or did we get the points value incorrect? This helps narrow down the design decisions.
User Testing
Whether it was before, during, or after explorations, we continued to conduct unmoderated user testing sessions to see how users would interact with the ideas, prototypes, and designs we were mocking up. This was integral in maintaining a pulse on our direction and progress.
Explorations
The first task was to understand at what point does a user enter into the corrections flow? We used a series of wireframes to delve into the possibilities but ultimately landed on choosing from these three for its consistency with design systems and trends.
With a project of this magnitude, it’s important to iterate and ensure you’re not dead set on a single solution from the beginning. We made sure to stay true to an agile process by breaking down the task one problem at a time. The next sub-task was to explore which type of correction (Item or Points) would be more helpful for the user and how to display that.
Understanding how a user wants to correct was the next task. Through a series of user testing sessions, and help from our UX research team, we were able to clarify the use cases for each of the methods - Barcode scanner, search, and list view. Each presented its strengths and weaknesses but we ultimately deemed we should prioritize the search and list views because of our ability to push the intelligence from a backend perspective.
The disconnect of the receipt details screen and the corrections flow being one of the key problems we set to resolve, we established a clear and direct connection before submitting the corrections to solidify the action’s relationship to the receipt.
The final piece to the experience was to ensure a line of communication and feedback at all times. Within our competitor analysis of food delivery apps and how they maintain a level of communication, we quickly realized a live progress visualization was a priority in this flow. We explored a variety of different options in regards to what is shown on the progress indicator, but through discussions with support teams, third party venders and data points on the timings of each step, we narrowed it down to three steps.
All of these explorations took time. Whether it was design critiques, pairing sessions or creating prototypes to see how the flow actually feels we diligently followed the design process to stay on track.
Final Flow
A user is able to enter edit mode using the edit icon in the top right of the receipt details screen. The UI will switch to “Edit Mode” where the user will be able to select any of the items to begin correcting. Once an item has been selected, a user will be prompted the question “Did you purchase this item?”.
The flow a user is put through is dependent on their answer to the previous question of “Did you purchase this item?” A “No” answer will navigate the user into the item correction flow. A “Yes” answer will navigate the user into the points correction flow. With help from our backend folks, we integrated a suggestion model that looks at 3 inputs. The store name, the receipt text, and the user’s text field input. Based on a confidence score we’re able to generate, we’re able to surface the strongest matches to the top of the list.
After a user has updated an item, it will show preview of your potential receipt details screen. (Pending approval) A user is able to make multiple corrections at a time.
By having a constant feedback loop, a user is “In-the-Know” of where their correction request is at, at all times.
Impact
The corrections work will launch around the end of Q2 or the beginning of Q3. The remarkable part about the work our team accomplished was the breadth of scope we started with. The corrections flow is a high impact area of the app. A user who’s initial experience was hindered due to a mistake on our end and it is our task to rekindle that emotional connection with the user.
Due to the sheer size of the project, we deemed it would be beneficial for us to release this project in phases. This will allow us to continually engage in the use of the feature along with the metrics and also balance the cognitive load on the user.
Throughout this process, I’ve learned the importance of testing early and often, regardless of if it’s with users, other designers, cross-functional partners or a stranger who’s never seen the app before, it’s valuable information. The best designs never come from the first iteration.
Team
DRI (Directly Responsible Individual) - Kavita Kochar, Emily Rich
Product Manager - Kin Isamov
iOS Developers - Shawn James
Android Developers - Darryl Johnson, Cindy Liang, Purva Dalvi, Kapindran Kulandaivelu
Backend Engineer - Vaibhav Joshi
Quality Assurance/SDET - Urvish Gajjar, Irene Koumi, Martin Trudeau, Gabe Lilly
Data Analyst - Josh Hernandez
Product Designer - Taiki Ishii