GrocerEase App
A mobile app that scans price tags to calculate the total cart cost, helping budget-conscious users avoid overspending before checkout
Tags: mobile application, finance, budget, scan-to-calculate, OCR
CONTEXT
Part of the UQ Ventures Curiosity Programme in June-July 2024. The UI design presented here is the 2nd version fully made by me, while the original version was created by my partner.
Winner of best pitch award.
SKILLS & ROLE(S)
Lead researcher,
Lead product designer, Presenter
Team of 2 product designers
Figma, Miro
TIMELINE
One month, 2024
TOOLS
THE PROBLEM
UQ Ventures Curiosity challenged us to create a concept that solves everyday problems. Our team decided to take finance as the topic because, as students, we found managing our money while on a tight budget challenging.
A study found that people overspend by 39% from their allocated grocery shopping budget, which emphasizes a significant challenge in sticking to their budget [1]. Based on our quick observations and interviews with our peers, we found that many students often overspend during grocery shopping due to impulsivity or being allured by discounts—thinking they are still within their allocated budget.
For example, people often keep adding items to their cart—whether due to discounts or impulsive decisions—without knowing the total price. Because of that, people only realize how much they are going to pay after they are already at the cashier.
A study found that having a shopping companion can influence how a person shops, including helping them avoid or make impulse buys [2]. Using this idea, we can create a “shopping companion” to help users make better choices when buying groceries.
CHALLENGE
How might we design a utility app that help users to stay in budget by being aware with the total price they are going to pay before they are at the cashier?
THE PROCESS
This project adopted design thinking methodology but, as this a short programme, we only asked up to design and deliver the app concept
1 - DISCOVER
Brainstorming & Interviews
As students ourselves, we reflected upon our own personal experiences as well as from friends and family’s. We shared instances where we were unaware of how much things in our cart would cost until we were checking out at the cashier.
Some anecdotes, such as buying impulsive things because of discounts, also shared by people close to us.
People shared their experience which implies that they tried to stay in budget while shopping, but they aren’t good at doing calculation on head while shopping.
Shoppers only see the total cost of their cart when they reach checkout, leading them unaware they might be already overbudget
KEY FINDING
Some individuals are not keen or confident on doing mathematical calculations on their own
Workshops
Throughout the programme, we participated in variety of workshops to help us discover ideas. Some activities including empathy map, value proposition canvas, and business model canvas. These helped us to see from end-users perspectives as well as from business end-point.
Competitor Analysis
As far as we investigate, we didn’t find any app that help shoppers calculate items during the shopping trip.
The closest thing would be the good ol’ calculator app where we have to manually type the number. The problem that might occur with calculator app were:
Shoppers might accidentally click the buttons as they are holding the phone and touch the screen while browsing products
Phone screen turned off and shopper had to unlock and re-opened it
While solo shoppers might navigate these potential challenges during their shopping trip, family shoppers, such as moms who bring little kids, might find it difficult to do extra task while taking care of them.
KEY FINDING
Shoppers sometimes buy things they don’t need because they have been influenced or FOMO
KEY FINDING
Other reasons to stick to a budget include cutting food waste and planning meals better.
KEY FINDING
Some shoppers might already have a budget set before the trip, but being carried away
KEY FINDING
Improving sense of awareness towards the potential expense beforehand may help
KEY FINDING
2 - DEFINE
Putting the idea into user story format of:
As a [type of user], I want [some goal/functionality] so that [some reason/benefit]
As a shopper, I want to track how much I will pay before checking out by scanning the product’s price tag and see the costs instantly, so that I will know if the total of everything is under or over my shopping budget
User Persona
We defined the primary persona of our app is a university student that tries to make every shopping trip under their budget so that they wouldn’t ran out of money by the end of the month.
Storyboard
2 & 3 - DESIGN: WIREFRAME & MOCKUP
Wireframes Ideation
SOLUTION 1
Lets you set a budget for each shopping trip
Allows individuals who are currently tight with their budget to be mindful as they do their shopping
SOLUTION 2
Scans price tags right from the shelf to calculate costs automatically
Makes the process easy and simple to use, no need for manual calculation
SOLUTION 3
Lets you manually change quantities or prices if needed
In case there’s a need for manual override, the scanned text is editable, and users can also increase/decrease the quantity of the product
SOLUTION 4
Shows the total cost of your cart in real time and compares it to your budget
reduces cognitive burden during shopping and allows users to know how much budget they have left before adding new things into their cart
SOLUTION 5
Shows how much you’ve saved when you stay under budget to help you shop smarter and handle your money better
Encourages shoppers to keep the good habit
Mockup Prototype
This mockup prototype is the second design version. The first version, which we pitched, was different and created by my partner, but it shared the same idea and flow. I recreated it because I lost access to the original Figma file. Since I developed the user flow, I was able to rebuild the UI and add my personal touch.
4 - DELIVER
Pitching & Judges Feedback
The judges feedback were overwhelmingly positive to our idea. They liked that the idea is simple, yet address the challenge that many people may experience.
One judge shared that the app may benefit, not only students, but people who are trying to shop smartly by building habit of not overspending. They suggested to try test it with moms and employees who live alone — those who might share similar characteristics of our persona.
GrocerEase won The Best Pitch award.
Take aways
It’s important to understand the context and situation of where and how the users will use the app
From this case, I learned that when designing an app, we need to understand the context of where and how the user is going to use it: are they going to juggle between bags, a basket, and their child? How about the emotional state when they are exploring the item’s ingredients or price tag? It is important to not assume that an app will always be used in a relatively calmer situations.
Therefore, a simple and to-the-point design is crucial.
Special thanks
Special thank you to the UQ Ventures team—Mayu and team—and judges Jack Qin, Shane Chidgzey, and Theia Gabatan for your invaluable knowledge and support to all of us in this cohort.
References
[1] Rodgers, E. (2024) Grocery Store Statistics: Where, when, & how much people grocery shop, Full-Service Market Research Company. Available at: https://www.driveresearch.com/market-research-company-blog/grocery-store-statistics-where-when-how-much-people-grocery-shop/ (Accessed: 10 July 2024).
[2] Chen X., Kassas B., Gao Z. (2021). Impulsive purchasing in grocery shopping: Do the shopping companions matter? Journal of Retailing and Consumer Services, 60, 102495. https://doi.org/10.1016/j.jretconser.2021.102495 (Accessed: 10 July 2024).