SMART GROCERY APPLICATION "BROWN BAG"
This project is a grocery management app that aims to help users track their groceries and place orders through a voice enabled interface.
THE PROBLEM
Life in the modern digital age is quite busy. With access to emails and work from anywhere, young adults face the challenge of balancing home and work.
Ordering groceries online not only saves us a trip back home carrying shopping bags but also raises our expectations in terms of the overall quality of the experience. To perform a task faster means we are providing convenience to the customers as what they expect from online shopping. As voice becomes the trusted channel in a number of aspects of our lives, it will naturally be the place we turn to when we realize we’ve run out of something or want to add an item to the list especially everyday products like groceries. It's a lot easier than finding a pen and paper to write down.
Brown Bag is a grocery management app that aims to help users track their groceries and place orders through a voice enabled interface.
The app has the capability to communicate with a smart refrigerator. The refrigerator may be equipped with sensors and cameras in various compartments of the refrigerator to transmit live information to the app. Users can see vegetables in various compartments using the ‘take a peek’ mode (Camera mode). This allows the app to alert the users of items that are out of stock or about to expire. Users can then place an order to restock an item or set reminders for items that are expiring. During first-time use and the onboarding process, the users enter their grocery stock that’s in their refrigerator and indicate average monthly requirements.
MY ROLE
My first step was to understand how people go about performing tasks and achieving goals that are important to them. This information was necessary because it gave me context and perspective and put me in a position to respond with useful, simplified, and productive design solutions.
As the user researcher of the group, I was in charge of conducting user interviews and analyzing data. Before designing and building the prototype it was important to learn what a user is trying to do and understanding what is and isn’t working for them.
I focused the interviews on the user-centered design method that is best early on in the process before any idea or prototype. I use two methods to obtain my interviewers: personal connections and guerrilla interview.
I collected key data such as how tech-savvy users are, user's motivations and their pain points.
Second, I was also in charge of conducting usability testing. I summarized the findings in one-page report which helped me focus on the issues that caused people the most trouble. This definitely helped me study it further and have it guide my next iteration.
UNDERSTANDING THE USER
A big part of our life is managing our home and a big component of managing our home is food shopping. Consumers are always looking for ways to make grocery shopping easier by saving time and money.
PERSONAS
ABBY
A 30-year-old young working woman. She works as a marketing manager and is quite busy most of the days
Challenges
-
She has a difficult time managing her groceries.
-
Her husband also is a working professional and while he does help her in the kitchen, managing her kids, her work and the kitchen is a challenge.
She is looking for ways to manage her groceries more effectively so she can spend more time on other things in her life.
Technology affinity
-
High
Frustrations - Barriers:
-
While she has access to multiple apps that help her to make a grocery list and manage groceries, she’s looking for ‘that one app’ which would help her by being her brain.
She is looking for ease of use and convenience with the app and she’s looking for real-time data on her groceries and kitchen stock. She’s comfortable interacting with technology using voice interactions and she is looking for an app which could help her with that.
JOHN
A 33-year-old young working man. He works as an IT manager and is moderately busy. - He works from 9-5 and spends about a total of 1 hour each commuting to and from work. Since his days are packed, he usually has very little time to manage the household activities during the whole week.
Challenges
-
Because John likes cooking by himself he is quite organized in his kitchen. Mostly, he uses his mind and memory to keep track of his groceries but now is frustrated with this approach as he’s forgetful sometimes.
Technology affinity
-
High
Frustrations - Barriers:
-
He often forgets to buy one or two items from his grocery list.
-
He wants to stop memorizing things and is looking for an intelligent app that will help him.
-
He is looking for ease of use and convenience with the app.
-
He is looking for a single app that can help him manage his groceries and refill his stock as he runs low.
Basically, he is looking for an app that combines his grocery list management and online shopping. He’s comfortable interacting with technology in many ways, including voice commands.
Time is a great advantage for grocery applications
When I asked people about their grocery shopping experience some love it and hate it, is one of those unavoidable chores. However, they all wanted to take their mind off the wait the next time their standing in the grocery store checkout line.
BREAKING DOWM THE PROCESS
I started by conducting initial secondary research, the features were narrowed down and the concept was finalized.
The interface had to have the following features:
-
An alerts dashboard showcasing ‘out-of-stock’ and ‘shortly expiring’ items
-
Usage insights of top grocery items to give the user the power to track usage and manage wastage and save money.
-
The capability to integrate with voice assistants to function with voice commands to achieve key tasks.
-
The ability to integrate with a wide range of retail outlets.
-
To keep track of items in various compartments of a smart refrigerator.
-
Integrate with telematics of automobiles (eg. car infotainment system)
After the concept was finalized, rough sketches of the designs were produced in Axure to represent the overview of the concept.
MOODBOARD
SKETCHES
PROTOTYPE
NARRATIVE PROTOTYPE
MID-FI PROTOTYPE
USABILITY AND TESTING
Each observation was conducted individually and in person. The session began with a brief introduction to the study and the tasks.
Each participant was made aware that the sessions would be recorded. The session commenced once verbal consent was obtained from the participant.
During each task, the participants were closely observed and each of their actions, including any comments they made were carefully noted. Following each session, the participant was asked a set of questions based on their actions for the purpose of clarifying and reflecting on what was observed during the test.
PARTICIPANTS
My team and I recruited participants who were working professionals between the ages of 25-35 with a high affinity for technology. They were expected to have a basic knowledge about interacting with voice-enabled intelligent systems. We recruited and observed 4 individuals.
CHANNELS USED FOR TESTING
MOBILE INTERFACE
Tasks Tested:
-
Refrigerator/ Mobile Interface
-
Imagine there is a smart refrigerator at home which is linked to the interface presented. Check inventory
-
Find an item that's out of stock and place an order to restock it
VOICE INTERACTION
Tasks Tested:
-
Voice
-
Check alerts using a voice command prompt presented and place an order for an item that's out stock
-
Check alerts and set a reminder for an item that's about to expire
RESULTS
OBSERVATIONS
Based on the findings from the user test, the following key observations were made:
1. The presence of inventory items was distracting for the users and led them to overlook the alert banners that were placed at the top of the home screen.
2. Sufficient feedback/confirmation was not provided on the screen when “Add to Cart” and “Set Reminder” actions were completed.
3. Users spent significant time trying to interpret the usage statistics
4. Amount options didn’t seem clickable to users, which led them to them being confused about how to proceed.
5. Users used more of natural language when interacting with voice and the command prompts did not stand out on screen.
REDESIGN
The major change was to move the app prototype from Axure to Adobe XD. This allowed us to combine the app interface with voice interaction and design a more seamless integration of the two functions.
Based on the observations from the usability test, the prototype was redesigned to solve the issues.
-
Since the users were observed to be distracted by many elements on the screen, we switched to a more simplified design that included more whitespace. This allowed key information and alerts to stand out more and grab the users’ attention.
-
The content in each page was streamlined to align with the tasks associated with those pages.
-
Pop up boxes were added to provide users’ confirmation of their actions without moving to a new page altogether
-
The usage stats page was redesign in a way that the suggested amounts were more evident. This was done to help users interpret the graph easily to make their decisions.
-
The number of options was redesigned to look more clickable.
-
Voice interactions were simplified and the on-screen prompts were more centrally placed to guide the users.
HI FI DESIGNS PROTOTYPE
The biggest change from mid-fi prototype ti hi-fi prototype was that we moved from Axure to integrating both touch and voice into single prototyping software- Adobe XD.
-
As you can see in the first image, it shows the Homepage of the application.
-
The second image shows the Out of Stock page, which can be navigated by clicking on the out of stock button.
-
The third image shows the Expiring Soon page, which shows the items which need to be bought or ordered it.
-
The fourth image shows the reminder notification when you click on the ‘REMIND ME’ button.
-
Fifth image shows the total insights of the product, and then it allows the user to add the particular product in the cart.
-
Sixth image shows the Cart Page, from where you can directly buy it from Amazon or Target.
FINAL STYLE GUIDE
LESSONS LEARNED
The recommendations from the users helped us improve the overall ease of use and address the areas where participants experienced problems or found the interface/information architecture unclear.
After making these changes most of the participants found “Brown bag” to be well-organized, comprehensive, clean and very useful. Having a centralized site to find information is key to many if not all of the participants. Implementing the recommendations and continuing to work with users will ensure a continued user-centered application.