redesigning the app UX of one of America's leading organic and alternative foods chains
In June 2017, Amazon bought America's 6th leader in organic and alternative food sales: Whole Foods. By January 2018, however, the Whole Foods app had not updated to reflect its new ownership. The app was clunky, slow, and directionless - it served as a place to check product prices and find the nearest store, but nothing more. On some pages, buttons and links were broken. How could we redesign the Whole Foods app to help people shop for groceries at home?
UX 1, Winter 2018
1. secondary research
- current website use
- SMC student demographics
2. Primary research
- journey maps
4. Screen design & testing
- paper & digital prototypes
screen designer, interviewer
( MINIMUM VIABLE PRODUCTS )
Our design strategy was guided by two main forces:
1. The rising popularity of organic foods
2. Integrating Amazon’s famously simple browsing/checkout methods to meet tech savvy shoppers’ expectations for efficient & clear mobile capabilities
Influenced by these trends, we created a list of priorities for our app redesign - our Minimum Viable Products:
a handy space for the user’s shopping list
a wishlist to request new items
data collection to reveal shopping statistics (peak buying times, cart abandonment, most popular items) • push notifications (when a wishlist item has been stocked or a shopping list item has been discounted or nearly depleted for the day)
a secure payment system
a space for ratings/reviews
maintaining clean branding/professionalism of both Amazon and Whole Foods
We blended the MVP into 3 specific 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.
These initiatives would be enhanced by user-generated content (ratings and reviews).
3 C'S RESEARCH
While researching the 3 C’s helped us understand the market we were working within, SWOT research gave us information about the strengths, weaknesses, opportunities, and threats of Whole Foods itself, which clarified our strategy. Whole Foods must make an app quickly to quickly integrate its brand with Amazon’s, and cater to its educated, tech-savvy, organic food-loving customer base.
We presented the current app to two grocery shoppers (one avid Whole Foods customer). To guide our testers through all pages of the app and to analyze how well the app helps newcomers navigate through specific tasks, we prepared a list of three goals for the testers to complete.
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.
My partner Brian met with August, a wholesale shopper who occasionally shops on Amazon. Although she relies on wholesale stores for major shopping trips, she buys fresh groceries from smaller markets on a weekly basis. She tends to choose her grocery store based on who mails her coupons. She enjoys occasionally shopping at Whole Foods for the experience and selection, but typically visits ‘mom and pop’ shops for better pricing on produce. Her friends use Amazon Fresh, and she has been thinking about trying it out, though she has no immediate urge to do so. She is a mother who shares shopping responsibility with her husband. When presented with the app, she was immediately confused by the login requirement and asked to “hold on” while she figured out how to get around it. As a price conscious shopper and someone curious about Whole Foods unique food choices, she wants to browse through items and compare prices between brands.
I met with an avid Whole Foods shopper named Susan. As the wife and mother of three in a 100% vegan family, shopping for diverse, delicious, animal-free product calls for Whole Foods’ selection. When presented with the current Whole Foods app, Susan had a lot of feedback, which boiled down to three main points: coupons and deals are good, a store calendar would make a great addition, and the store should take her dietary preferences into account when suggesting items. Layout wise, she enjoyed the simplicity of the tri-paged app- it “didn’t seem overwhelming.” However, she got lost when clicking the ‘Gift Cards’ tab, which swooped her into the Safari app without notification or permission, and she didn’t enjoy the idea of giving the company her personal information with no upfront understanding of its benefits.
After conducting interviews, we researched other stores to see how their apps compared. Ralphs has mobile checkout options and in-store guides to help customers find the products they want. In contrast, WF’s app allowed only a few basic functions- finding a store and browsing coupons. 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 drawings below.
Overall, our user research showed that the app has working features, but requires significant changes.
Things the current app does well
simple 3 page layout is easy to navigate
coupons are store-specific
Concepts that need to be fixed
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
there’s 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
the app provides no way to request items for stock or rate the user’s quality of products and/or service
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.
As we created an empathy map for Mary, our primary persona, we considered her environment, social influence, frustrations, pleasures, education, professional life, technical knowledge, and motivation as a Whole Foods shopper.
What does she see?
News articles showing the dangers of preservatives in produce
Frustrated friends who have spent countless hours in the hospital for stress-related illnesses
Her middle-school child's behavior change based on his sugar levels.
What does she hear?
the rise of type 2 diabetes in America
research being done to find links between diets high in sugar and cancer
that Whole Foods was acquired by Amazon who she knows for their simple online shopping site
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.
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.
Faced with a wide selection of prototyping websites, we chose Proto.io because it met all of our criteria: it’s free of charge, allows collaborative and offline work, lets the creator make several artboards in one file (crucial for demonstrating app flow), and includes a way for teammates to comment on each other’s work.
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
Below are three of the 25 screens in our app prototype.
The testing video, prompts, and real-time typed responses can be viewed at http://www.trymyui.com/pva/6SYM6S7eOORB5W4T.
We submitted our prototype to a site called TryMyUI, and requested a remote user similar to our primary persona: a 35 to 54 year old wife & mother, US resident, earns US $90,000 or higher, college/university educated.
A woman named April responded to our request, and explored our app according to the instructions we wrote for her:
You will be testing a grocery store application.
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).
April loved the ease of the app as well as the concept, and 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.” She found the checkout process simple, quick and efficient, though she’d rather type in her quantity than use a scale feature. April also liked that she could choose her pickup time or delivery location. She advised us to make sure the recipe search prompt cleared before she started typing, but overall had very little trouble using the app.
RETURN ON INVESTMENT
Summary of Gains: Our Proposed App
Our proposed app responds directly to the needs of the modern user. 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’.
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 access under a “Favorite Recipes” tab in the future.
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 the user 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.
Summary of Gains: Current App
The current Whole Foods app consists of three pages- ‘Stores & Sales’, ‘Digital Coupons’, and ‘My Account’. Users can complete a finite number of useful tasks- finding their local store, browsing & favoriting coupons, viewing local store specials. To buy products or check store inventory, users have to download an entire other app, Instacart. To read ratings of experiences at different stores, users have to search ratings at numerous sites online. There exists no way to rate/review specific store items or compare brand prices online. The current app’s “Store Events” button is broken, and users cannot view an event calendar, or search for recipes. When users originally download and open the app, the first screen misleadingly and aggressively pressures the user into creating an account. A login barrier is off-putting to users who have no idea what the app does or looks like. Overall, the app seems intrusive and more helpful for the company than the users.
EFFECT ON COMPETITORS
2018 is the year of grocery delivery. 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.
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 small access to it 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; fix spelling of “successfully” in ‘Thank You for ordering’ screen