My UX UI Designer origin story, the Grocerywise case study.

Grocerywise, Save Money & Save The Planet.

Sergio Andrade
Nov 7 · 8 min read

🥦 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.

Food waste is a big problem, see the facts!

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

Team Grocerywise developing our proto persona with the help of a magic floating laptop. From left to right; Swati Beri, Mckenna Kaiser, and Sergio Andrade.

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

Key survey insights that validated our assumptions.

🥥 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.

We used a strategy canvas to show the value Grocerywise brings to the grocery shopping app market.

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.

The four actions framework served to be our Northstar to avoid scope/design creep.

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.

We found common goals and frustrations in each demographic and lifestyle, leading us to valuable insights.
We gained a great understanding of how people feel. Empathy map by Swati Beri.

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.

Our subject, James Blake the conscious millennial. Art by Mckenna Kaiser Y’all !

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

The low-mid-hi-fidelity wireframes you see above were tested using a combination of Invison prototypes and Principle. We redlined while testing and sharing iterations.

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

Sergio Andrade

Written by

UX UI Designer with a love for AR

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade