UX study - Listmaking Shopping App

Project Overview

Project timeline This project spanned ten weeks from September - December, 2021, beginning with initial user research to clicakble prototype.

Team members Aaron Thomason, Jillian Santos, Alice Titus, Jinhe Zhu, Kaylene Holvenstot, Michelle Gale, Ken Worrall, Adrienne Foote, Lacy Ramos

Project Summary The focus of this project is to create a unique way to add value to a grocery store shopping app. After talking to users, a couple of ideas surfaced. This is the result of one of those items, from concept to digital prototype.

Competitive Analysis

	Competitor 1 - Safeway
Product	Safeway Mobile App
Describe the purpose of the product	Get deals, coupons and rewards with $300 in weekly coupons in-app. Arrange curbside pickup or delivery.
List the main features of the product (at least 3)	Customers can order your groceries anytime 24/7 Online shopping, with curbside pickup Arrange for grocery delivery Apply coupons easily with digital in-app coupons Safeway Club Card points accrue on line and in the app
Why would someone choose this product?	With an emphasis on saving time and money, busy and/or budget-minded users could gravitate towards this app.
What are its advantages?	Besides the savings, users can access their history for repeat purchases, including to their in-store purchase history App is user friendly Access to app-only specials. Figure 1 In checkout users can select how to handle out of stock items – either substitute or skip. Easy side-by-side price comparisons FreshPass is an in-app add on - a $99/yr service that gives free delivery and exclusive deals - similar to Amazon Prime benefits Figure 2
What are the weaknesses?	Delivery is fulfilled by Albertsons and requires downloading a second app - the Albertsons app or Safeway Delivery & Pickup App. Users can’t even begin to shop without the second app present. *Figures 3 and 4 Generally, app shopping is subject to the same issues as online shopping: Shoppers who typically shop with their own bags can’t do so - more waste Products that users typically pick out products such as fresh produce/meat by handling, inspecting, tapping, etc, are at the mercy of the person collecting the order.
What is customer perception of the product?	4.7 out of 5 stars on Apple App Store with 469,000 reviews, although the major update Summer 2021 was not received well, with many reviewers asking them to roll back the update to the previous version.
Associated Service(s)	Delivery
Describe the purpose of the service	Save time by shopping on the Safeway app and arrange to have the purchase delivered
List the main features of the service (at least 3)	First delivery free through a dedicated Safeway Grocery Delivery app (5 stars out of 125k reviews) Have your groceries delivered when it’s convenient for you Save on transportation or parking costs
Why would someone choose this service?	Someone pressed for time or who was unable to get out and shop for themselves could benefit from this service

	Competitor 2 - Whole Foods
Product	Whole Foods Market App
Describe the purpose of the product	Browse sales, order lunch & dinner, discover products, and build a shopping list within the app.
List the main features of the product (at least 3)	You can order your groceries anytime, 24/7 As Whole Foods is owned by Amazon, users can check out using an Amazon account on file Alexa integration “Alexa, add avocados to my list.” Coupons and Deals are available via the Sales tab in the app’s footer
Why would someone choose this product?	Shoppers who live near a Whole Foods and like to take advantage of the ready meals to go feature *Figure 5 Users who are fans of Amazon shopping would likely be the primary users of this app.
What are its advantages?	The Whole Foods app utilizes the Amazon login. Creating an account in the app is as easy as clicking a button if the Amazon app is on the same device. Upon opening the app a QR code is created allowing users to pay with their Amazon account when shopping in-store. *Figure 6
What are the weaknesses?	The app loads very slow, even over wifi *Figure 7 The app crashes often and links are frequently broken If users choose a pickup & delivery option it automatically opens the Amazon app - which is much easier to navigate/use The app used to have recipes that users lament being removed. The interface is confusing - to begin shopping users must click on “Order,” then choose between shopping on Amazon.com or picking up ready-to-eat meals and drinks from a local Whole Foods. Shoppers complain about excess packaging that may or not be recyclable Generally, app shopping is subject to the same issues as online shopping: Shoppers who typically shop with their own bags can’t do so Products that users typically pick out products such as fresh produce/meat by handling, inspecting, tapping, etc, are at the mercy of the person collecting the order.
What is customer perception of the product?	2.3 out of 5 stars on the Apple App Store with 2,400 reviews Users complain of app stability and interface issues, citing it would be easier to order using a computer or directly in the Amazon app, which the Whole Foods app sends shoppers to *Figure 8
Associated Service(s)	Delivery
Describe the purpose of the service	Get grocery shopping done on the app without having to go to the store and have the purchase delivered to you
List the main features of the service (at least 3)	Delivery is handled by Amazon Prime, so users can set very specific delivery windows Users may live far away from Whole Foods, so the time savings is substantial No extra subscription fee for Amazon Prime members Attended delivery, doorstep delivery, and pickup options available in some locations
Why would someone choose this service?	Shoppers pressed for time or those unable to get out and shop for themselves could benefit from this service, or those who already receive a lot of deliveries from Amazon may decide this is more convenient than going out on their own

