00-sc-top-image00-sc-top-image

Overview

Design Lead for Walmart's biggest initiative of 2014. 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

01-savigns-catcher-Cover-Image-Template01-savigns-catcher-Cover-Image-Template

Testimonials (with links)

Process

It started with research. Walmart had lots of information on its customers.

01-walmart-personas01-walmart-personas

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:

01-Savings-catcher GIF01-Savings-catcher GIF

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?
     

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.

01-sc-wf-to-iteration-101-sc-wf-to-iteration-1

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:

01-sc-iteration-1-to-201-sc-iteration-1-to-2

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:

01-sc-rd-wf-to-v101-sc-rd-wf-to-v1

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:

01-sc-rd-v1-to-v201-sc-rd-v1-to-v2

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:

01-sc-overlay01-sc-overlay

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:

01 sc scan recei[t01 sc scan recei[t

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

01-sc-step-2-0101-sc-step-2-01
01-sc-step-2-0201-sc-step-2-02

More from third iteration:

01-sc-step-2-0301-sc-step-2-03

Step 3: Trip Planner Demo (Video)