Designed a mobile app in response to Hellmann's D&AD New Blood Awards brief.

Designed a mobile app in response to Hellmann's D&AD New Blood Awards brief.

Let’s talk about food waste

Let’s talk about food waste

2018, RESEARCH / UX DESIGN / VISUAL DESIGN / USER TESTING

Hellmann's

Foodally is a mobile app that combats food waste culture by automatically tracking grocery expiration and suggesting recipes for expiring groceries. I pursued this project over 3 months to compete in the D&AD New Blood Awards and refine my design approach, which included: problem space exploration, user research, user personas, market research, information architecture, user flows, sketching, wireframing, moodboard, style guide, hi-fidelity visual design, prototyping, user testing, and iteration. 

hellmanns-clay

Problem Space

"How might we combat throwaway culture and cut food waste in the household?"

This is an excerpt from the brief provided by Hellmann's: "Create a Hellmann’s branded device, publication or service that addresses the issue of food wastage. Think about Hellmann’s standpoint, “We’re on the side of food”, and consider how it positions the brand as a champion of the goodness of food, and how this furthers its narrative around sustainability."

My goal was to not only create an app that reduces food-wasting behaviour, but integrates business incentives and product promotion for Hellmann's.

User Research

I began by conducting research on what might cause consumers to waste food in the household. Based on the University of Guelph Food Waste Research Project, the average middle-class household wastes about 4.5kg of food per week, of which only a third is unavoidable. Some of the contributing factors to food waste include:

  • Poor culinary skills
  • Uninformed shopping techniques, e.g. over-purchasing from bulk discounts
  • Poor meal planning
  • Eating out, due to hectic lifestyles and cooking less than anticipated
  • Low food literacy

Based on the research, it's a two-part process to change food-wasting behaviour: raise concern about the issue and equip individuals with strategies to feel they can make a change. I conducted user interviews with 12 people and asked 7 questions to understand current user behaviour, motivations, and attitudes related to food waste and grocery consumption.

hellmanns-persona

Market Research

I looked into existing apps that address food waste, including 11th Hour, NoFoodWsted, MintScraps, Winnow, Wise up on Waste, and Too Good To Go. I chose to focus on the household as my target user group, because there was greater access to research participants given the time constraints. I investigated 3 existing apps in-depth: Fridgely, FreshFridge, and BEEP.

hellmanns-market-1

Fridgely is an app that tells the user when food expires. Users either use receipt image recognition or scan the barcode of items.

hellmanns-market-2

FreshFridge is an app that scans the barcodes of groceries, tracks their expiration after manual entry, and sends the user alerts.

3. BEEP

hellmanns-market-3

BEEP! sends users alerts and has features for itemizing products into categories to help find them easily.

I found a number of existing issues from my market analysis, which caused these key competitors to not have a lot of traction in the marketplace. I noted to include new features in my solution that consider the identified gaps. 

  • Errors from image recognition on the receipt. One Fridgely user shared that 14 out of 20 items were unrecognized. This was partly due to abbreviations and codes for receipt items.
  • Barcode recognition didn't always work. Users complained that the name, size, or expiration date weren't filled. Because of this error, users need to manually enter the expiration date after each item is scanned.
  • Expiry dates were inconsistently populated. It also wasn't clear if the barcode generated the expiration date or if it needed to manually added.
  • Limited information displayed for each item. Users can only see the name of the item and its estimated lifetime, but not the quantity, purchase date, etc.
  • Products can't be deleted prior to expiry date. This can be frustrating and confusing if the user is forced to see items that they no longer have, especially for those with long expiry timelines.
  • Poor UI.
hellmanns-feedback

Information Architecture

Gathering the data from user research and market research, I refined my idea by identifying the focus of my solution and establishing its features through information architecture artifacts. 

I made the business assumption of partnering with large grocery chains to obtain their product mapping of grocery codes to product descriptions, as well as best-before dates for batch orders. I made the technical assumption of developing a comprehensive database of recommended shelf life to improve data accuracy.

The Concept

"Track the freshness of groceries in your household and receive recipe suggestions for ingredients that are about to expire in order to combat food waste culture."

The Concept

