Waste Not

UI/UX Design – Responsive Design

Prototypes

Project Brief

This project aims to design a multi-platform app/website for a civic issue using Figma and implement the Apple iOS design style and guidelines.

Project Idea

The U.S. discards about 80 billion lbs of food waste annually, equal to about 220 lbs per person and about 30-40% of the entire food supply. 80% throw away good food because they are confused about the expiration labels (Food Waste and Climate Connection, n.d.) Wasting food contributes to 10% of the world’s greenhouse gas emissions (McCarthy, 2021). There are better ways to deal with food surplus that you might have, such as donating it to a food bank and helping people in need. Food insecurity is a significant problem many people in the U.S. are facing. Before the pandemic, 35 million people across America had food insecurity, including 12 million children. The number is expected to rise by as much as 50 million in 2022 (Hunger in America | Feeding America, n.d.). Food insecure households need approachable information about food banks and food pantries in their community to ensure their family is fed and survive during this challenging time.

Goal

This project aims to create a platform that provides users with everything they need about food hunger. The current platform focuses only on one aspect of food hunger: making donations or finding food banks.

Challenge

The most challenging thing about this project is making the designs responsive and coherent across different platforms. Another challenge is ensuring the user interface is accessible using a minimal color scheme and easy-to-read sans-serif typeface.

Personas

1. People who are low income (generally under $20,000/year) who have food insecurity needs and financial struggles.
2. People who have an excessive amount of food and want to donate or people who want to donate money to a food bank.

Design Process

I watched many tutorials on using Figma since it was the first time I used it for a project. Figma interface is similar to Adobe XD, so I had no difficulty learning it. I decided to work with the iOS app and followed Apple Guidelines. After finishing the app design, I moved forward to working on the iPad version of the app. iPhones and iPads have a similar look, so it was not a complex transition between the two platforms. Designing websites is quite different from designing apps. I wanted to keep a consistent eye and feel between them, so I used the same design elements across other platforms. I gathered feedback for the initial designs and worked on finishing my techniques. After completing the design of individual screens, I created a prototype to see how it would work and fix any errors. It is a back-and-forth process that requires many minor adjustments to ensure the apps and the website work the way I want.