FoodWise
No more wasting food, get to know your neighbours

"... over 1/3 of food produced and distributed is left uneaten, taking up resources of input worth up to $100 billion annually."    The National Zero Waste Council

The Challenge

Food waste is a significant issue both locally and across the country. According to the National Zero Waste Council, more than a third of food produced and distributed in Canada never gets eaten, resulting in significant environmental, economic and social consequences. This inefficient use of resources forces local governments to pay for added avoidable waste disposal, generates greenhouse gases at all stages of the production and distribution chain, and costs the Canadian economy up to $100 billion annually. (Learn more here)

"How might we optimize a household's inventory without wasting fresh food and still maintain a healthy diet?"

My Role & Contributions

In a team of excellent collaborators, I found myself contributing to all aspects of this increasingly, pervasive and persistent societal challenge. Below are further details on the specifics.

Planning & Roadmap – Contributed to project planning and defining of scope within a team of UX Designers creating requirements via Miro and Google Docs.

User Experience Designer & Researcher – Conducted interviews, gathered secondary research materials and data analysis and planning. Major contributions to lo and hi fidelity prototypes and interactive prototype.

User Experience Visualization & Writer – Sketched and wrote storyboard scenarios and major contributor to slide deck copy.

Slide Presentation & Video Animations – Major contributor to research and final presentations using canva online collaborative tool and animations.

The Workplan

My Team’s workplan consisted of 5 main parts:

  1. Firstly, we tried to understand & define the Problem we’re attempting to solve.

  2. Then we Started brainstorming our ideas to structure our solution and applied it in a scenario.

  3. After that we used our most relatable ideas that emerged from our research & used them to finalize our roadmap.

  4. A product prototype that shows the functionalities of FoodWise at an interactive level was built.

  5. Testing our ideas is our intention in order to learn from feedback.

Capstone 1

Define

Learn about and define the problem space

Ideation

Generate ideas towards a possible solution

Synthesize

Shape promising idea(s) to take forward

Capstone 2

Prototype

Build an interactive prototype to demonstrate our ideas

Evaluate

Test our ideas and learn from the feedback

Research & Synthesis

Interviews

In defining our problem space our research consisted of interviews of 2 different user types:

User Type 1: In Charge of Groceries

  • Not familiar with food banks
  • Buying in bulk
  • Reducing grocery store visits
  • Small households buy bulk food because of pricing and packaging.
  • It is hard for them to finish before the food expires. Especially for a healthy diet, vegetables get spoiled fast.
  • They try to reduce grocery store visits due to the pandemic situation.
  • Not familiar with local food bank operations / services.

“When I buy butter, there’s no way for me to use all of it before it expires.”

User Type 2: Food Insecurity

  • Time is a concern
  • Habits on dealing with food waste
  • When finances are not an issue, time is the next concern.
  • The upbringing of an individual to discourage food waste, carries forward to their current habits
  • Food choices can satisfy hunger, but not necessarily nutritional needs

“My finances at the time were actually okay, but I felt like I was eating too much salt … I feel guilty making unhealthy food choices to satisfy my hunger. “

Empathy Map

For both user types based on the interviews to draw insights from.

People in charge of groceries especially from smaller households tend to buy in bulk to save $ and end up with wasted food.

People who experience food insecurity say that saving time is an important part of diet & eating habits.

& also try to get help from friends & family.

To summarize both user groups wanted EFFICIENT USE OF FOOD.

"In Charge of Groceries"

  • Small households purchase in bulk to save money; end up with a lot of wasted food

"Experiencing Food Insecurity"

  • Saving time is an important part of diet and eating habits
  • Try to get help from friends and family whenever possible

Empathy Map

Empathy Map

“Efficient use of food“

Journey Map

Next we created User Journey Map with our user groups.

In this map a problem arises with extra ingredients and or leftovers that end up going to waste within the stages of cooking & finishing a meal.

We saw a need to facilitate a process of preventing food waste through food-sharing along with online communication that makes cooperation among neighbours a delightful experience.

Journey Map

Journey Map

Brain Wiring

To find a sol’n for the problem we used brain wiring as an ideation technique.

Ideas we generated from this activity were:

  1. Share food with family & friends

  2. Social media for community building

  3. Recipes & ideas

  4. Exchange food, build camaraderie

  5. Promote urban farming/gardening initiatives

Brain Wiring

Brain Wiring

Design Concept

We went with a mobile app type of form factor considering the large social media component inherent in a community-based possible solution. A medium that most people would be familiar and comfortable with which might enable a type of grassroots adoption.

Sketches

The initial sketches for our app cover functionality for:

  1. Messaging

  2. Setting up a date to meet

  3. Item lists

  4. Item displays

  5. A review system

  6. User Profile page

Sketches

Sketches

Moodboard

A moodboard was developed for our app’s visual style. We wanted FoodWise to represent a sense of warmth, community, satisfaction, with a hint of playfulness.

Our user interface concept was somewhat inspired by tinder & other similar apps.

We aimed for a warm colour palette of mostly orange.

We also considered basket weave like textures along side a more conventional smooth gradient vector type of look for visuals.

For typography we wanted something straightforward, mobile friendly & versatile in many types of spaces, utilitarian, so we came up with a sans serif.

Moodboard

FoodWise Moodboard

Wireframing & Prototyping

For our wireframing and prototyping needs we went with Figma. It’s a readily available collaborative online tool similar in workflow to other software applications in the same space.

