Eric McCrorey
UX / UI designer

FoodShare

On a mission to unlock the value of wasted food in the home and the local community.

Image alt tag

Overview

Food share is on a mission to unlock the value of wasted food in the home and the local community. We want to change the priorities of the socio-economic system of society, to help create awareness around food wastage, climate change, and most importantly to reduce world hunger.

Project

Food Share

Role

Project lead, UX/UI Design, Team of 4

Duration

4 Weeks

Tools

Figma, Zoom, Slack

The Process

  • Research

  • Ideation

  • Design

  • Reflection

The Problem

Food waste is one of the biggest problems facing humankind today. Statistics show that between 33-50% of all food produced globally is never eaten, and 800 million go to bed hungry every night. With food share, we hope to take a part in changing that.

The Solution

To build a responsive website where users can partner with local communities, food banks, businesses, and restaurants to share use-by and best-date foods. Doing this will help in reducing the amount of food that is being wasted and help millions of people who go hungry every day.

Responsibility

To begin this project I began by putting together a zoom meeting with my team to discuss the project, its deliverables, and project due dates to get everyone on the same page before we went any further. In our plan, I broke down the steps of the project and reminded them of the deadlines that needed to be met. To ensure we stayed on track to meet the client's needs.

RESEARCH

Client Questions

After completing the initial team call. The team and I developed a list of questions for the client, to better understand the client's needs, likes, dislikes, and a general idea of the project. These questions helped us provide valuable insight into the food share project that we will be dealing with.

Some of those questions are as follows:

  • In addition to the overarching goal of a simple sleek design, is there a mood or tone of this product and its mission that you want to convey to users?

  • Can you provide us with examples of similar competitors' websites that you like and those that you dislike?

  • Is the homepage meant to grab more users, educate them about food waste, and sell a product?

  • How are users going to sign up? Is it free? Or a paid subscription? Or a free and paid subscription option?

  • Who can volunteer? Is there a certain age group you are focusing on?

IDEATION

User Stories

Once I received feedback from the client, it was time to figure out what the most important aspects of the project would be. I got with my team and we started out by categorizing them by levels of importance high, medium, and low. This allowed the team and I to focus on the major needs of the project and leave out the ones that were not needed.

Food Share


User Flow

After reviewing the user stories and understanding the needs of both the business and users. I created a user flow, this was so that we could get a better understanding of how the website would flow when in working order. I thought about what actions, decisions, and screens were needed for each page. I wanted the process of finding food and being able to support the efforts to be as easy as possible.

Food Share
DESIGN

Wireframes

After the user flow, as a team, our next step was to take the client's feedback and began to create the wireframes. I divided up the responsibilities, and individually we started to create wireframes by section. I continued to ensure communication was happening during this process so that we were all on the same page. My goal in this was to keep things simple, consistent, and organized while staying true to the client's needs.

UI Iterations

After I received client approval on our low fidelity wireframes, we shared the load and individually created 3 different iterations of the home page to present to the client. The client ultimately chose option #1 that you will see below. After finding out from the client which version he liked we took that screen as a reference to help create the rest of the remaining pages for the project.

Food Share
Food Share

Style Guide

As a team, I delegated the development of the style guide with little input. The team did an excellent job of keeping things simple, clean, and with bright colors. The client had one major color request: the berry red seen throughout the site.

Developer Handoff
Food Share

Developer Handoff

After getting final approval of the Hifi -wireframes and style guide. We were ready to move forward and send the final designs to the client. In this process, we annotated notes next to each page to communicate the main functionality of each page and how it should flow when the site should go live.

After completing the annotations, I reviewed the final design/annotations one last time to ensure the designs were client ready. You can capture the final product as seen below.

Final Design

What I learned:

As the team leader, I learned a lot about what it takes to effectively lead a team through a project well. Being able to communicate and ensure we stayed on top of each deadline, and deliverables and working together was a key component in the successful deliverance of this project. I was lucky enough to work with a great team who worked well together, which made my job as the team leader so much easier.