Overview
Design Lead for Walmart’s biggest initiative of the year. Amazing team, amazing time. Worked on the @WalmartLabs Team.
My Role
- Visual design
- Wireframes / UX / Interaction Design
- Responsive design
- Spec/Guideline
- Email design
- Coordination with multiple departments & stakeholders
The Problem:
Walmart is losing customers to online stores. Since they compete on price only, they have no ecosystem to keep people hooked.
The Solution:
We created a three step product strategy to counter this problem:
Step 1: Create a simple tool that lets customers scan their receipt, and get a store credit if they overpaid.
The goal is to convert store shoppers to online shoppers. You need to create an account in order to use the service.
Step 2: Create a platform that aggregates all a customer’s savings across all Walmart properties(coupons, eboxtops, online, etc)
Add value after they’re hooked into the platform. Now they have a place that aggregates all of their shopping data and shows them how much money they’ve saved. It serves as an incentive to continue shopping at Walmart.
Step 3: Use machine learning to predict what users need, and let them do all of their shopping online, at Walmart
The end goal is to move people away from shopping at the stores completely. Which sounds crazy, but when you’re a company as big as Walmart, you need to attack your own cash cows. Similar to how Apple created Apple Music, which is a direct competitor to iTunes, but was necessary because otherwise Spotify would have obliterated iTunes anyway.
Step 1 launched. Step 2 and 3 live on as concept studies.
Outcome:
Testimonials(With Links)
Once I input my first receipt I was hooked.
Walmart Savings Catcher requires little effort on my part. I can literally scan the QR code in the car in the parking lot, so I will likely keep using it.
I have been using a sneak peak version of Savings Catcher now for a little less than two months and I LOVE it.
I’ve been using the Walmart Savings Catcher for just a couple of weeks now and I am beyond excited.
Process:
It started with research. Walmart had lots of information on its customers.
We also ran focus groups to validate if the product idea of getting a store credit after scanning your receipt was something users would be interested in. To no ones surprise, the response was positive — who doesn’t like to conveniently save money?
Next we sketched out some user flows in text form, then spent a lot of time in the prototyping phase:
I like spending a lot of time in the interactive prototyping phase. One of my key design principles is to
Stay in the lowest possible fidelity, for as long as possible.
Key questions we asked in the phase were:
- Does the flow of the process make sense?
- Is the content hierarchy and layout roughly correct?
- Are all pages and pieces of content represented?
I usually do just fine with just doing some wireframes for the flows and building out the app. However, this app was too complicated to just do it all with prototypes. Were were getting confused with regards to all of the user flows and how they were interconnected. In order to aleviate that confusion, I built out my first user flow:
We went through many iterations in this early prototyping phase. Once we got agreement on the basic structure and flow, we moved on to visual design.
The first visual design iteration was weak because I had to incorporate very different feedback from multiple departments. With a few more iterations, we got to this:
I applied the same process to all of the other screens as well. For the sake of brevity, here’s one more example of the key screen, receipt detail. This is what you see if you tap “view details” in the screen you just saw above:
As we worked our way through the receipt detail, in the testing phase, we discovered we made a mistake.
One of my key principles of design is to design based on weighted importance.
People care far more about how much money they saved than about what they bought. And yet, you have the receipt showing what they bought in the prime real estate. Users read in an F-Shaped pattern, so the least important information is in the most important area.
After some more iterations, we arrived at this:
Another thing we found during testing is that people had real problems understanding what a “receipt number” is, how to find it, and how to enter it.
We fixed this in two ways:
Added a clear explanation for how to find the number on your receipt and enter it:
Post launch, we added QR codes to receipts, so now people can just scan their receipts and don’t have to enter a 20-digit number:
Post-launch concept studies
What you’ve seen so far is what launched. But if you remember, this was conceptualized as a 3-step plan:
Step 1: Create a simple tool that lets customers scan their receipt, and get a store credit if they overpaid.
Step 2: Create a platform that aggregates all a customer’s savings across all Walmart properties(coupons, eboxtops, online, etc)
Step 3: Use machine learning to predict what users need, and let them do all of their shopping online, at Walmart
Step 1 launched. Step 2 and 3 live on as concept studies.
Step 2: Savings & Contributions Platform
More from third iteration
