Case study
Better together
walmart | 2017
Summary

Sam's Club built an experimental app letting customers checkout on their mobile device. The pilot was more successful than expected, and now we needed to integrate its functionality into the core mobile app.

Duties
Workshop Facilitation
Information Architecture
Interaction Design
Interface Design
Prototyping
User Research

Define

Background

The Sam's Club mobile team built a standalone app called "Scan & Go" that lets you skip the checkout line by scanning your items and paying for your order from your mobile device.

The app was an instant hit with our customers, prompting us to pursue a more aggressive rollout strategy, with the goal of enabling Scan & Go in over 650 locations within a few months.

But there's a problem. We now have 2 separate mobile apps with different value propositions. Before we roll this functionality out nationwide, it may be smarter to fold it into the core mobile app.

Problems
  • Customers don't want extra apps on their devices.
  • Customers are unsure which app to use.
  • Scan & Go users want core features like lists, account info, order history, coupons, search, and product reviews.
  • Customers must leave one app to access features in the other, leading to more abandoned sessions.
  • Organizational overhead of maintaining 2 separate native apps.
  • Marketing campaigns are colliding and causing confusion.
Marketing campaigns were having a hard time differentiating the apps
Two apps in the app store caused confusion and segmented our user base
Banners for the core app used similar taglines and iconography
Objectives

1

Simplify and consolidate

2

Drive core app downloads

3

Behavioral insights

4

Increase in-store app usage

5

Reduce checkout time

6

Increase Scan & Go usage

Personas

We chose two personas to focus on.

Otis
The efficient optimizer, Otis wants his tools to be easy to use, intuitive, and most importantly, help him save time. He’s very thorough and uses features like lists to track what he needs and ensure he doesn’t forget anything.
Robyn
The reluctant shopper, Robyn just wants to get in and out as fast as possible. Shopping is a chore and she’d be very happy to have some tools that cut down on the long checkout lines, big crowds, and potential return visits.
Design Brief

The design brief was detailed and specific, like a mini version of this case study. It outlined the target customer, current experience, pain points, objectives, personas, design principles, and KPIs.

Another document would be created to outline the planned UX activities and project timeline.

Design

Design workshop

This was a high profile project with a lot of opinions and technical constraints. We needed everyone to be a part of the solution.

We facilitated a workshop with 12 attendees including Product Managers, Business Strategists, Developers, Researchers, UX Architects and Visual Designers.

Wireframes
Going wide

I designed all of our workshop sketches digitally, combining similar themes and ideas into a coherent document., then created a list of pros and cons for each concept. I reported this back to the group with new findings and a well reasoned path forward.

Automatic awesome

A geofence around the store's physical location would trigger the "in-store mode," which places Scan & Go on the home screen of the core app. To the user, it seems like magic. But we also needed alternate pathways if location permissions were not granted on the user's device.

Workflow & Wireframes

After gathering feedback from the team, I began to design the workflow wireframes. This would become an Invision prototype that I presented to leadership. We got the green light to create a high fidelity prototype and test it with real customers in a number of stores.

Validate

Prototype
Shop-along study

Working with a research partner, we devised a shop-along study for 10-20 customers of varying affinities and technical proficiency. This needed to be well-planned, as we would be walking alongside them in the store, using a prototype of static screens while they interacted with real items.

User testing
Findings summary

• 9 Sam's Club members
• Users of core app, Scan & Go, both and neither
• High learnability of design
• All were "able to navigate with confidence"
• NPS of 9 or 10 from all participants
• Short list of improvements for next iteration

"It's all in the same app. You can see the reviews, adjust quantities, scan your items for checkout. That makes it really easy."

"The swipe up receipt is cute, but you know, in a good way. It's really fun to use."

Iterate

Final design
Interaction & Interface Design

I iterated on the previous design, addressing any issues that came out of user testing, and then got into the details of the interaction and interface design.

Final prototype
Made with love

Interaction design, transitions, timings and animation were all crucial to the user experience of the final design.

I ended up making a high fidelity prototype in Atomic, and then translating the animation parameters into the requirements.

Key Takeaway
The power of consensus

This project was strategically important and everyone in UX, Product and Development had thoughts on how it should turn out.

I think the success of this effort was due to the trust that the team placed in me, which was created right away by being open and collaborative during the kickoff phase, and keeping my stakeholders informed throughout the process.

Home
Up top