FeedFast — A Mobile Approach to Change

Jereme Wijesekera
6 min readFeb 24, 2016

--

Role: UX Designer involved with the Research, Wireframes, Prototype, and Brand Identity of the end to end experience of the product.

Tools used: Pen, Paper, Sharpie, Post Its, Whiteboard, Expo Markers, Sketch-3, Invision, usertesting.com, and Xtensio

FeedFast is a mobile application that tackles on key social problems such as resource distribution, food waste, and environmental sustainability. The application bridges a communication problem between local food banks and grocery stores with goals of reducing food waste and sustaining the earth’s environment.

The Problem

An estimated 133 billion pounds of food is thrown away every year in America alone.

This equates to $400 per person a year

Individuals and organizations have food donations available but it’s not reaching the next table in need.

The Goal

  • Create a mobile application that empowers people to donate their spare food.

The Process

  • Group of four UX Designers creating the mobile application experience.
  • Week 1: Research & Brand Identity
  • Week 2: Wireframe, Test, Prototype

As we embark on this journey… (Research)

Discovery

  • First we were discovering problems within the resource distribution realm and discovered that food bank inventories have a problem keeping their inventory stocked.

Interviews

  • We Interviewed multiple local food banks in the area and two local grocery markets to get an understanding of the frustrations of each.

Common Pain Points

  • Lack of Communication
  • Transportation
  • Lack of Organization
  • Inventory Uncertainty

Common Needs

  • A platform for the two parties to communicate effectively together
  • A way to encourage transportation
  • An organized list of donations and items

Personas

  • Two personas were created from the interviews. Terrance the Manager at a food cooperative and Christopher the Director of a food bank.

Terrance’s Frustrations

  • Fresh produce being converted into compost
  • Donations going to waste
  • Food banks requesting donations but never showing up

Terrance’s Goals

  • Corporate social responsibility
  • Fully stocked Food Banks
  • Decreasing hunger rates.

Christopher’s Frustrations

  • Communication within the community
  • Raising awareness about hunger within the community
  • Inventories not being up to stocked to date
  • Lack of transportation for pick ups

Christopher’s Goals

  • Feeding the homeless
  • Increasing communication between his food bank and other organizations
  • Decreasing hunger rates
  • Consistant donation rate

Product Summary

  • We used the pain points, needs, and personas to conceptualize an idea for a mobile application.
  • A mobile application for sending and receiving donations. The application will allow donors to list their donations on a live feed that can be seen by local food banks. The food banks can request donations off of the live feed and a driver from FeedFast will pick up the donation and drop it off to the appropriate food bank.
  • The mobile application tackles the issues of hunger, food waste, and environmental sustainability with a purpose in building a community.
  • Concept picture (storyboard) Here’s how envisioned it. (we use to be Food Storks)

Brand Identity

  • After identifying the concept of the idea, we decided to build a brand around the potential product.

Business Model Canvas

  • This allowed us to gauge whether the concept is feasible on a business standpoint. Also to see the value the business holds, it’s resources, channels, etc.
Business Model Canvas

Brand Identity Prism

  • Created a brand identity prism to bring the brand to life and to have an understanding of the internal values of the company.
Brand Identity Prism

Moodboard

  • Created a mood board to understand the feel of the brand based off of the original brand colors. Once we looked at the Mood Board for a couple of days, we realized that the old colors (green and blue) did not fit for the brand character we had anticipated.
Moodboard

Landing Page Qualitative vs. Quantitative (A different approach to surveying)

Based off of the brand identity, we decided to create a landing page and upload it on to usertesting.com to see if people were able to understand the concept. The Landing page included:

A value proposition

How it works section

Mission Statement

Once users were able to grasp the concept we were able to continue with our research.

Journey Map & Scenarios

  • Our next step into the process was to create a visual Journey Map on how users would interact with the product.
  • We created six separate scenarios on the journey map and visually showed how each scenario would be executed.
Journey Map and Scenarios

User Flow

  • After understanding how each party would interact with each other, we decided to go into creating a User Flow of how the screens would work between each party. We created two user flows, one for the donor side and one for the recipient side of it.

Design Sprint!

Sketches

  • With all the research available, it’s now time to start manifesting the ideas in a physical space. What better way to do that then to sketch it out?
  • After the group came up with a solid design foundation, it was time for the next step…

Wireframes

  • Let’s make these sketches functional. Converting them into wireframes will help us test the product out, understand how it works, and pass on to the visual designer.

Test

  • We tested the wireframes on four individuals to view the flaws in the design, and then came up with design solutions to implement onto the wireframes.

Iterations

  • We implemented the design solutions into the wireframes and refined the wireframes to fit the user’s needs.

More testing

  • We tested the refined wireframes to discover more flaws, came up with more design solutions and then iterated it to refine the product. Then the wireframes were passed down to the Visual Designer who increased the fidelity on the wireframes and brought the product to life.

Prototype

  • After the screens were designed, we uploaded the files onto Invision and created a clickable prototype to see how each screen interacts with each other. We tested the prototype which lead to another round of iterations.
  • The Prototype includes the Donor and Recipient side of the application. Link to Prototype
  • https://invis.io/ZU5T5O8MN

Next Steps

  • Create the driver’s side of the mobile application as originally intended to improve transportation between the parties.
  • Add a social media and share feature to raise awareness of the cause and get the community involved!
  • Expanding from Los Angeles to other regions in dire need.

I hope this case study inspired you to go on and create an awesome product! The Sky is the limit!

Cheers!

--

--