Competitive Analysis - Summary

Stakeholder Interviews

Why we talked to stakeholders:

The stakeholders would know what business goals they were trying to accomplish, and the SMEs would be the ones who would know where to find the answers to the problems we were trying to solve for. Knowing that they were being consulted early the process would get buy-in from the corporate level, but also help build credibilty for the process and the UX work. The combination of the two inputs would help put a stronger focus on what the organization would consider a successful product release and get the team closer to a customer-focused product.

Who we talked to:

At the corporate level, we interviewed representatives from:

The actual stakeholders - whatever group(s) they were from
Any in-house grocery chain analysts
Customer service/call center
Marketing
Support staff (the IT people responsible for maintaining the app)
Product buyers
Human Resources

What we asked them:

How would you define success as it pertains to the app?
Does it translate to a percentage of increased online sales? Greater marketing reach? Greater customer engagement on social media? Better able to reach/target customers?
What is the number one pain point you hope this app solves for you?

Contextual Inquiry

Contextual inquiry performed while user shopped at her local Sprouts store.

Tracy - Sprouts grocery store

How do you determine when you need to go grocery shopping?
Usually when I’m out of basics/craving something specific/when I decide to make a random recipe and only have most of the items
Do you have a set day and time you always go?
Nope - just whenever I have the time
Tell me about the last time you shopped for groceries online?
During the early COVID restrictions - mainly to follow the mandates. We had to arrange pickup at a different store because our local one couldn’t get them done the same day
Why didn’t you go to the store instead?
That time was due to COVID and stay at home mandates.
How do you decide which sections to shop in?
I know where the products are I’m looking for, but sometimes I just browse a section if I’d been considering a purchase. I usually get the same things every time and know the order things are. Vegan products should be integrated into the ‘normal’ product sections, or put them altogether in one area. It’s inconsistent.
I usually start with bread and it’s dumb becasue it ends up flat in the bottom of my cart.
Do you have a shopping list? Where do you keep it?
Sometimes. I prefer to, but don’t always. In my phone Notes app.
Once you have found your item and put it in your cart, how do you update your list?
I don’t. I don’t delete it because I want to buy it again later. The list is a running list.
Do you deviate from your list?
Sometimes. Just a little - impulse, things that are on sale, or see things and I remember it didn’t make the list.
How do you choose items? Do you prefer a certain brand?
Favorite products first, replacements second, last choice is skip it/buy it later. Prefer certain brands of everything.
Do you look at product sales to determine what to buy?
If its on sale I might buy an extra, but I usually buy what I need. If it something I feel like I will need later and it will keep I will buy it on sale.
What do you impulse buy the most?
Produce. I feel like I should be eating better and it ends up going to waste because I’m too busy to prepare it.
Would you consider getting groceries delivered?
Yes
Why not do it right now?
Because I can do it myself. Also - the app(s) I use take too long to figure out. Also, too much packaging when groceries are delivered.
Do you use coupons in the app?
Not consistently - it’s hard and complicated and don’t remember the password for the app. Something logs me out and its frustrating.
What would make the app better?
The app knows who I am, just scan my number when I check out and apply coupons for things I bought. Why do I have to go save coupons?

Affinity Diagram

Affinity diagram of four shoppers’ interview answers. Collaborated on with Jinhe Zhu, Alice Titus and Jillian Santos

Click the image see the PDF.

Personas

Using the Affiinity Diagram, we created personas to give our shoppers a real face. Our personas were Todd and Valerie.

App storyboards

Using our personas, we created scenarios that revealed themselves back in our affinity maps.

Visioning

UX Visioning panel was tasked to find a way for Veggie Valerie to learn about new items at her grocery store that fall within her restrictive dietary constraints - therough her app.

Possibilities shown divided between in-app (out of store) and while at the store.

UX Visioning panel was tasked to find a way to help Todd plan and shop for 10 days of meals for him and his son. They immediately focused on a meal planner element in the store app.

UX Visioning panel thought a slider model could be used to select the dishes that were generated by the meal planner app.

Low-fidelity Prototypes

Wireflow

Preference screen mockups

Screens were mocked up using markers, any interactive elements (checkboxes, modals, actions perfomed by users) were done via green Post-it notes.

