Angie Kwan
pointing-on-iphone-x.jpg

Hellmann's

 

Hellmann's

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

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

 
 
 
 

intro.

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

 
 
 

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 can reduce food-wasting behaviour, but integrate business incentives for Hellmann's (e.g. product promotion).

 
 
 

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 (University of Guelph Food Waste Research Project). 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

It seems that the biggest motivating factor for Canadian consumers to waste less food is monetary waste. Though in other countries, other factors like environmental loss is more prevalent. 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. I had begun to ideate a product that involved automatically importing a grocery receipt into an app through a QR code scan in order to monitor expiration, so I conducted user research to validate the assumptions behind my idea. I compiled the research I gathered into a user persona. 

 
 
 
 
 

market research.

I looked into existing apps addressing food waste. I realized many of them had the grocery store or restaurant as their target user. The apps I looked into include: 11th Hour, NoFoodWsted, MintScraps, Winnow, Wise up on Waste, and Too Good To Go. This encouraged me to focus on the household as my target user. I wanted to provide a solution to some of the key causes of food waste in the household, including poor meal planning and uninformed shopping habits.

I honed my research to apps geared towards household users. I investigated 3 existing apps in-depth: Fridgely, FreshFridge, and BEEP.

 

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

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

3. BEEP

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. 

  • Errors from image recognition on the receipt. One Fridgely user shared that 14 out of 20 items were unrecognized.

  • 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.

I refined my solution by giving consideration to these gaps:

  1. Partner with large grocery chains to obtain their product mapping of grocery receipt codes to product descriptions.

  2. Load grocery list directly into the app by scanning a QR code at the end of a grocery receipt to eliminate errors and manual entry related to image recognition and product barcodes. This combats the barrier of grocery stores that use abbreviations and codes for items in their receipts that can't be converted through image recognition.

  3. Comprehensive database of recommended shelf life for grocery items.

  4. Features for the user to adjust quantity and delete items.

  5. Display detail for each grocery item so that the user can accurately manage their inventory.

  6. Emphasize usability and aesthetics through a simplistic interface.

 
 
 

information architecture.

"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."

Gathering the data from user research and market research, I further refined my idea. I drafted a one-liner to describe the product, as well as a list of its key functionalities to help the user reduce food waste in household.

Users scan the QR code on a grocery receipt to track recommended shelf life. Items will be part of a database mapping between product codes and best before dates based on the grocery store's batch purchase. Once the items are loaded, users can filter items by storage location, adjust expiry dates, change quantities, or delete them. When items are about to expire, the app will generate recipes with those items and promote Hellmann's products. When items expire, users can choose to add those items to their in-app shopping list. Users will receive customizable push notifications when items are about to expire or when new recipes are generated for expiring items. Grocery lists and shopping lists can be synced if users live with housemates.

I created a user flow diagram to lay out how a user would interact with and navigate through the application. Based on the functionality I wanted to implement, I designed the information architecture through 5 sections in the tab bar: Grocery List, Recipes, Scan, Shopping List, and Settings. The grey boxes represent these universal navigation points, whereas the other boxes represent actions or functionalities within each section.

 
 

sketching.

I sketched out several pages to visualize the primary screens and some of their sub-features. I kept the Hellmann's slogan in mind: "We're on the side of food." I decided to design for an iPhone X device.

 
 

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.

 
 

moodboard & style guide.

When I began the high-fidelity design process, I first created a moodboard. I wanted to draw major elements from Hellmann's brand into my app, such as the colour scheme or content styling. I liked the minimalism of the logo and the primary colour of navy blue. 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 font to icons, colour scheme, and visual components. I focused on iOS styling for the app.

 
 
 
 
 
 
 

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.

 
 

prototyping.

Due to time limitation, the primary purpose of the prototype was to create an interactive, clickable prototype for the audience to understand the functionality of the app. Instead of refining my product for development, I carried out user testing with a few participants to improve usability. I used InVision to create an interactive prototype with the visual designs I created, embedded below. 

 
 

usability & user testing.

I conducted user testing sessions with test subjects on an older version of the visual designs. The sessions were meant to be more of an explorative opportunity for me to understand a user's first interaction with the app. The user testing 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 is a summary of the takeaways from the session:

  • Users preferred an onboarding process to describe primary functionalities of the app, instead of being immediately prompted to scan. Some initial reactions were to explore the tab icons, rather than enter the scanning flow for the first time interacting with the app.

  • 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 tabs in every navigation bar was overwhelming, and there were suggestions to convert some of those into filters for simplicity.

  • There were missing features that could have added significant value to the users. For example, adding required ingredients in recipes to shopping lists.

  • This app isn't for everyone. The biggest assumption is that only users who already care about food waste would use the app.

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 (excerpt):

 
 
 
 
 

presentation.

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

 
 
 

what did i learn?

  1. It's important to ask high-quality survey questions for gathering user research. These questions need to be given serious thought as to whether they truly eliminate bias as much as possible. They should not be worded with the intention of seeking validation for an existing bias.

  2. Information architecture can make or break usability of the app. How the information is grouped and presented to the user had a bigger impact that I expected. Simplifying the learning curve reduces initial user frustration and improves user engagement. Users should have a clear understanding on how to interact with different pieces of the app from the start.

  3. User adoption is an important consideration. It may have been a fundamental flaw to assume this app would be able to change user behaviour. Despite the fact that this may be true for users who want to reduce food waste, this app would never be used by someone who has no concern for food waste. Whether or not this is an issue within or beyond the scope of this concept, I feel that user adoption, and its subsequent impact, are important considerations that need to be further explored through user testing.