To demonstrate some of the more involved interactions we used After Effects rendering to mp4 video or animated GIF’s when needed.

High-fidelity Wireframes

Here you can see the hi fidelity wireframes and how our inspirations have been translated to the mobile platform.

Wireframes

Wireframes 1
Wireframes 2
Wireframes 3
Wireframes 4

Task Flow

To detail specific app function our team outlined four primary task flows.

  1. FoodWise Launch -> Home -> I Have -> I Want

    Initial launch of the FoodWise app takes you from the opening animation to the home screen – that consists of top half map indicating neighbours with I have & I want FoodWise postings corresponding to the bottom half posting details.

    2. Task Flow 1

    Task Flow 1

  2. FoodWise Home -> I Want Post

    The second flow of putting up a FoodWise post by tapping the plus icon at the bottom of the screen to an input form to create and confirm the post.

    3. Task Flow 2

    Task Flow 2

  3. Arrange meet through Foodwise messaging

    Arranging a FoodWise meet starts with tapping a member "I want" offering that launches the FoodWise messaging where they decide on a date, time & agreed location.

    4. Task Flow 3

    Task Flow 3

  4. Rating FoodWise Member offering and hand-over

    The fourth flow is how one would after an agreed meet rate a FoodWise member’s offering & hand-over of a given member’s food item. This would be done by selecting the specific member offering within the member’s profile that would bring up a rating form with available comment field and star rating selection & confirming.

    5. Task Flow 4

    Task Flow 4

Interaction Design

In building the FoodWise prototype we carefully explored, Elements, Laws, Dimensions and Characteristics of Interation Design which are shown here:

Elements of Interaction Design

  • Motion
  • Space
  • Time
  • Appearance
  • Texture
  • Sound

Laws of Interaction Design

  • Moore’s Law
  • Fitts Law
  • Hicks Law
  • Tesler Law (conservation of complexity)
  • Poka-Yoke Principle
  • Direct and Indirect Manipulation
  • Feedback and Feedforward

5 Dimensions of Interaction Design

  • Words
  • Visual Representations
  • Physical Objects/Space
  • Time
  • Behaviour

Characteristics of Good Interaction Design

  • Appropriate & Smart (Consistency in Design)
  • Trustworthiness
  • Cleverness
  • Responsiveness
  • Lucid Playfulness and Pleasure

FoodWise Map Utility

The FoodWise map locates members with "I have" and "I want" postings.

Composite Location Numbering

Hick's Law: more choices = longer decision time

The number display of the map offers the ability to adjust precision for cognitive off-loading for the user while navigating the visual location display.

Graphical Elements

Various visual elements are utilized:

  • Icons to represent actions
  • Map to represent relative location space
  • Contrasting colours to signify selection

Review System

In the later stages of the app's flow, users are prompted to continue interaction through giving feedback to other users, and vice-versa.

Dimensions of Interaction Design

Users provide feedback through a familiar star rating system and comment field.

Animated Message Updates

A texting type of messaging system we thought would be conducive to the social community building we’re looking to foster.

Elements of Interaction Design

Motion & Sound

When the user receives a message from another user, a message "speech bubble" pops up with a distinctive sound synced along.

Animated Launch Sequence

As with show and movie title opening sequences the launch of an app is an opportunity to delight and invite the user in giving them a sense of the type of experience they are in for.

Characteristic of Good Interaction Design

Lucid Playfulness and Pleasure

Launching of the FoodWise app brings you in with a basket falling into view followed by food items playfully dropping into view and zoom in fade to FoodWise Home Screen.

Figma Interactive Prototype

The actual interactive prototype was built using figma and where we deemed it necessary animations were done using After Effects. Due to the use of an animated GIF for Task Flow 1 you’ll need to click the back arrow (<) to frame 1 (of 22) at the bottom of the prototype to see that animated FoodWise app launch.

Specific Task Flows defined earlier are shown here for convenience.

NOTE: Click here to go to the Standalone FoodWise Prototype.

  1. FoodWise Launch -> Home -> I Have -> I Want

    2. Click prototype back arrow (<) to frame 1 (of 22) to run.

    Task Flow 1

    Task Flow 1

  2. FoodWise Home -> I Want Post

    3. Task Flow 2

    Task Flow 2

  3. Arrange meet through Foodwise messaging

    4. Task Flow 3

    Task Flow 3

  4. Rating FoodWise Member offering and hand-over

    5. Task Flow 4

    Task Flow 4

NOTE: Click here to go to the Standalone FoodWise Prototype

Summary

Key Takeaways

A community based approach seems to be the way to go especially when we are talking about food exchange since this goes directly to trust relationships & accountability inherent in developing thriving local neighbourhoods.

As well a broader approach to primary & secondary research would be required.

  • Start with local-based approach
  • Champion trust and accountability
  • Aim towards community building
  • Require broader primary and secondary research

Next Steps

Our further considerations on moving forward would consist of:

  1. Adding a more detailed item/drop-off pick-up feature
  2. Do some usability testing, multi-variate heuristic evaluations to further refine the apps features
  3. Also, would like to incorporate a mode for local restaurants to offer excess food to locals or other food recovery social programs
  4. Lastly, we’d like to go into further development on safety measures for our users.

NOTE: FoodWise Slide Deck Presentation available here >>

© Jeff Lu - PROBLEM FINDING PRODUCTIONS 2021

Top