Grocery HelpAR is a mobile application that helps international students who are not accustomed to grocery shopping in the US. Based on our user research, we found several problems which our users encountered: first, the difficulty translating different kinds of food from their own language to English, which often led to them buying the wrong items; second, users had a hard time finding their way around complicated store layouts; and, finally, they had difficulty comparing products to choose the best option.
Grocery HelpAR helps our target users to overcome the obstacles they face during grocery shopping. When you make a list, it automatically translates your shopping list into English. When you enter the store with your shopping list, Grocery HelpAR will calculate the optimal route for the shopping list and let you know where you need to go. When you are close to the item, Grocery HelpAR will inform you with an alarm, vibration and a popup message. It provides the best solution when you are not sure which item is best for you. It provides a list of items which are most frequently recommended by your ethnic group. This is helpful because our target users tend to rely on recommendations from their community because they want to find items most suited to their own tastes. The users also find the detailed information of items easily and quickly by using the AR scan function of Grocery HelpAR.
I participated in this project as a user researcher and UX designer along with great teammates, Geunbae, Miro, and Shuhan. As a team member, I participated in every step of the research and the design. I conducted two contextual inquiries and four semi-structured interviews. Based on the findings from observation and interviews, I conducted a structured hierarchical task analysis and created a storyboard, which allowed us to have a better understanding of our user group. I was in charge of one of three alternative design concepts (recipes & shopping list) and made paper prototypes for the concept. I also shot and edited the video clip above.
Preliminary user research
Diverging design ideas
Converging design ideas
1. Understanding Problem Space
1.1. Target User
For our project, the target user group is international students who prepare their own meals.
By conducting interviews and contextual inquiries with new international students at Georgia Tech, we found out that many of them had difficulty dealing with the different varieties of food, the layout of the store and other things which made it challenging for them to shop for groceries in the U.S.
We were aware that shopping for some users may still bring them enjoyable and satisfying experiences, but as they are students who have to manage their time wisely in order to succeed in their academic agendas, and based on various research methods that we have introduced and navigated, the process is time-consuming and often frustrating.
1.2. Task Analysis
1.3. Story Board
2. Preliminary User Research
Once we defined the problem areas, we wanted to quantify and confirm that the issues persist with users who are accustomed to the store’s layout and the types of food. A semi-structured interview was a great way to gather this data as well as some detailed feedback and responses from the users. By asking the international students about their overall experience with grocery shopping in the U.S (and around the Georgia Tech campus), we aimed to discover the current problems and hardships that they face in addition to positive (or surprising) experiences.
2.2. Contextual Inquiry
Following the semi-structured interviews, we thought it was necessary to continue on with our research by doing some contextual inquiries. Since our topic is about grocery shopping, especially the difficulties of wayfinding and identification, we wanted to witness the tasks and the process that international students often go through firsthand by shadowing them. Also, by asking them to do think-aloud protocol (ex. of what they are trying to accomplish and why they are taking such a route, etc), we wanted to discover more about the users that we are working with. It helped us to understand the problem space as well as the challenges that they face with our own eyes.
2.3. Affinity Mapping
Based on the affinity diagram, we found out that they often have to manage their time wisely and generally want to spend the least time possible at the store. Most of them would make a list before going to the store, physically (on apps or notes) or mentally. They seldom ask the shop assistants for help because some of the items they are looking for are hard to find. Moreover, many of them use dictionary apps or search engines to translate the item names they are looking for. Lastly, we found out that because many are not familiar with U.S brands which are different from their own countries’, they heavily rely on friends’ recommendations to select the right items for their taste and their traditional dishes.
With the help from our affinity diagram, we were able to discover that the most time-consuming part of the user’s journey was locating and selecting items. For locating items, the hardship was related to accurately translating the names of the items quickly and easily. And for selecting items, the utmost problem was that the users are unfamiliar with U.S brands which motivates them to ask for help / recommendations from their friends.
3. Diverging Design Ideas
3.1. AR Shopping Aid
The idea behind “AR shopping aid” came from reusing existing solutions and enhancing them. Almost everyone already has a mobile device that is capable of using AR applications, so there is no need to introduce new technology. Other apps also exist but they don’t provide a complete solution. Our idea was to make an application that provides users with necessary tools for shopping (such as a shopping list, a translator, a store map with a list of item locations, suggestions when choosing items etc) and to add an AR option to provide a faster solution when choosing items from the shelf by overlaying information (suggestions from their online community) over the product which is significantly faster than browsing the internet.
3.2. Smart Shopping Cart
Since a shopping cart is the most necessary assistant in a shopping behavior and typically needs two hands to use, we felt it would be more natural if the interaction only took place between the user and the shopping cart. The basic idea was to add a smart device with a relatively big screen, like an iPad, to the shopping cart, thus leaving the users’ hands-free. The smart device would be able to provide diverse services. There would also be a mobile app to complement it. The whole system is designed to solve the three main problems of international students, which are translation of item names, wayfinding and selecting brands.
To use the system, users would need to sign up for an account completing the nationality and language information. After that, they can make a list in their mother language on the app which will translate the list into English automatically. Then the user signs into the smart device of the shopping cart with the list loaded. The device will calculate the shortest route and navigate users through store. When users arrive at one item, the device provides a recommendation for the brand based on the popularity in the people from user’s country.
3.3. Recipe Concept
This solution was a mobile application that integrates a cookbook for traditional dishes and a shopping list. We started from the fact that our target users prefer to cook their own traditional dishes. They also searched online recipes for their traditional dishes before grocery shopping and cooking. We thought that if we can provide a service that makes a shopping list automatically when they decide on a recipe from a cookbook, users can reduce their time and effort during grocery shopping.
4. Converging Design Ideas
4.1. Low-Fi Wireframe Demo
4.2. Feedback from the Demo Session
From our classmates’ feedback, the AR shopping aid generally got the most approval while smart shopping carts received divergent opinions. And attitudes towards recipes & shopping lists were relatively neutral. Most of the classmates liked the idea of an AR shopping aid, although some doubted that it was feasible to get all the information for the items. One brought up that international students may be too shy to scan every item label on the shelf. For the smart shopping cart, the biggest concern was the safety problem of using smart devices on shopping carts as users may be too focussed on the screen rather than on where they are doing (like texting while driving) which can be difficult to resolve. Besides that, our classmates liked this idea. Recipes & shopping lists were quite acceptable to all the classmates. A lot suggested that it can be incorporated into the former two ideas. Some of them also mentioned that some users might decide what they cook based on the ingredients that they already have. If the list included the ingredients the users have in their refrigerator, the solution will be able to provide more options to start working on.
5. Prototype for Evaluation
After the in-class design sprint, we made a prototype for the usability test. Based on the feedback from the sprint, we decided to develop the AR shopping aid idea by merging some design concepts from the other two design ideas. First of all, the function that enables users to make a shopping list from recipes is incorporated into the AR shopping aid concept. We also developed translation and wayfinding functions by comparing the similarities and differences between the AR shopping aid idea and the smart shopping cart.
We combined A/B testing with a usability test to evaluate our prototype. A/B testing helped us to compare and see how our app changes a user’s behavior while grocery shopping and test the effectiveness of our solution. The usability test helped us identify the specific problems of our design and prototype.
In test A, we assigned tasks to our participant without our application. In test B, the participants performed similar tasks by using our application. The performance metrics, including success, time on task and errors, were measured in both tests. To assure the validity of time measurements, we chose to use retrospective think-aloud protocol. Neither did the participant think aloud nor did we ask questions during the task. We only asked interview questions right after each task when the timer was stopped. Most of the questions were self-reported using rating scales in regard to the usability of a specific part of the app. We also asked open-ended questions to get clues of what should be modified.
6.1. What Worked
Based on our observation we can conclude that overall the design was a success. Indoor navigation received great feedback from all users regardless of how well they were familiar with the store layout. Recommendation (needs some improvement with “filter by”) and AR function also performed very well.
6.2. What Didn't Work
To our biggest surprise, Translation was not a highly rated function, even though it came out in our initial research as one of the biggest problems. We are not sure at this point if users got accustomed to the groceries they are looking for. It is something that needs further investigation.
List creation performed only a 5.5 which is most likely due to a low fidelity prototype. A list was one of the “easy to implement” features for “an all in one” solution. The reason behind is most likely due to the low fidelity.
Due to some design issues with UI, some users missed the “Location on shelf” button, which was one of the important features for time-saving. However, once users were introduced to it, they had very positive feedback.
UI elements, such as icons, seemed to be a bit unclear as well. The workflow between adding ingredients to the list and opening it in the store map was a bit confusing.
7. Design Suggestions
Number of reviews
The app doesn't show how many people rated the product so the ratings are not very reliable. We should add numbers of reviews right next to the ratings.
Feedback after adding items
We need to add feedback that let the users know the item has been successfully added to the list.
Make cards look more clickable
Many participants didn't know the cards of product are clickable. We need to add signifiers for the cards, for example a 'view more' button on the cards.