WALMART

M-commerce? Check.
In-store shopping? Check. 
Bridging the gap between online and storefront... all in one Walmart app. 

Designing mobile experiences for the world's largest retailer was a dream come true for me. I'd gotten a taste of mobile e-commerce while helping to bring barcode scanning to the Target iPhone app in 2009. Target was unafraid to experiment and break new ground with mobile initiatives. Happily, Walmart turned out to be equally progressive, and in Mobile Self-checkout, as mobile interaction design lead I had the pleasure (and some pain) of working on a truly bleeding-edge project.

Scan & Go, aka Mobile Self-Checkout

The goal: get Walmart shoppers in and out of the store faster, while helping them stick to budget.

Shopping List Sketch (iPhone)

In the summer of 2011, the Walmart iPhone app debuted its shopping list feature. Shoppers could easily add items by scanning a barcode, typing, or just reading the list out loud, and moreover – they could see pricing for items on the list at any local Walmart. Walmart came up with a vision to combine the power of the mobile shopping list with self-checkout. At the time, only Stop & Shop in the northeast U.S. supported anything like what Walmart set out to do. 

Walmart Store Shopper Mental Model

To deeply understand how shoppers prepared for and executed their Walmart shopping trips, clipping coupons, consulting budgets and making lists, I generated a mental model based on our UX researcher's shopalong studies in Dallas and Texas. I combed through video and transcripts for each shopalong study participant to glean out behaviours, tasks, and motivations. Basically, to get inside their heads.

Armed with this understanding, and assuming that shoppers would have no prior mobile self-checkout experience (therefore no frame of reference), I mapped out activity flows and got into the design. 

Scan & Go Activity Flow

Alerted by in-store marketing and app geofencing, a Walmart shopper's Scan & Go experience went like this:

• flip to store mode in the Walmart app
• scan items I'm going to purchase, crossing them off my shopping list, or adding new items to my Scan & Go basket
• monitor how much I am spending as I shop 
• when finished, head to the self-checkout line, where I tap a Scan & Go button on the checkout screen to checkout
 any coupons I've clipped in the app show up automatically on the checkout screen
• pay for my purchases, and view my electronic receipt in the app

M-Commerce and Store Mode (iPhone)

I was closely involved in two rounds of in-store testing, leading to refinements of the design prior to a 200-store pilot rollout in 2013. 

Scan & Go from Shopping List (iPhone)