Paper Prototype Key Findings

While the paper prototype tested pretty well at doing that singular task of making it easy for Valerie to discover new products based on her preferences, we discovered early on that the interface would need to be fine-tuned as it passed the user in and out of different functions, and any deviation from that specific task was going to be a less than stellar experience in this design.

Notification preferences

When the user selects yes to the question about being notified about similar new products, they ended up in the notifications preference panel, which is technically correct, but was a lackluster hand-off. A softer transition is recommended, or at least some helper language about what they need to adjust to take advantage of the feature. The designers were trying to avoid the “go to your settings and enable such and such and then come back here” manuever many apps do, but there were too many assumptions made in this iteration.

Geofence notification

The designers idea of the geofence being the ideal way to trigger push notifications about new products was met with a little confusion. “Why not just notify me when they arrive at the store?” or “Where do I go to see the new products if I’m just curious?” Notes were made about push notifications while they were in the app at home, creating their list, but testers wanted to be notified at the time regardless of what they were doing. We didn’t expect that.

Store map

The map of the store idea was well received, and the ability to mark the item off the list, delete or save for later was successful. Designers just need to flesh out what happens when the user decides to save it for later - does the item grey out until the next store visit - kind of a limbo state? While the map concept was a success, we realized during testing that if a user has their store saved in the app, but visits another store in the same chain, the map will need to be regenerated and all of the items in the list will need to be adjusted to reflect the different locations. Also, what happens if the item you have on your list is at your store, but not at the store you visited? More evelopment is definitely needed to finalize that element.

User Flow

It was determined that a more robust user preference panel was needed to give users the power to turn on and off various notifications and apply filters to those notifications. This also necessitated multiple paths into the preferences.

User flow: Allow and set up notifications of new products based on user preferences

Scenario: Veggie Valerie wants to be notified of new vegan/vegetarian products at her local grocery store

Annotated Wireframes

Item	Title	Description
A	App Header	When user taps the header, they’re taken back to the top of whatever screen they’re currently on. Tapping map icon brings up a map showing the nearest stores based on user location.
B	Product navigation	Collapsed breadcrumbs that expand to allow users to navigate back up through the category stack
C	Home button	Tapping here takes the user back to their store’s start screen
D	Product Search	Takes user to the search screen, gives them the option to type, verbalize or scan for products
E	Shopping list (Active indication)	Takes user to their shopping list
F	Coupons	Takes user to the “Coupons” page,
G	Account	Takes user to their account profile

Item	Title	Description
H	Price	Price of item at user-favorited store
I	Product photo	Primary product photo
J	Product thumbnails	Users can tap on the right or left arrows to see more thumbnails, tapping on the picture replaces the larger picture above
K	Add to list	Tapping this button adds the currently displayed product to the users shopping list
L	Description	Product description

Item	Title	Description
M	New feature modal	Launches first time when user is adding items to their list. Loads announcements modal telling user that they can be notified about products like the one they’ve added to their list
N	Yes	Tapping takes user to their Notifications preferences
O	No	Closes modal and restores product page
P	Modal close	Secondary modal dismiss
Q	Modal background	60% opaque screen to highlight modal

Item	Title	Description
R	Preferences link	Collapsed breadcrumbs that expand to allow users to navigate back up through the preferences stack
S	New Items	User is notified of every new item added to favorite store, filtered by choices below
T	Sale Items	User is notified of every item when it goes on sale at their favorite store, filtered by choices below
U	Filter limiter	If selected, any notification above is subject to the selections in the dietary and allergy filters
V	When using app	If selected, user is notified only when actively using the app
W	When near store	If selected, user is notified only when triggered by the store geofence
X	Save button	Saves preferences, user is sent back to the screen where they were initially prompted about the new feature

Item	Title	Description
Y	Dietary preference filter dropdown	Users can check any option to filter their notifications. Selecting an option indicates that they do want to be notified about the product - no selection means do not notify them about that product
Z	Allergy preference filter dropdown	Users can check any option to filter their notifications. Selecting an option indicates that they do want to be notified about the product - no selection means do not notify them about that product

User Interview - prototype tracking

User Interview Tracking | Paper protoyype | Round one Oct 28 - 30

