Grocer-eeze

A responsive web app to help users shop quickly and easily and to make it simple and enjoyable to select healthy options.

Objective

Everyone buys food. Grocery shopping is a universal experience, and yet it can be one-dimensional, frustrating, and take more time than most people desire. I began the Grocer-eeze project during the height of the COVID-19 pandemic, when people were concerned about shopping in person and were worried about supply shortages.

There are many grocery apps available. I began with the intention of determining what is missing in the current market. What do shoppers really need? How can we improve users’ in-person and online shopping experiences to better meet the demands of busy schedules.

Problem

Grocery shoppers need a convenient and efficient way to find and purchase all the items on their shopping list, because they need to feed their families healthy meals while leading busy lives with demanding schedules.

We know this to be true when we observe grocery shoppers completing their shopping experience more quickly and successfully.

My Role, timeline, and tools

I was the sole UX/ UI Designer for this project. Grocer-eeze began as a course project for UC berkeley’s UX Design Program. I came back to the project after several months to continue developing the app and to design the high-fidelity prototype. The timeline was broken up into two parts with the initial work completed July & August 2021. This phase involved mostly research and the early mock ups. The most recent development involved a 1-week period in May 2022.

Research

At the start of the project I conducted a competitive analysis and contextual inquiries. Users’ feelings surrounding grocery shopping were intense as it was during the COVID-19 pandemic. Some users were shopping solely online, and they expressed their dissatisfaction with the expense and the experience of the grocery apps. Users’ in-person shopping experiences were also heightened due to fears of supply shortages and the stress surrounding health risks. There was an increased desire to shop quickly and avoid crowds.

Contextual Inquiry

User Persona

After several interviews, I created Brad, a busy father of two that prefers to shop in person. I used this persona to assemble the primary needs, behaviors, and pain points of my interviewees.

User Stories & Flows

Based on data gathered during contextual and user interviews, I created user stories and user flows focused on three main goals. These flows demonstrate how users will journey through the app.

Affinity Diagram

Challenges

How do I focus my app? Many grocery apps appear cluttered and are difficult to navigate-too much information on one screen. I wanted to include the essential features but still design with clarity. I felt it necessary to create a clean look, aligning with the idea of clean food, efficient shopping, and an uncluttered lifestyle. Figuring out how to do so was a challenge.

Low-fidelity

Mood Board

I aimed for feelings of efficiency and health. I chose green and berry-red, with accents of orange and brown. The white backgrounds communicate a clean look and feel, and the overall style expresses an aliveness. Images include colorful food, farms and farm tables with distressed wood. The words efficient, enjoyable, and organized helped guide my choices.

Mid-fidelity

At this point in the project, before color and image, I began adding more detail to the screens.

Testing

I tested the Grocer-eeze mid-fidelity prototype on 5 users, between the ages of 25 and 45, using Marvel.

Key Findings:

• Users appreciated the clean look and easy navigation.

• Users wanted a filter for the grocery search.

• Preference to choose browse meals of enter in a meal.

• Users liked the shopping list, with ability to buy or take the list inside the store.

Hi-fidelity

Based on test findings, I created the high-fidelity screens. In addition to including detail, images, color, illustrations, I added features like a filter and ability to browse meals.

Grocer-eeze in context

I created mockups in different contexts to demonstrate how Grocer-eeze might look and feel ‘out in the real world’. For consistency of branding, I stuck with the farm table and distressed wood look.

Different break points

I designed Grocer-eeze with a mobile-first approach, but created different break points. Using a grid, 4 for mobile, 8 for tablet, and 12 for desktop, I followed the principles of progressive enhancement. Desktop breaks at 992 px.

Hi-fidelity Prototype

Grocer-eeze prototype

Conclusion & next steps

One of my successes includes the clean, healthy feel of the design. The app is easy to navigate and uncluttered. A unique aspect of Grocer-eeze is the way in which it can support online as well as in-person shoppers.

Next steps include building out additional features, such as a shopping ‘journey map’ to help users better navigate the in-person shopping experience. I plan to further test the app to gain additional user data.