
Grocerywise, Save Money & Save The Planet.
🥦 Want the TL;DR experience? Read the first three paragraphs and let the visuals and headlines tell the rest of the story.
Mission
Grocerywise, a food waste-conscious app, helping people shop for groceries in a mindful way. Providing business an opportunity to promote a culture of sustainability through meaningful shopping experiences.
Outcome
Grocerywise is our final project for the UCI, UX UI boot camp we attended. Our project demonstrates our understanding of design thinking, UX UI design, process, and problem-solving.
Impact
Our solution addresses the issue of food waste by giving the shopper/user access to produce, a contributor to the increase of Co2 levels and wasteful grocery shopping. This will also encourage businesses to offer their inventory for other nearly expired food items at a discount resulting in an increase in sales.
My Role
User Experience & Interface Design |Augmented Reality Design | Strategy
Team Grocerywise
👩🏻💻 Mckenna Kaiser 👩🏽💻 Swati Beri 👨🏻💻 Sergio Andrade
Sowing the seeds
Our main focus was the average grocery shopper, once we understood them we would be able to produce a product that business could utilize. As we were in a UX UI design boot camp we were pressed for time, simultaneous assignments, and a goal to convey what we learned effectively and a need to be pixel perfect.😅
The obstacle is the way
We believe that the average grocery shopper and business lack the right resources to consciously make an effort to reduce food waste and aren’t aware of the impact food waste has on the environment, leading to a cycle of unmindful consuming behavior.

The road to a solution not taken
🍏An app that will help an individual and business reduce the food waste they produce.
🥬 An app that will give access to food that would have otherwise gone to. waste at a discount, thus opening produce & products businesses would have taken as a loss.
🥕A platform that connects people to like-minded people that want to share their surplus of food, businesses that promote a culture of sustainability, and institutions that have a need for food.
🌽 An app that will offer businesses a way to leverage gamification, augmented reality, and social media to create delightful & meaningful experiences for their customers while promoting a culture of sustainability.
UX Design

To better understand and empathize with our user we developed a proto-persona, user survey, and user interview plan to validate our assumptions and to guide us through our semi-structured interviews. Our user interview and survey were designed to better understand the users shopping habits and food consumption behaviors. These were the key questions we wanted answered;
🧄How do they feel about wasting food or products?
🍠What do they do with excess food and products?
🥔What is their understanding of a best by, use by, sell by, & expiration date?
🧅How do they feel about sharing excess food with neighbors/friends, & have they or are currently doing so?
🥕Do they feel comfortable buying discounted produce and products that may be close to expiring?
What we learned about the average grocery shopper

🥥 People are willing to buy close-to-expiring food if there is an incentive and serves their immediate needs within a day or so.
🍍People feel guilty about throwing away uneaten food, but do not make a conscious effort to change this habit. They try to be mindful but feel they do not have the right resources.
🍈People are a bit apprehensive about sharing excess groceries with friends, family, or neighbors.
🥭People don’t want to coupon clip, they want discounted products that fit their immediate need.
Analyzing the current market
Through our competitive analysis, we found there were already similar apps, websites, and concepts but they lacked the following factors;
🍊 Functional or engaging UI.
🍈 Social media integration.
🍍 Coverage outside a specific region.
🥝 A platform that benefits business and individuals.
🍑 Feedback about shopping habits, how they connect with food waste and their budget.

Our strategy canvas allowed us to understand where competitors are currently investing, competitive factors, the fulfillment of our user’s goals and needs, and what users currently receive from competitors.

Both also gave us a direction on how to convey our design decisions in our presentation and can be used as a visual aid.
People and progress
With the quantitative and qualitative data, we collected we created an empathy map and three user personas that represented the
demographics and lifestyles we encountered; the conscious millennial, newlyweds, and family of five.


Getting out of our own way

Our first user tests were conducted with paper prototypes using Invision. We received feedback from our participants advising us that the UI was too busy, tasks/ user flows were tedious and there was too much visual data to digest. We were trying to fit too many features into our app and therefore our UI.

We visualized our qualitative and quantitative data by performing an I wish, I like, and what if exercise, followed up with dot voting to understand the importance of features referring to the key takeaways from our qualitative and quantitative data. We were on a tight deadline and we still had to prepare our presentation and without a clear MVP, the clock was ticking.😳⏲
How Grocerywise can save your day
In this story we see James using Grocerywise to save money, time, our environment and his social life.

UI Design
Synthesizing our data into design
The user flow for the onboarding and shopping portion of our app you see below is a “hybrid flow” that combines the user goal (story), customer experience map, with a progression from wireframe to mid-fidelity prototype. We were able to be efficient and convey the aspects of each step while keeping the ideal user experience close to mind.


Framing out the future

Feedback is the foundation of any solution.
🗺 The map doesn’t always need to be visible.
🤢There is way to much green, you need some contrast.
🔍You don’t need to have a browse button since the search bar is always accessible.
⁉️How do I get to the profile and how can I see how I’m making an impact on reducing food waste?
🌎 I appreciate the clean, minimal flat design but it didn’t really feel like it was conveying the green & organic esthetic of a socially conscious company.
🔘 The buttons and text are too small.
😰🤦🏻♂️, the users spoke and we heard them loud and clear. We wanted to be as close to a minimum viable product as possible as we were racing against the clock with simultaneous assignments being due and a presentation we hadn’t even rehearsed yet. 🏃🏻🏃🏼♀️🏃🏼♀️⏱❗️
And now presenting..







Micro moves to make big change



The main feature
The videos below show our main use cases SHOP & SHARE with easy Onboarding
Seeing a bright new reality
Grocerywise AR
I put together a short video of our AR feature for our presentation demonstrating three use cases. Finding fresh food, donation centers, and items in store.
I have since refined the AR feature and will be following up on this case study with a post on how I prototyped, tested, and added more augmented reality elements using Adobe XD & Aero.
Looking back
We were able to meet our deadline and received great feedback on our presentation. Outside of the constraint of time, the largest limitation was the lack of resources we had for our research. Ideally, we would’ ve worked with a large grocery store brand to address their food waste problem with access to quantitative data, budget, and a refined business goal.
At the end
People and businesses don’t need to be convinced that food waste is a problem or the popularity of online shopping. Similar to a person understanding that they need to eat healthily and exercise to live a long happy life, a business providing employees with a living wage and safe working conditions. Both didn’t come into popular adoption overnight and have advocates. After all, we only have one planet and we need to take care of it, I’m optimistic we will but we all have to do our part. Thank you for your time, if you enjoyed this case study please give it a clap. Still curious? Have any questions or just want to give me feedback, send me a message and let’s grab coffee. 🤝☕
Progress is impossible without change, and those who cannot change their minds cannot change anything.
- George Bernard Shaw
Software utilized to execute this project.

Still curious? Click here to try out the Adobe XD prototype