"Track the freshness of groceries in your household and receive recipe suggestions for ingredients that are about to expire in order to combat food waste culture."

  1. Users scan the QR code on a grocery receipt to load groceries into the app. Integrated product mapping reduces errors and manual entry related to image recognition or product barcodes.
  2. Once the items are loaded, users can customize grocery details in-app. User control and flexbility are improved through the ability to filter items by storage location, adjust expiry dates, change quantities, or delete items. Sufficient detail will be displayed so users can accurately manage their inventory.
  3. When items are about to expire, the app will generate recipes for those items and prioritize those with Hellmann's products. This incorporates Hellmann's business needs into the product, in addition to their mission to promote sustainability.
  4. When items expire, users can choose to add those items to their in-app shopping list. 
  5. Users will receive customizable push notifications when items are about to expire or when new recipes are generated for expiring items.
  6. Grocery lists and shopping lists can be synced if users live with housemates.
hellmanns-userflows

Sketching

I sketched out several pages to visualize the primary screens and some of their sub-features. I decided to design primarily for iOS to challenge myself with the new iPhone X guidelines, but kept Material Design in mind for the Android version of the app.

hellmanns-sketching-1
hellmanns-sketching-2

Wireframing

Based on the sketches, I used Axure RP to draft low-fidelity wireframes. I realized at this point that I would need a lot more functionality to cover some of the original features I wanted to include, such as being able to adjust quantity when adding expired items to the shopping list. I considered the hierarchy and prominence of features, such as storage filters, notification customization, and calendar assets.

hellmanns-wireframes

Moodboard & Style Guide

When I began the high-fidelity design process, I first created a moodboard. I wanted to draw on major elements from Hellmann's brand into my app, such as the colour scheme or content styling. I took snippets from the Hellmann's website, their marketing material, and images of their products for inspiration. 

After putting together the moodboard, I began creating assets in Sketch App. I pieced together a style guide for the app, ranging from typography to icons, colour scheme, and visual components. I aimed to emphasize usability and aesthetics through a simplistic interface.

hellmanns-moodboard
hellmanns-styleguide

Visual Designs

Integrating the elements of the style guide, moodboard, and low-fidelity wireframes, I began creating screens. The visual design process was intended to bring the app to life with colour, delight, and simplicity. 

hellmanns-hifi-scangroceries
hellmanns-hifi-addgroceries
hellmanns-hifi-shoppingrecipes
hellmanns-hifi-settings

Prototyping

Due to time constraints, the primary purpose of the prototype was to provide an interactive representation of the app for research participants to understand the functionality of the app. I carried out user testing with several participants to seek out usability issues. I used InVision to create a clickable prototype with the visual designs I created, embedded below. 

Usability & User Testing

I conducted user testing sessions from an explorative perspective to understand a user's first impression of the app. The sessions were in-person and moderated, where a script was read and a note-taker was in the room as I moderated the session. I used contextual inquiry and think-aloud protocol as part of my formative testing approach. Here are some of the takeaways from the sessions:

  • Users wanted an onboarding process to describe primary features of the app, instead of being immediately prompted to scan. Some users tapped the tab icons first instead of responding to the scan prompt.
  • There wasn't enough contextual copy. It was difficult to understand the bottom navigation icons and expiry symbols without labels.
  • The information architecture wasn't well-thought-out. The amount of navigation bars were overwhelming, and there were suggestions to simplify them into filters.
  • There were missing features that could have added significant value to the users. For example, users wanted to add recipe ingredients to their shopping lists.
  • This app isn't for everyone. The biggest assumption is that all users would use the app, not just those who already care about food waste.

In order to practice script-writing and future summative testing to be conducted for the app, I wrote the following script with all possible tasks within the app (excerpt):

hellmanns-script

Presentation

In summary of all the work completed for the brief, I compiled my insights into an 8-slide presentation deck. I covered the user needs, approach for understanding users, market research, and both user experience and user interface design processes.

Iteration

The artifacts shown in this case study were re-created a few months after the project was completed. I revisited this project to improve UX issues, refine UI components, and elevate the overall look and feel of the app. I gave particular attention to the testing feedback, iOS Human Interface Guidelines, and Material Design.

hellmanns-markup

Key Learnings

  1. It's important to test survey questions before engaging research participants in order to eliminate my own bias. The questions should be tested to ensure they probe for true user behaviour and beliefs without the intention of seeking validation for any existing biases.
  2. Information architecture can significantly impact usability. How the information is grouped and presented to the user had a bigger impact than expected. Simplifying the learning curve reduces initial user frustration and increases user engagement. Users should have a clear understanding on how to interact with different parts of the app from the start.
  3. User adoption is an important consideration. This scope of this project may only be targeted towards those with an existing concern for food waste, which limits the impact of changing user behaviour. I would further explore other elements to encourage user engagement from other target user groups, such as gamification, rewards, or education. This could be validated through additional user testing and research.

next project

PROJECT JUPITER