Round	Interview Note	Section	Status	Solution
1 (paper)	User wanted to be alerted to new products when they were added to the store, not just when they were at the store or working on their list	Notification	Change	Allow users to choose notifciation timing - when items are added to the store, when making a list or otherwise using the app, or when the user arrives at the store
1	User wanted to access the “new product notification” settings at any time	Preferences	Change	Create a more robust preference panel to allow not just kinds of notifications, but allow for users to select when they’re notified
1	Geofence as primary notification was confusing - asked about disabling	Preferences	Change	Geofence notifications should be a user selected option
1	User did not understand why when they selected “yes” to notifications they were taken to preferences	Flow/process?	Change	Explain to users that they can set new product notifications in preferences and show examples/better interaction - make access to the panel more intuitive
1	Store map built from saved/favorite store - what about other stores?	Navigation	No change	Will have to allow for rapid download of other store layouts
1	When user saved an item on their list for later, wasn’t sure where it went	Process	Change	Enable “save for later” options - next visit? Other options?

User Interview Tracking | Digital Prototype | Round two Nov 12 - 25

Round	Interview Note	Section	Status	Solution
2	User mentioned that the ‘homepage’ should contain announcments, especially about new features	Flow	Further testing	Consider moving new feature announcement to the front of the process when user first launches the app
2	User was confused about map icon - thought it was a magazine and expected to see the weekly circular	Design	Change	Make the map pin icon more clear, leaving room for shopping cart icon
2	UPC Bar code scanner - users were unsure what the icon was, but verbalized it was a bar code.	Process	Remove?	Users remarked that it seemed like more work than just searching/writing it manually. More more testing is required.
2	UPC Scanner was thought to be used to scan in store to see if item was on sale, and at home to add to list.	Design	Change	If user is scanning in store - what is the benefit? Consider removing altogether

User Interview Tracking | Round two Nov 12 - 25

Round	Interview Note	Section	Status	Solution
2	User was confused about the drop down links top left on product page. Thought that they should contain grocery preferences, not breadcrumbs navigating through the store sections.	Design	Change	Make sure the arrows are following best-practices guidines and standards. Possibly rotate arrows down for collapsed and up when open
2	Expandable accordions throughout were confusing to the users. Said the arrows “were upside down or sideways.”	Design	Change	Make sure the arrows are following best-practices guidines and standards. Possibly rotate arrows down for collapsed and up when open
2	(Prototype issue) Crackers should be added to the list when the user taps “Add to List,” before prompt loads	Process	Change	Duplicate shopping list screen showing the crackers added after the exercise
2	Sorting tools icons - users understood the A-Z one, but thought that the added order filter was number of items on the list	Design	Remove/Change	Possibly change to checked items on list vs unchecked items

User Interview Tracking | Round two Nov 12 - 25

Round	Interview Note	Section	Status	Solution
2	User was confused about list vs cart, thought the checkbox option added the item to their cart, not marked off their in-person list.	Design	Change	Create an “Add item to cart” function from list for online shopping
2	User did not expect to see other store sections in the “breadcrumbs” navigation on the product page, and didn’t understand the options there. Neither tester knew what to expect behind that link and what they got wasn’t anything they knew how to use	Design	Change	Consider removing this functionality.

User Interview Tracking | Round two Nov 12 - 25

Round	Interview Note	Section	Status	Solution
2	Filter dropdown on current specials page was confusing	Process	Change	Consider showing this option only after users search. Users both mentioned filtering their search results but “Best match” choice before searching was confusing.
2	Neither tester saw these as interactive accordions, even though they both mentioned they liked the “limit notifications to selections below” options. Once open users understood and used the checklists, but neither tapped on them without being asked specifically what they thought was there.	Design	Change	Consider making these expanded by default, or otherwise draw attention to the settings. Perhaps style as text links?

Jump down to:

Live prototype

Project Overview

Competitive Analysis

Competitive Analysis - Summary

Stakeholder Interviews

Contextual Inquiry

Affinity Diagram

Personas

App storyboards

Visioning

Low-fidelity Prototypes

User Flow

Annotated Wireframes

User Interview - prototype tracking

User Interview Tracking | Paper protoyype | Round one Oct 28 - 30

User Interview Tracking | Digital Prototype | Round two Nov 12 - 25

User Interview Tracking | Round two Nov 12 - 25

User Interview Tracking | Round two Nov 12 - 25

User Interview Tracking | Round two Nov 12 - 25

Grocery App Prototype

Jump down to:

Live prototype

Project Overview

Competitive Analysis

Competitive Analysis - Summary

Stakeholder Interviews

Contextual Inquiry

Affinity Diagram

Personas

App storyboards

Visioning

Low-fidelity Prototypes

User Flow

Annotated Wireframes

User Interview - prototype tracking

User Interview Tracking | Paper protoyype | Round one Oct 28 - 30

User Interview Tracking | Digital Prototype | Round two Nov 12 - 25

User Interview Tracking | Round two Nov 12 - 25

User Interview Tracking | Round two Nov 12 - 25

User Interview Tracking | Round two Nov 12 - 25