A Unified Shopping Experience

A tale of two apps

  • Bringing the Family Together

    Walmart at the time was supporting both a retail "dot com" app as well as their relatively new grocery app for same-day grocery delivery. This led to double the costs for marketing, and a great deal of user confusion.

  • A Fresh Start

    Instead of building from the skeleton of one of the existing apps, Walmart made the decision to start from the ground up. As designers we had free license to completely rethink how our experience was presented to users.

  • Innovation Throughout

    There were a slew of new initiatives that had been paused due to the upcoming app restructure. On top of rethinking core existing capabilities, the design team had to redefine several concepts like a new scanner experience, digital waiting queues for high demand items, new services offerings, interactive widgets, and more.

My Role

  • We started off with a small team, and so key sections of the experience were divided up to various designers. I produced several of the original interaction designs for onboarding, reorder, services, and app settings. Further down this case study is a more complete list of the areas I worked on.

  • I helped shape the explorations around how the app was structured – including whether we used tabs, hamburger menus, top tabs, etc... I also explored the ordering an visual prominence of key features for the app, such as search, services, reordering, and more.

  • Some initial attempts to prototype the unified app experience with Progressive Web Apps led to a less than desirable fidelity. I was brought onto the project initially due to my approach of native app, real-code prototyping that has a near 100% realistic look and feel.

    My process involved creating a dummy app in Xcode, and populating it with static images in scroll views to make it look and feel like the real thing. Then we'd do a screen recording or hand the app to a stakeholder to try out on the spot.

    One highlight: just before the release of the new app, I demoed my prototype app to over 3,000 attendees of a Walmart merchandising conference.

  • My approach of using real-code prototypes also meant I was well positioned to define and spec nearly all of the original animations and haptics that the app used. The new unified app was the first time Walmart had implemented haptics in their native app, so we were pioneering interaction patterns as well.

Cross-Platform & Built to Scale

The design team started with an experience that was mobile-app-first, but we always had desktop and mobile browsers on the back of our mind. The unified app redesign had to start from an app architecture that would support billions in sales, and products ranging from trendy fashions to everyday grocery items.

Onboarding & Permissions

I designed onboarding and permission flows that got users in and shopping without any fluff or unnecessary steps.

Loading Skeletons

I initiated the design requirement for loading skeletons based on feedback from my prototypes. Our team explored a loading skeleton strategy guidance for page owners to implement, as well as animation prototypes and motion studies.

Beta Ramp

We slowly rolled out our new experience to users with both an opt-in and an opt-out option. I designed the flows and prototyped how that interaction would work.

Services Architecture

Walmart offers a massive number of services from ordering cakes to getting your oil changed. One goal with the new unified app was to offer more parity between what the app and website offered. I was an instrumental part of the original architecture of where services lived, and how those services were presented to users in other parts of the experience.

Walmart Pay Explorations

One issue facing our customers was that Walmart pay required downloading the Walmart app from the App Store. We wanted to bring the most popular 3rd party digital payment method to more customers, so I designed a flow to use App Clips (which don’t require the Walmart app to be installed).

Widgets

With the Introduction of Widgets in iOS 14, an opportunity to bring shopping to home screens became available. I designed the company’s widget strategy, as well as the widgets themselves.

Much much more

There were very few parts of the Walmart app that I wasn’t involved in. Some other areas worth a deeper discussion include:

  • Identifier for Advertisers (IDFA)

  • Universal Scanner

  • Haptics

  • Add to Cart button prototypes

  • Waiting room for Holiday Items

  • Sign-in and Identity