The Problem

My household needed a digital grocery shopping list that would track both the groceries we needed and what we already had on hand so we could avoid wasting food, time, and money. Existing tools were frustrating to use:

One app was clumsy, cluttered, and often inaccurate because it wouldn’t sync properly.
The next was slick and promising but too invasive of our privacy because it tracked our movements.
Another option was a note-taking app that synced well but was tedious to update while out shopping because it wasn’t easy to place the cursor on the mobile app screen.

I decided to design a better, offline-first app that would offer both grocery list and pantry inventory functionality.

User Research

I interviewed three potential users of the app I wanted to make, and my research revealed a handful of insights:

Convenience and ease of use are essential
Grocery list–making is always ongoing
Not getting what you need is frustrating
Some people organize shopping lists by store and/or grocery category
Some people shop to replenish staple items
Some people buy items to make specific recipes

A Calm, Organized Brand

I wanted HAVE/NEED’s users to feel organized and calm, so I created a clean, quiet, and casual brand. Its pastel highlighter colors, outlined button shadows, and dot grid motif are inspired by bullet journals.

The periwinkle brand color is cool-toned, desaturated, and soothing. This purplish hue is more interesting than a typical blue and avoids the saturated greens that competitor apps tend to feature.

I chose the clean, precise Graphik typeface because it’s not overused or robotic.

Inclusive Design

It’s important to me that my designs are inclusive, so accessibility best practices are always part of my design process—not an afterthought.

Visual Accessibility

To accommodate colorblind users, I used icons, text, and outlines to show changes in state instead of using color alone.

To make it possible for people with low vision to use the app, I designed oversized, semibold, and high contrast (13.46:1) list item text.

Manual Accessibility

Some people lack the dexterity needed to use swipe gestures, so the prominent segmented HAVE and NEED button control on the “New Item” and “Item Details” screens is essential rather than redundant.

Users can also tap a delete button at the bottom of the screen instead of swiping left to delete a list item.

Usability Testing

Four participants tested the usability of my prototype. I used these key takeaways to improve my design:

Three out of four participants didn’t easily find the HAVE tab when it was needed to complete a critical task, so I featured the two tabs in the welcome flow and reworked the loading animation to highlight the tab-switching interaction. I also gave the HAVE list a separate theme and background color (green) so users wouldn’t need to glance up to the tab names to orient themselves while reading the lists.
One participant expected that swiping left on NEED list items would move them to HAVE because the HAVE tab was originally to the left of NEED (so that the tabs could be read from left to right as “HAVE/NEED” like the app’s title). I swapped the tabs so the NEED tab is on the left and the interaction feels more intuitive. This correction better adheres to Jakob’s law because the first tab is typically on the left.
The second participant didn’t recognize the text box for the item name on the item details page and thus couldn’t type the name of a new item, so I updated the prototype to immediately show the typing state of the item name text box instead of the less obviously actionable empty state.

Design Challenge: List Items

The grocery list items had to be legible and scannable both under grocery store lights and in sunny parking lots. The oversized text I chose for its visual accessibility was a good start, but I also needed to experiment with row separation patterns.

Zebra striping wasn’t clean and simple enough.
Space between rows wouldn’t work because the lists needed to show the item quantity alongside its name.
Lines between rows didn’t let the individual items pop enough.
Standard cards with shadows were too visually heavy, and each card occupied too much vertical screen space.

My solution is technically a card, but its lack of a shadow keeps it visually light. Its dimensions are more compact than a typical card so that several items are visible at once, even on smaller phone screens.

Results

Saurav began developing HAVE/NEED as an offline-first iOS app in 2023 but had to put the project on hold because his availability changed.

Before that point, this project taught me how to work and communicate effectively with a developer. For example, Saurav’s feedback on my Figma prototype prompted me to redesign the app’s signup flow; it’s now much simpler because it uses the “Sign up with Apple” button instead of asking users to enter an email address and create a password.

Let’s get in touch.

Just click the button below and tell me about your design problems, goals, and wildest dreams. Even if you don’t hire me, you’ll meet a good listener with a curious mind and a unique perspective.