Bag it
In a world of so many grocery delivery apps, a crucial experience is being overlooked by organizations - in-store grocery shopping! An activity which is a necessity for some and an enjoyable experience for others. But few digital platforms exist to support and enhance that experience, Bag it is here to change that.
Role: Designer
Team: 3 People
Themes: Industry Project, User Interviews, Interaction Design, Design systems, e-Commerce, Iterative Prototyping, User Testing
Timespan: 14 weeks
Premise
This was my team's project for the HCI Applications class at Georgia Tech. The project involved close interaction with an industry partner who provides the problem space and context and guides the team through the project. Our project partner was the Lead UX Researcher at Ibotta, a consumer rewards company.
Quick Links
Research
Partner & Problem Space
Our project partner- Ibotta, is a cashback rewards platform that helps users save money on everyday purchases. The organization also handles rewards for multiple big retail brands across the grocery shopping world.
However, they did not ask us to work on their existing app. Instead they wanted us to understand the shopping habits of Gen-Z and develop a design solution that would address any gaps we observe.
​
Looking at this, we started our research with the following initial prompt-
​
What tools would aid your imagination of the Future of Grocery Shopping Experience for Gen-Z?
​
And we started with the following initial research goals-
​
-
Understanding the existing shopping behaviors of Gen Z
-
Identifying their pain points in grocery shopping
-
Prototyping new grocery shopping experience aligning both with Ibotta's business goals and Gen Z's lifestyles.
Literature Review
We initiated our literature review with focus on two sub-topics.
1. Grocery shopping trends & behaviors, irrespective of age
2. Gen-Z shopping trends & behaviors, irrespective of merchandise
​
The following insights were collected from this literature review, for each sub-topic-
Hybrid Shopping Behavior
-
Many consumers adopt a hybrid approach, utilizing both in-store and online channels.
-
About 88% of American consumers still prefer shopping in-store.
Price & Location Matter
-
Price (72%), location (59%), and Quality of products (57%) are the most influential factors for choosing a grocery store.
Quick and Frequent Trips
-
A Survey suggests that around 85% of American people shop at least once a week for grocery, with an average of 35 minutes per trip.
Hard to Stick to a Budget
-
Only 7% of people spend under their grocery shopping budget each month.
Research Questions
Our literature review informed our understanding of the grocery shopping space and allowed us to develop a refined set of research questions that formed the basis of further research.
-
How do different user personas approach and engage with grocery shopping?
-
How does user behavior differ between online and in-store grocery shopping?
-
What challenges and frustrations do users encounter during in-store and online grocery shopping
-
How can we create personalized and user-centric grocery shopping experiences?
Interviews & Shop-alongs
We moved into the primary research phase and decided to conduct semi-structured interviews, and if we could find volunteers, we would go with them on their shopping trips.
The goal of the interviews and observational sessions was to understand Gen Z's grocery shopping habits, technology usage, and pain points.
​
Observing users in action during shopping offered deeper insights into how technology affects decision-making and shopping experience.
​
​We interviewed 14 people, 3 of which were shop-along interviews. These interviews offered a lot of insights. the quotes and notes from the interviews were then organized into an affinity diagram for identifying relevant themes.
​
These organized insights were as follows-
In-Store Preferences
Shoppers value consistent product placement, clear labels, and recognizable packaging. Many enjoy browsing in-store to find deals and discover new items.
​
Checkout & Product Concerns
Lack of stock visibility and unclear expiration dates cause frustration. Human-assisted checkout is preferred for its ease and reliability.
​
Technology Suggestions
There’s interest in AR for finding items and smart carts to track purchases. Apps that suggest meals based on current sales are also appealing.
The combined insights from the literature review and the interviews, allowed us to arrive at the following how might we statement-
How Might We?
"How might we enhance the in-store grocery shopping experience for Gen Z by simplifying steps and improving efficiency?"
Personas
We then planned for for an upcoming focus group session. We created two personas with contrasting user needs to aid our focus group session, this proved to be a very useful suggestion from our industry partner. The personas are as follows-
The Pragmatic & Perfunctory Purchaser
This person is pragmatic, they are focused on practical solutions, are goal-oriented and adaptable.
They are perfunctory, they get things done in a routine or even mechanical way and are not too specific with details.
The Sincere & Saturated Shopper
This person is sincere, they are thoughtful and like to do things properly.
They are saturated, which means they fully immerse themselves in the experience of grocery shopping and thoroughly enjoy it.
Participatory Ideation
Since this project was part of a class, we periodically had access to our classmates, all MS-HCI students for research activities and user testing. This study was done with a group of 11 students.
The activity involved dividing the group into two and assigning each of the personas to each group.
​
Both groups were explained their personas, and were then asked to quickly ideate features/ services/ tools that their persona might find useful for 12 minutes, after which the personas were switched for both groups and another 12 minute ideation session began where each group suggested ideas.
​
At the end, the suggestions were picked at random and discussed among the group.
​
The ideas were then organized and added to relevant themes under the earlier affinity diagram.
Finalizing Ideas
The team then gathered for a final ideation activity, keeping in mind that we will ideate platforms and not just features. This led to more consolidated versions of ideas that were thus far fragmented. These ideas were as follows-
Shopping List Generator
An AI assistant auto-generates shopping list based on the user’s shopping behavior, pantry inventory, and meal preferences. To aid planning and help reduce trips.​
​
Community Driven Shopping
Helps users carpool to shop together, making long-distance, bulk shopping easier. Since distance and lack of transportation are major barriers for Gen Z shoppers.
​​
Social Media Tracker
Track your favorite social media content and recommend real-time trending product. there was evidence from primary research of social media impacting shopping lists.
The resulting ideas from this activity were then listed and placed on an usability/feasibility matrix, as suggested by our industry partner.
​
Usability was defined by how many of the research insights were addressed by the idea.
​
Feasibility was dictated by ease of creating a prototype that can be repeatedly iterated upon.
High User Value
Low Feasibility
High Feasibility
Low User Value
Design
From the Matrix we identified two ideas as most promising and decided to combine them into one
+
Smart Shopping Cart
Shopping List Generator
=
Smart Shopping Assistant
(Bag it)
We saw the two processes combine in a single platform when their use cases are visualized as "at home experience" and "in-store experience".
​
At-home Experience (List Generation): Users add recipes they want to buy to a list and ingredients for those recipes are added to the shopping list.
​
In-Store Experience (Smart Shopping Cart): Instead of making a real shopping cart, we integrated the idea into a mobile application. Users scan barcode of items as they shop, and receive a collective barcode for the entire list of items. Then scan the single code at checkout, saving time.
Storyboard
We named the tool we designed Bag it! The following storyboard illustrates a typical user's experience with Bag it!
At-Home Experience
While staying at home, I can browse recipes I wanna try, and all ingredients will be added to my shopping list automatically.
Before leaving home, I can confirm that the items in my shopping list are in-stock at the grocery stores I frequently visit.
Lo-Fi Prototype
We started with creating wireframes that outline the user-flow and used them to create lo-fi prototypes for conducting a round of feedback. The prototypes are depicted with the respective user flows as follows:
Onboarding
-
Create a new account
-
Select frequently visit stores which will be used for stock tracking
Feedback Session
In another round of activities with 12 HCI students, we conducted a user test by providing the participants individual links and allowed them to leave comments on the prototype. This session was followed by a round of discussions which provided insights for improvement. Following are the main concerns that arose from the session:
Store Selection:
-
"Why is there a limitation of selecting only 5 stores?"
-
"How did the system know my location?"
-
"What’s the order of the displayed list of grocery stores?"
​
At-Home vs In-Store Flows
-
"What’s the difference between shopping list and shopping cart?"
-
"It is not clear that I am choosing recipes first."
-
"How do I know what stage I'm currently in?"
User Tests
After iterations based on the feedback from the feedback session, we conducted 9 scenario based user tests with users of ages 22-28, and this group was a mix of students and professionals. The participants were made to use the prototype after incorporation of the design system. After which they were asked to give feedback via a Lickert scale survey. The survey results are as follows:
User Interface & Visual Quality
4.8/5
Ratings for visual appeal, text readability, and overall experience were consistently high.
Acceptance of Features
4.7/5
Adding ingredients from a recipe and shopping list management received strong approval from users.
Perceived Usefulness
4.8/5
Most users found the app enjoyable and agreed that it helped make grocery shopping more manageable.
Consistency of Feedback
3.6/5
"The app provided clear feedback after each step" had a low score, suggesting lack of clarity.
In-Store Scanning
3.8/5
Scanning items in store received a low score, indicating it wasn't clear how the feature will work.
Insights
Following insights were gleaned from the user testing feedback:
​
More Flexibility is Expected; Users expect more customizability like substituting certain ingredients in the recipe.
​
Explicit Guidance to Lower Learning Curve; Users expect to see more direct guidance on what to do for the next step, especially when they’re learning unfamiliar actions like scanning a barcode.
​
Manage More Than One List; It was confusing for users to toggle between two lists, i.e. the shopping list and the shopping cart. It was imperative that we make efforts to make it clear.
​
A tutorial flow was incorporated to explain the difference better and make the first-time user interaction more useful for further interactions and continuous use.
Design System
I created the following design system, keeping in mind the values that an app that supports grocery shopping.
Colors
To establish sentiments associated with trust, savings, freshness and health, we chose to go with a green theme.
#5DA271
Primary
/Branding
#255957
Secondary
/Accents
#151515
Body Text
/Background
#FAFAFA
Background
/Body Text
#F54949
Alerts
Prototype
We iterated on the prototype and incorporated the design system. And prepared the following Figma prototype of the mobile app - Bag it! You can watch a video walkthrough of the prototype below.
Reflection
This project allowed me to work in a small team of 3, where our responsibilities were clearly demarcated and we knew what functions to perform. I was in-charge of primary interviews, design system and final prototype. We did assist each other every now and then, as you do in a team, but this project taught me how to trust my team mates and wait for a cycle of feedback and iteration to complete itself before you move on.
​
One challenge I think we faced was a lot of scope mis-management, since the problem space was not strictly defined, it not only allowed us to venture freely but also made us slip every now and then when the team would have different ideas. But due to help from our industry partner, we were able to rein ourselves in and keep working towards a singular goal.
​
This brings me to my second big learning, how important testing is! This class allowed us to test the prototype and concepts repeatedly, which proved to be a great way to improve upon work, rather than waiting on responses from recruits or discussing internally.
​
At last, I feel I should really appreciate the role of our industry partner for this project, who not only provided consistent guidance and great advice but also reached out to other people from their team to come and talk to us and share their wisdom. This way I learned a lot from this project.