FoodSwap - Interaction Design Studio Project

logo.PNG

OVERVIEW

Timeline: September 2019 - December 2019
Process: Competitive analysis, personas, storyboarding, prototyping, visual design, wireframing, branding, etc.
Tools: Pen and Pencil, Figma, Adobe Illustrator

 
The Problem@2x.png
gOALS.png
 

DESIGN PROCESS

RESEARCH / Competitive analysis

How are people working around this problem currently?

  • Facebook Buy Sell Trade groups — people make posts advertising their surplus food

    • Current problems: posts often get lost and don’t show up until days later on people’s newsfeed

    • Takeaway: We need to take in account time-sensitivity due to spoilage of food.

  • Giving away to their friends or neighbors

    • Neighbors and friends don’t always want food due to taste, allergies, or they just don’t feel like taking it.

    • Takeaway: We need to connect those who actually have a need or want for the type of food.

TARGET

The primary users for our app are undergraduate and graduate student populations at universities. Two different user segments that we designed with in mind are college students that often have an abundance of food (e.g. avid bakers, people who plant produce, or manage campus organizations) and the students that seek affordable food on campus.

 

STORYBOARD

I was tasked with creating storyboards of potential uses of this app. Both involve our fictional personas, Skylurr and Dana.

2.PNG
1.PNG
 

WIREFRAME

We created a wireframe of user flows with sticky notes. It’s actually quite fun to get up and physically create designs.

3.PNG

We wanted to create flow from a main homepage where a user could take several actions.

  • Search for listings — users can search for specific foods they have in mind, such as cereal or flour

  • View what food is available (listings) — what people are uploading

    • Recent listings — better to get rid of food sooner than later.

    • listings about to expire — taking in account for the need for time-sensitivity as many foods are perishable.

  • Access their profile

  • Access messages for transactions

  • Learn more about how to use the app (essentially, a help button)

 

IDEATION

Below are the intial designs of our prototype. We focused our energy on functionality rather than form, hence the unrefined logo, palette, and placeholder images.

When creating the intial prototype, we kept these user tasks in mind:

  • Sign up / sign in

  • Messaging a student who posted a listing

  • Creating a listing for an item

  • Creating or editing their user profile

  • Saving listings from the home page or search function —> saved tab

  • Finding listings based on categories of goods (dry goods, fruits, pre-cooked, etc.)

  • Finding listings based on time (new psots)

  • Rating users based on truthful listings to maintain accountability

We made the following design decisions for Foodswap:

  • Card layout for listings — hey are an excellent balance between aesthetics and good usability. It clearly displays an abundance information, allows users to scan information quickly, has an excellent mobile response in which our app is structured on.

  • Use of authentication providers such as Google and Facebook to facilitate the sign up process and maintain accountability of members.

 
style guide.PNG

VISUAL IDENTITY

I was put in charge in creating a brand identity for Foodswap.

Grapes are symbols of altruism, charity, and abundance, fitting for an app that promotes giving away user’s overabundance of food. The green color palette compliments Foodswap’s eco-conscious mission of reducing food waste in the community. A single, outlined grape in the icon represents the action of giving away of food.

Furthermore, psychologically the color green often denotes “renewal and growth” as well as sharing and nurturing. Thus, we felt the color green would be a good choice for this app.

 

FINAL PROTOTYPE

Below are several screens of our final design. It implements the final visual design guidelines.

log_in.PNG
a.PNG
users.PNG
listings.PNG
 

FINISHING THOUGHTS

This was my first time creating a prototype and going through the process of UX Design.

I wasn’t expecting there to be so many steps just to get to the final prototyping stage, but I realized that they are absolutely necessary. Without clearly defining goals and requirements, it’s impossible to create an effective design.

If I were to have more time, I would like to dive deeper in user research by surveys to further scope out and understand what college students (the target domain). The research phase of design is so important, as it helps us determine requirements from the target audience themselves.