PC Express App

Shopping for groceries online can be a tedious task, even if you enjoy cooking. As a design exercise, I created a recipes feature for the PC Express iOS mobile app, with the goal of reducing the time the user spends deciding which groceries to buy.

Research

I recruited 3 candidates by asking friends if they've ordered groceries online recently, and then interviewed them on Zoom. My goal was to learn more about the experience of shopping for groceries online. The key takeaways from these interviews were:

Grocery shoppers spend lots of time making shopping lists.
They sometimes use recipes to help plan which meals they'll eat during the week.
Shoppers worry about using all their produce before it spoils.
The best grocery shopping features reduce the amount of time the shopper spends shopping.

Using these research findings, I came up with the problem statement:

Our online grocery shopper spends lots of time making shopping lists before they shop for groceries online. Our solution should help them plan upcoming meals to make this process faster and easier.

Ideation and wireframes

I ran a Speedy 8s session to ideate on features and other solutions to the problem statement. Out of 5 ideas, I selected two:

"Ingredients shopping"; quick add buttons under each recipe that allow the user to add recipe ingredients to their cart.
"Ingredients search"; a search tool that allows users to find recipes to cook based on the ingredients they have on hand. The search results show recipes that use those ingredients.

I also sketched out a few flows to figure out the logic of my wireframe screens, with the goal of laying out how users will find recipes and choose ingredients to buy.

Next, I designed the wireframes for the Recipes section and for the "Ingredients search" feature using my sketches.

Usability testing

I ran remote tests with 5 users via Zoom. Each user was presented with a functioning wireframe and given some basic direction: you're an existing user of the PC Express app, and you're looking for the new "Recipes" section.

The key takeaways from my testing were that users had trouble finding the recipes section; they thought it would be in the "My Shop" section instead of in the Menu. Users also didn't realize that they could scroll to view the ingredients on the recipes pages.

My tests also validated the overall concept behind the recipes feature: 3 of 5 users thought the "ingredients search" feature made sense and that it would be a useful way to find recipes and build a shopping list.

"I think this is awesome because it saves so much time. I don't need to go to different departments for different items. It's just at one place and it solves the dinner problem right away."

Iterating based on feedback

I made some adjustments to the user flow based on the insights from the usability testing. I added more screens to the flow and created a new entry point for the "Recipes" section to align with my interviewees expectations.

Replaced "Deals" with "Recipes" in the bottom nav bar.

Added tabbed navigation to recipe pages to make it easier to view recipes and ingredients separately.

I borrowed the design pattern from the cart page to design the list view on the new "Order ingredients" tab.

I added a "Saved recipes" feature to the "Recipes" section.

The full user flow for the recipes feature.

Conclusions

I was confident in my designs before I conducted usability testing, so it was humbling to see how confused some users were during the tests. This was the false-consensus effect in action!
I could have saved myself some time by being more confident in making changes to the app in my wireframes (replacing "Deals" with "Recipes" in the bottom nav, for example). In future projects, I'll be more bold in redesigning existing features if they're not serving the goals of the project.