Whole Foods
Redesigning the Whole Foods app to merge the identities of Amazon & America’s leader in organic groceries
MY ROLES
User Researcher & UX Designer
TEAMMATE
Brian Tavakoli
TOOLS
Notability, Adobe Illustrator, Balsamiq, TryMyUI
DATE
January 2018
Context
In June 2017, Amazon bought Whole Foods, a nationwide leader in organic groceries. However, the Whole Foods app remained useless beyond checking product prices and finding the nearest store. In-app links were often broken.
How might we redesign the Whole Foods app to help people shop for groceries at home?
Research
Minimum Viable Products
Our design strategy was guided by two main forces: the rising popularity of organic foods & Amazon's famously simple browsing & checkout methods. We identified areas of the app with potential for growth, then blended them into 3 focuses.
1. An easily accessible shopping list which can turn into an online cart
2. A list of coupons and special sales (filtered based on the user’s dietary needs)
3. A smart recipe recommendation system.
Three C's Research
COMPETITIVE
Competition is fierce among grocery retailers. Discount stores like Walmart steadily gain larger slices of the market share, while established players like Ralphs are ahead of the curve when it comes to mobile capabilities. Ralphs customers can currently use their app to expedite the in-store shopping experience with aisle info tools and a mobile check-out option that allows you to have the bagged items delivered to your car in the parking lot.
COMPARATIVE
In 2017, for the first time ever, restaurant spending surpassed grocery spending, giving a leg up to services like GrubHub, which deliver restaurant food directly to people’s homes and offices. Other indirect competitors like Hello Fresh let customers order entire pre-made meal kits with simple and flexible delivery schedules. These both reduce the need for grocery stores.
COMPLEMENTARY
Instacart is a double-edged sword because it gives users an easy way to shop at Whole Foods, but they can use the service to support competing grocery chains just as easily. Through its user-friendly interface, Instacart is gaining popularity, while Whole Foods customers have minimal direct technological contact with their preferred store.
SWOT Research
STRENGTHS
Loyal existing user-base of affluent shoppers
Articulate and tech-savvy customers who can provide detailed reviews of products to provide input to recommendation algorithms
Existing inventory-management tools available to managers to provide real-time data to the App
Amazon integration provides competitive shopping data, analytics, and bypasses the need for new account creation
WEAKNESSES
Application requires a complete overhaul and is currently behind the curve
Poor handling of change management during merger integration with Amazon.com has led to operational mistakes
Whole Foods staff is untrained on Amazon software
OPPORTUNITIES
Potential to convert existing Prime shoppers to Whole Foods customers
Growing community of organic enthusiasts
Online grocery shopping - and complementary services - are growing in popularity
In-store shoppers nearly always have their mobile phones on hand, which can be used for a quick and seamless check-out process
THREATS
Other grocery chains have a wider footprint providing a more consistent experience across regions and better access
Growing competition from online-only based food delivery services
Potential economic downturns that will push shoppers towards value-driven chains
Testing the Existing App
We asked two grocery shoppers to complete three tasks:
1. Explore the launch of the application.
2. Learn what you can about ‘Store Location Details’.
3. Search under ‘My Account’.
We left the tasks open ended because rather than hearing about a small facet of the app, we wanted to hear their thought process as they probed every button. Our tasks guided them to explore all pages, and we encouraged to speak their stream-of-consciousness out loud. We took notes on their opinions on app navigation, intuitiveness, and usefulness.
Testers
SUSAN
Wife and mother of 3 in a 100% vegan family
About 50 years old
Avid Whole Foods shopper
IMPRESSIONS OF APP
Coupons and deals are good
Wants a store calendar
Store should take her dietary preferences into account when suggesting items
Enjoyed the simplicity of the tri-paged app- it “didn’t seem overwhelming.”
Got lost when clicking the ‘Gift Cards’ tab, which swooped her into Safari without notification or permission
Didn’t enjoy the idea of giving the company her personal information with no upfront understanding of its benefits
AUGUST
Wife and mother, ~40 years old
Price conscious (she often picks grocery store based on mailed coupons)
Relies on Costco for major trips, goes to Mom & Pop stores for better produce prices
Occasionally visits Whole Foods for selection
Buys with Amazon about once per month
IMPRESSIONS OF APP
Immediately confused by login process
Wants to browse through items and compare prices between brands
Findings
Overall, our user research showed that the app has working features, but requires significant changes.
SUCCESSES OF THE CURRENT APP
Simple 3 page layout is easy to navigate
Coupons are store-specific
Account reload-ability
FEATURES WITH ROOM FOR IMPROVEMENT
Changing one’s home store is surprisingly difficult
The “Find my Store” map doesn’t zoom into a specific area of LA when the user looks up their town
No intuitive way to make the keyboard go away once it’s up
Coupons and weekly deals promote meat and dairy items even after users enter their vegan dietary preferences
The “Store Events” button does absolutely nothing
No way to request items for stock
No way to rate your impressions of products and/or service
Personas
We created three personas to represent different sects of typical Whole Foods shoppers. Their unique needs and frustrations motivated our design. Similarities in multiple personas’ issues- such as Mary and Bella’s dietary preferences- became focus areas during the design process.
User Journey Map
This journey map follows Mary’s experience as she uses the redesigned app to pickup groceries for her family. Making this helped us see the app from the point of view of a customer and identify potential painpoints with our proposed design.
Ideation Board
Making an ideation board helped our team pin down how to precisely meet our personas’ needs. Because Mary worried about her husband’s heart disease history, we decided to include nutritional information about items within the app, and recommend specific recipes targeted for specialized health concerns. Because she likes knowing where and how her produce is grown, we want to give the app that “farmers market feel” with small informative signs next to items (similar to the physical store). Because Mary dislikes waiting in checkout lines, our app could provide her with store traffic information to plan her trip around rushours. Overall, ideation made our team consider a large number of small details that could greatly improve our users’ experience.
Design
Sketching the UI
I started sketching out app screens and user flows to address the main concerns: coupons promoted by dietary preference, an online cart converted from their shopping list, and a way to write reviews and ratings. You can view our initial sketches and Notability wireframes below.
Wireframes
Prototype
To the left, you can see 3 of our 25 prototype screens. Our prototype maps out a few of our main functions:
Browsing recipes & sorting by dietary restrictions
Browsing coupons and allowing on-phone UPC code scanning during check-out in the store
Adding recipe ingredients to an online cart & comparing brand prices
Checking out- choosing delivery or pickup
Logging in
Testing the Prototype
TRY MY UI
We requested a remote user similar to our primary persona, Mary: a 35 to 54 year old wife & mother, US resident, earns US $90,000 or higher, college educated.
We asked our user to complete 3 tasks:
1. How do you login?
2. Learn about the the ingredients you will need to make the tofu tacos recipe.
3. Proceed through the steps to purchase the items you will need for tacos (no billing info needed).
FEEDBACK
Our tester, April, loved the ease & concept of the app; she found it “very user friendly”. She enjoyed the recipe search and the automated ingredients-list-turned-shopping-list; she could “literally find a recipe and create an order in minutes.” April liked that she could choose her pickup time or delivery location. In the checkout process, she'd prefer to type her item quantity rather than use a slider, and she advised us to make sure the recipe search prompt cleared before typing.
Click the image to view the 5 minute testing video, or follow this link:
TRYMyui.com/pva/6SYM6S7eOORB5W4T
Market
Summary of Gains
OUR PROPOSED APP
When customers first download and open the app, the welcome screen invites them to explore the app’s features and get inspired. The app’s home page contains buttons to its 5 functions- ‘Coupons’, ‘My List’, ‘Recipes’, ‘Local Store’, and ‘Profile’.
RECIPES
When users click on the Recipes tab, they have access to a wide selection of special Whole Foods recipes (with photographs), which they can filter by meal type and ingredient inclusion/exclusion. After selecting a recipe, the user can view its ingredients, directions, photos, and quick background/health information. Users can also ‘favorite’ recipes that they love for quick future access under a 'Favorite Recipes' tab.
SHOPPING LIST & CHECKOUT
Under the ‘Shopping List’ tab, users can glance at & add/delete items that were generated based on their recipe ideas . When users are ready to convert their shopping lists into online carts, the app methodically goes through their lists and offers them a customized selection of quantities and available brands. Users have access to brand reviews and comparative prices in this process. A final promotional savings alert encourages the users to commit to the order and move on to delivery and pick-up options. If they choose delivery, they can tip their drivers digitally, so no physical money is exchanged, like with Uber.
Effect on Competitors
2018 is the year of grocery delivery (of course, we now know that 2020 took that title and ran with it). Whole Foods, who has been dabbling with the concept of grocery delivery since 2014 with Instacart and recently announced its Amazon Prime delivery option, is not sailing alone in a blue ocean market. Instacart arranges deliveries for dozens of other large grocery companies- Vons, Ralphs, Pavilions, Gelson’s, Smart & Final, and Costco, to name a few. Ralphs offers delivery online through Instacart but has not yet linked Instacart to their app. Similarly, Vons hasn’t yet set up delivery through their app, but the store site allows online shoppers to choose between Instacart speedy delivery, or Vons delivery or pick up. If Whole Foods quickly improves their app to include shopping and delivery without Instacart, other grocery companies will race each other to beat out the delivery market, and Instacart could be left in the dust.
Next Steps
Create an option on Amazon Fresh to switch over to the Whole Foods app
Collaborative lists (so that kids can add stuff to the parents’ grocery lists, but changes per person can be color coded)
A whole section on ratings/reviews, rather than limited access within the recipes/list pages
Within shopping list, an icon appears next to items that were added from the coupons page, so the user can be sure she’s actually getting that discount
A way to check records of WF spending with ready-made graphs and personalized stats within the profile page
Fix recipe search bar prompt glitch and add-to-cart quantity slide bar functionality
Add dollar signs to price-per-brand comparisons
Quality control before final app release