Click to copy
Copied!

YumYam!

No fuss, just shopping

Timeline

Mar- Apr 2021

Deliverables

Strategy, Research, UX, UI

Objective

Give shoppers a way to plan and buy groceries mindfully, conveniently, and in a way that integrates with their priorities.

Impact

Prototype testers were able to stay within budget while saving time, and reported buying fewer unneeded items.

Project Background

Grocery shopping shapes our health, finances, habits, and even identities. And yet, for many, it feels like a chore. Self-checkout, contactless payment, and delivery services are a big help, but these features simply expedite an already burdensome activity. Shoppers don’t want to have to choose between doing it quickly or doing it well because, more often than not, we are forced to do it quickly.

41 minutes is the average time spent on a grocery trip40% of the global food supply is ultimately wasted25% of grocery money is spent on sweets and processed food

From these insights I developed my point of view

Needfinding

Unseen
Hurdles

My initial observational study didn’t yield much result, as I couldn’t see the part of the user journey that took place outside of the store, when people plan their shopping around commitments, family, health. To better capture pain points as they arose I conducted a 2-week diary study with 6 participants, from which I extracted some common needs among shoppers:

  1. Tracking how much their groceries will cost while they shop
  2. Knowing if they’re getting enough food for the week
  3. Getting to the aisles they look for and avoid wandering
  4. A quick, automated routed that hits all the weekly staples
  5. Knowing if the food they're buying matches their dietary needs
  6. Knowing the environmental impact of the items
  7. Easily accessing fair trade products
  8. Minimising time spent in the shop
  9. Accessing quick and convenient payment methods
  10. Matching ingredients to actual meals they will make
  11. Being aware of promotions, reduced items, and limited stock items
  12. Knowing the shelf-life of fresh produce and how to best store it

Grocery shopping should be easy to integrate with our values and priorities, and never at odds with them.

Competitive Audit

While existing solutions do address some of the pain points I found in my research, none manage to offer a holistic systematisation of the entire grocery shopping experience.

business audit between grocery tracking apps, online shopping apps, nutrition habits apps

The Solution

A grocery assistant that automates in-store shopping by finding the best route through the aisles, and allowing shoppers to curate a collection of recipes and products composable into smart lists for specific needs or occasions.

digital device prototypewizard of ox prototyping with physical device

I then turned this into a physical prototype for some Wizard of Oz testing.

Prototype

Mindfulness
Integration
Automation

This project brought to mind the image of buffets and their functional elegance. We like independence, and we like just enough guidance to be able to comfortably pursue what we need.

With this rationale I sketched out YumYam's first iteration, an on-board assistant to integrate with shopping trolleys.

First time users must set up their account while at the shop, obstructing the aisles with their trolley.

The need to lift heavy items up to the barcode compromises the product's accessibility.

The upfront costs and infrastructural burdens associated with the tech will discourage franchises from onboarding.

The smart trolleys would be delicate and subject to frequent maintenance.

The on-board device would make the trolleys difficult to stack.

Pivoting

The easiest solution was to eliminate the hardware altogether and make YumYam! a mobile app. This better aligned with both my principles of mindfulness and integration, as shoppers could access the platform whenever they liked, and customise their shopping experience outside of the chaotic setting of the shop.

Testing

Some fatal flaws came to light while testing the prototype in actual shops:

Type

Unmoderated, 10-15 minutes.

Location

UK, remote.

Participants

4 shoppers aged 23 to 54.

Tasks

  • Register
  • Find a supermarket
  • Add 1 product, 1 recipe, and 1 smart list to the trolley
  • Link app to trolley and start shopping
  • Complete shopping flow

Research questions

  • Do shoppers understand the difference between the grocery list and the trolley?
  • Can users comfortably reach the in-store shopping flow?

Goal

Fine-tune the transition between the grocery planning flow and the in-store shopping flow.

Usability Study

The first iteration of YumYam! performed poorly in usability testing. A heuristic evaluation from two other designers helped me iron out some interactions, but the core issue was at the UI level.

redesigned nav bargeneral redesign to highlight interactions with sparing use of colour, and make elements more accessible

UX blunders or: how not to reinvent the wheel

Any designer’s first few works are embarrassing. But if they went the skeuomorphic route they can be really embarrassing. Lately I’ve been trying to rescue one such design for my UCSD HCI Capstone Project —It’s been a rough couple weeks.

I chronicled YumYam!’s complete redesign in a humorous blog post:

Design System

yumyam! logocolour palette
typography system

Final Design

A Different Way Of Shopping

mockup: intuitive and interactive onboardingmockup: choose store or explore on the mapmockup: tailored homepage, recipes, and smartlistsmockup: dynamic ingredients and customised suggestionsmockup: link trolley to enter in-store shopping modemockup: skip the queue and pay in app

Learnings

1. Some pain points go beyond user journeys
Universal, essential activities like grocery shopping can become so routine that pain points get inextricably tied to the experience itself. Research methods that help us find what people want, might not have the reach to let us see what people need. Sometimes it’s worth stepping back and forgetting what the problem is altogether, to try and document an experience for what it really is.

2. Don’t waste participants on premature tests
Any prototype is flawed by definition, but many first-iteration flaws are often oversights and inconsistencies that result from the messy process of ideation. Even though I felt confident about my design, I still decided to subject it to a preliminary test with two designer colleagues, thinking they’d find two or three problems… in their heuristic evaluation they found over a dozen violations! Going directly into user testing would have been a huge waste of time for everyone involved.

Going Forward

1. Nutritional tracking
This feature was present in my initial prototype, but ended up not being prioritised in development. I’d like to flesh it out in future versions to allow shoppers to better monitor how the foods they’re buying align with their health and fitness goals. This could take the form of a simple macronutrient breakdown of a shopper’s trolley content, lists, and recipes, as well as smart suggestions based on that.

2. Recurring purchases
A lite version of this feature is present in the current design, in which a list or recipe will exclude products that have recently been bought by the shopper and should still be in their pantry. The algorithm could be further refined to suggest a product purchase after an estimated consumption period.

3. Floor map
The app’s core feature of quick aisle navigation would be enhanced by the presence of an interactive floor map of the shop. Such addition was beyond the scope of the initial design because of its upfront requirements, but would be a no-brainer as a future update.