The worldwide COVID-19 pandemic has disrupted our lives and especially the way we shop. Businesses and restaurants have closed their doors, forcing consumers to eat at home more often, yet people are still choosing to do their grocery shopping in-store.
The following case study explores how we can encourage Canadians to switch to online grocery shopping.
How do Canadians currently shop for groceries?
Online grocery shopping will continue its surge and we’ll see an increase in adoption from all generations, including baby boomers. (Business Insider, Jan 2020)
When we look at the previous landscape of where online grocery shopping was heading, we see that it's on the rise in Canada but unlike a lot of other countries around the world, Canadians have been slower to adopt this alternative way to shop due many differences in the way consumers shop.
Nearly half of respondents said they have concerns over the quality of products, and just over a quarter said they believe food could be damaged in transport. (PWC Canada, 2019)
CURRENT LANDSCAPE (COVID-19)
COVID-19 has forced us to rethink everything we do, especially how we grocery shop. Online grocery shopping has become more relevant than ever. The reality is that we like to stick to what we know. We have routines which are difficult for us to change.
Despite the current pandemic situation with COVID-19, 70% Canadians are still choosing to shop in store (Grocery Business Canada, April 2020)
How might we elevate the online grocery shopping experience for those who prefer to shop in-store?
In order to validate my research findings, I started by conducting a 98 person survey on Typeform to gather data on people ages 25-65 and living in Ontario who prefer to shop in-store.
These results showed that people were not convinced that online grocery stores were a reliable source for fresh produce. People said that they've either had horrible experiences in the past or have heard bad things from other people.
I've realized that people prefer to shop in-store because it's what they're used to. We like to stick to our own routines and not take chances by trying something new.
Other factors people said were:
1. Grocery store is very close to home, no need to shop online
2. Belief that online is more expensive/marked up
Survey report can be found here
100% of my interviewees said that they would highly consider switching to online grocery shopping if they were guaranteed freshness and quality.
Most interviewees said that they love grocery shopping but hate driving in traffic, hunting for good parking spots and waiting in long lines to pay for said groceries. If Sarah were to plan ahead and order her groceries online she would not only save a lot of time and trouble, she would be able to shop conveniently in the comfort of her own home giving her more time for family.
This user persona was created based off the interviews conducted (click to enlarge)
Journey Map based on Persona (click to enlarge)
People like Sarah use look, smell and touch senses they are able to use when at the grocery store to distinguish the look, size, weight, appearance and smell of the produce. It's clear that not all produce will have picking preferences available but a detailed description of how the employees in the company select these items can definitely be featured on the product details page.
I knew I had to create an online grocery platform that mimics the benefits of an in-store grocery shopping experience. This would mean including a feature in the platform for shoppers like Sarah to select her produce as close to how she would at the grocery store based off look, smell and touch.
When thinking about the #1 factor keeping people like Sarah from trying online grocery shopping was concerns with freshness and quality, I needed to identify features that I would incorporate that could help increase confidence in the quality of products when shopping.
Sarah must have confidence that she is buying fresh produce from a trusted source. Therefore, she should be able to choose her produce online like how she would like to pick her produce at her local grocery store.
Chosen Epic + User Stories
Task Flow: Adding Organic Bananas to your cart
Since this was the first time I creating a mobile native app from scratch, I had to reference some existing e-commerce apps. When thinking about the UI and design components, I referenced the UI on e-commerce mobile apps that users like Sarah would use such as Ikea and Amazon.
The following sketches show the flow of how Sarah would perform the task of adding Organic Bananas to her cart and select picking preferences to her item. She would do this using a slider UI to choose overripe organic bananas since she plans on making banana bread next week.
These are some preliminary sketches (click to enlarge)
Sketches to Mid-Fidelity V1
I was able to validate my sketches by 3 different users through the Marvel POP Prototype app, I translated this into a mid-fidelity prototype with considerations of buttons and iconography.
The first version of the mid-fidelity prototype can be found here in InVision:
Mid-Fi Prototype V1 in InVision here
Comparison of Sketches to Mid-Fi (click to enlarge)
User Test Summary V1
In the first round of user testing, I tested five users and performed one round each. With the output from our sessions, we created a 2X2 Matrix to decide on the changes to the app which can be viewed in the diagram on the left.
After the testing was complete, I also asked our test users if this app made them want to switch to online grocery shopping but 2/5 of them said no. I had to rethink about what a user like Sarah would need to see in order to feel that the app had a unique value proposition.
A curated app experience was one that can establish brand loyalty from its users. When we invest a lot of time in an app, it is rewarding to see the results of those efforts in places like the home screen of the app such as preferences that were selected by the user in an onboarding flow. I decided that it was equally important to focus on redesigning the home screen and to be careful not to have it look like every other grocery app platform that currently exists on the market.
2X2 Matrix (click to enlarge)
Mid-Fidelity V1 to V2:
Redesigns of main screen and preference picker (click to enlarge)
From V1 to V2, there were two major redesigns.
1. Home Screen now includes
- An info card showing produce picking preferences
- Quick shop section for repurchasing past products
- Sale section to start browsing
- Featured products based on their past purchases
- Informational videos of how to keep past produce fresh
2. Preference selection
- slider was replaced with a thumbnail of an image of the state of the produce which then can be tapped on by the user to select either unripe, ripe or overripe Organic Bananas
- text input for the user was added to help user specify to the employee other specifications about the produce being picked
Adding a Secondary Task
For the heuristic of flexibility and efficiency of use, as a secondary task, I built in a section for Sarah to edit the preferences for the Organic Bananas she put in her cart.
This would allow Sarah to easily change her usual preference in the event she is looking to make some banana bread.
User Test Summary
2X2 Matrix V2 (click to enlarge)
In our second round of testing, I had 5 new users perform one test round each. These users were also given the same task of adding Organic Bananas to their cart but as an additional secondary task, they were asked to edit the picking preferences for the selected item. There weren’t too many usability issues with testing V2. Mid-Fi Prototype V2 in InVision can be found here
Users were also asked if this app made them want to switch to online groceries and 4/5 said that they would give it a try if there was a promotion or incentive to get them started.
Mid-Fidelity V2 to V3:
Going from V2 to V3, I removed the quick add buttons in the search screen so that users would not immediately tap on the item while typing. This would help with the error prevention heuristic if Sarah had made a mistake selecting an item in haste.Mid-Fi Prototype V3 in InVision can be found here
Users said that they were unsure about the thumbnails in the preferences section. They weren't sure if they were buttons and what it would do if they tapped on them. Although I knew what they were, my users didn't. Maybe it was because there wasn't enough information about the thumbnails which confused them. It only made sense to add more information for the thumbnails. Because of the limited real estate in the pop up modal, I wanted to stack the circular thumbnails to allow for more written details of the type of bananas being picked for Sarah in the product details page.
Mid-Fi Prototype V2 and V3 design changes
Establishing a brand identity is important for users like Sarah. She is loyal to the brands she uses like the stores she shops at or the gas stations she goes to. She has a very busy schedule and little time to experiment with new routines in her life.
Since this is a grocery service, it was important to create a brand that she could trust and rely on. The name of the brand was developed from the word "fresh" and "whoosh" which then became "froosh". Below is a compilation of a set of words that were carefully selected for the brand.
From the Moodboard, I selected a set of colours before moving into developing the hi-fidelity prototype. A logo was also created to help with the visual identity of the app.
The copy I wanted to include needed to reflect on "froosh's" brand values and aspirations. I wanted the copy to reflect the following words:
From our Moodboard, I selected a set of colours before moving into developing our hi-fidelity prototype. A logo was also created with a wordmark.
Final Hi-Fidelity Prototype
Design Pivot: Preferences
From the mid-fidelity prototype, some users mentioned that they liked to see the sale section as a primary part of the app once they log in. This was moved up near the top of the screen to incentivize the shopping experience for people like Sarah.
One final design change was made for "froosh". The preference picking design was noted by some users to be fun and easy to use but may cause users to hold a very high standard of the produce they receive in their grocery order. In order to reinforce the heuristic of match between system and the real world, I removed the thumbnail images and text box input and replaced them with radio buttons with detailed descriptions on what the employees at "froosh" look for when picking bananas for customers.
A second task was also added in this version of the prototype in case users like Sarah wish to change their preferences after adding a produce item. This would be done by tapping on the cart icon on the top right corner once the item has been added. This would provide flexibility and ease of use.
Below is the final product.
Hi-Fidelity Prototype screens (click to enlarge)
Responsive Marketing Site
In order for consumers like Sarah to discover the "froosh" app, developing a marketing page or a microsite would need to be considered within "froosh's" regular e-commerce site. In Sarah's journey map, she comes across an ad on Google while searching for online grocery stores. This app would be available for download from the App Store and Google Play Store.
Sections to be included in the site's page:
The Value Prop (what)
User Reviews (who)
Download CTA (where)
A responsive marketing site for desktop and mobile were designed.
Mobile Content Flow Diagram
(click to enlarge)
Going back to our persona Sarah, we see that she’s a busy mom. Another way for Sarah to access the platform is to utilize other features like Voice App commands to perform tasks within the "froosh" app. Sarah can use this extension of the app to do things like making a grocery list or adding an item for her next order.
Sarah has just finished up a work Zoom call on a Friday afternoon. She is working from home and calls it an early day. Sarah decides to start cooking dinner for the family before they come home.
While cooking, she realizes that she will need an extra order of eggs since she has volunteered to make egg salad for the family BBQ in two weeks. Her hands are wet from the chicken tenders she just cut up so she asks her home device:
Conversation Map for "froosh" (Click to enlarge)
Strategyzer's Business Canvas Model for "froosh" (click to enlarge)
Tarot Cards of Tech:
The Service Dog
We can imagine how successful "froosh's" platform can be for senior consumers and those with mobility limitations. Having a reliable grocery delivery company cater to these underserved populations can provide secure and safe grocery shopping alternatives.
Outside the targeted users, "froosh" could serve as a great platform to support school and daycare institutions. Fresh produce delivery would partner with institutions and launch healthy eating initiative programs for children across Canada.
The Smash Hit
If there were 100 million people using "froosh", we would see a shift in the need for large brick and mortar grocery stores. If consumers are doing most of their grocery shopping online, the orders would be shipped from fulfillment centres and fully automated by robot machinery, reducing the need for large numbers of people to work in these facilities during the COVID-19 pandemic.
As a result, we may see smaller stores appear for consumers who need to make an in between grocery trip. We may even see a shift in the job duties for in-store employees as a result. This may also result in less people needing to go outside their homes may also help prevent the spread of COVID-19.
Seeing how users prefer their produce may also help with the agricultural process of how food is grown. Although providing picking preferences to consumers may be more work for companies to fulfill, this may give us more insight on how consumers want their produce and provide us with insightful data that can help the agriculture industry plan ahead for growing produce and importing goods for items we need and not what we want.
COVID-19 is going to be around for the next little while. Digital products and services have become more relevant than ever. It has exponentially accelerated the rate of consumers adopting online grocery shopping. Now is the time to innovate solutions and help Canadians like Sarah rethink how they grocery shop in order to adapt to our uncertain future.
Perfection is Overrated
Being extremely detail oriented can be a downfall with the short time given to learn everything in a bootcamp learning experience. Taking up too much time to fix the nitty gritty can be detrimental to the project. I've learned to prioritize the usability and testing to improve on your design's usability.
Inspiration from Your Users
When stuck in a design rut, the best inspiration comes from your users. Listen to your users and make your design decisions based off what your users need and not what you want as a designer.
Focus on The Task
I've also learned that UX is not about trying to resolve an entire industry's business problem but to design the right tools to help users overcome a challenge.