Overview
Context
I designed this mobile app as my final project for a UI/UX class I took at UC Davis. The prompt was to create a digital product that addresses a global equity issue of your choice. I chose to explore solutions to food inequity and inaccessibility.
My app is intended to be developed by Freedge, an international organization that aims to reduce food insecurity and food waste around the world. Freedge promotes equal access to healthy food through the installation of community fridges (public refrigerators) that are used to share food and ideas at the neighborhood level. I chose to design for this organization because there are actually several Freedges in my area, and I was really inspired by how they used equitable food access to bring the Davis community together.
My Role
As the sole designer for this project, I was responsible for creating the UI, UX, and graphics for this app. I conducted equity-based research, developed user personas, and animated my prototypes. Because Freedge is a pre-existing company, I also attempted to integrate their philosophy, information, and aesthetic into my product.
Timeline
The first week of this project was dedicated to brainstorming and researching equity problems and possible solutions as a class. Individual work began in week two. During this time, I further explored these equity issues from a designer’s perspective, narrowed down the problem I wanted to address, and began ideating my solutions. I used the remaining two weeks for prototyping and user testing.
Project Brief
Problem
How can we come up with ideas for digital products that address issues of equity in our society?
I chose to address the issue of food insecurity and inequity. More specifically, I wanted to explore how varying levels of food waste could impact an individual’s access to affordable food. The secondary issue was that while there is a website (see below) and Facebook page for Freedge, there was no clear and easy way to participate in or communicate about Freedge use, which is an especially large issue while social distancing is necessary while accessing Freedges and handling its food contents during a pandemic.
Product
I designed an application that would streamline the processes connected to Freedge in order to further reduce food waste past what Freedge is already doing. Because of the short timeline for this project, I chose to focus on the donation, pick-up, scheduling, and browsing aspects of these processes. My goal was to provide a quick and easy way to perform these tasks in order to excite users and inspire them to use Freedge as a resource more often. This app is also catered towards the current pandemic, so the app features that involve planning in-person actions currently do not allow for physical overlap in order to keep users safe.
Outcomes
Should this app be officially produced, possible outcomes might include an increase in food recovery, better need-based distribution of food for improved food security and equity, and more willingness by families and local stores to reduce food waste since they may do so in a easy and safe manner.
Research
Survey
I wanted to start small and focus on a specific audience that I had a lot of access to in order to better understand potential problems people were facing regarding food inequity. I created a Google Form survey that was sent out to Davis residents. The survey asked questions about food waste in the area, challenges when facing food insecurity, and questions about Freedge to get a general sense of how much the public knew about this organization. While some participants were parents or grandparents, it is important to acknowledge for audience and bias reasons that most of my respondents were students attending UC Davis.
Similar Products
Because I was less familiar with food-based digital products, specifically in regards to food recovery, I decided to research apps, websites, and organizations that specialized in this area and breakdown their strengths and weaknesses. I discovered DavisPantry, Olio, and YourLocal and analyzed their interfaces and proposed potential user experiences that would help me better understand who my users were and what their needs looked like.
Audience
Target Audience
I centered my target audience around the two most widely used Freedge processes: donating food and receiving food. In the Davis area, I found through my Freedge research that the main group looking to reduce their food waste is stores and businesses in the food industry. I discovered that the largest group struggling with food insecurity were college students without outside or adequate financial support. Finally, the group that might contribute equally to both appeared to be households looking for quick and affordable ways to get food for their families that is also primarily healthy. I therefore chose these groups as my target audience.
User Personas
After breaking down my target audience into three essential groups, I developed general user personas for each of them in order to better understand the intersections and differences between each user. This led to specific user profiles that could act as common users or edge cases for my design.
Young adult who just graduated from UCD (no longer able to access pantry) who struggles financially and is looking for more affordable food options
A UCD student who is financially set but wants to do more to combat food waste
Local business trying to figure out what to do with their food surplus
Family facing food insecurity that struggles to find healthy yet financially sustainable food options
Storyboarding
I considered my user personas alongside my food-based applications to explore possible ways in which my product could be used by each persona. I began with the local stores and businesses persona as this is the first “step” in the food waste and recovery cycle- food needed to be donated to Freedges first before those in need could have access to it. I further refined this persona and created the fictional bakery “Bill’s Bread”, with Bill as the bakery owner and head chef. I contemplated reasons Bill might discover the Freedge app, ways in which he might find local Freedges, and what some of the emotional “ups-and-downs’ might be for Bill’s Freedge journey.
Ideation
Affinity Mapping
My next step was to use my storyboards to brainstorm the components and characteristics of my proposed design solution. I compiled a detailed list of every user interaction I could think related to Freedge before grouping them by similar goals, steps, or issues. I formed six main categories each with dozens of interactions. I summarized these interactions with action based “-ing” verbs to understand the my goals for each main feature.
Profile- creating, customizing, updating, favoriting
Browse- searching, filtering, selecting, removing
Donate- describing, scheduling, giving
Request- asking, displaying, thanking
Visit- confirming, finalizing, directing, commuting,
Build- learning, understanding, supporting, creating
Alerts- notifying, disrupting, explaining, clearing
SWOT Analysis
Looking over my lengthy list of potential characteristics for my product, I realized I was headed in too many directions and was overcomplicating my app. I needed to rethink which of these six processes should be featured in my app so that users wouldn’t feel overwhelmed or confused when using my product. I reconsidered what my three different user groups desired and needed through the SWOT method of analyzing the potential strengths, weaknesses, opportunities, and threats of my current design direction.
Weaknesses
Inaccessible
Information-heavy
Dependent
Strengths
Human-centered
Personal
Follows design systems
Threats
Overcomplicated
Need-basis fails
Too niche
Opportunities
Centralize
Streamline
Support/Inspire
Task Flow
I kept these findings in mind while I began iterating task flows that could occur during a user’s interaction journey. I created simple flows for central tasks that would reflect their corresponding “-ing” verbs. Despite their simplicity, I felt like there might be too many steps which could lead to user frustration or lack of interest. I began omitting certain non-vital steps like “setting your favorite Freedge” so users would not be immediately discouraged, bored, or feel inclined to quit the app.
Digital Sketches
For the final step of my ideation phase, I took all of my ideas and goals from this stage and began implementing them as digital designs. I decided to temporarily put the profile, visit, build, and alert categories on hold due to time constraints. Though I still feel these are important to an overall positive experience for a Freedge user, I wanted to return my focus to the original issue food inequity. I felt that pursuing the browse, donate, and request processes were the best way to provide solutions to this problem.
Prototyping
Lo-Fi
I wanted to explore secondary screens before prototyping the homepage so I could better understand exactly which elements should be accessed from there. I began with the donation process screens, where I implemented a prompt, search bar, and food option overview categorized by food type; favorites and recents were displayed at the top for quicker and more personable functionality.
Mid-Fi
As I moved to my mid-fi prototypes, I focused on developing a consistent design style across my screens. I further incorporated Freedge’s font logo to add a bit of playfulness to my designs, and complimented these with more modern, sans-serif fonts. I also worked on integrating color or lack-there-of into new areas to strengthen the visual hierarchy of each screen.
User Testing
Peer Reviews
My classmates reviewed my designs at each stage of the prototyping processes. These were some of the key pain-points I discovered:
Lo-fi: “The plus signs used for adding items to your cart were too small and close together to be able to add the the intended item without making mistakes first.”
Mid-fi: “There were a couple of times where I didn’t know what to click on next. It took me awhile to realize I could login from the square bubbles page, or that I could exit out of the cart by swiping down.”
Hi-fi: “I feel like you have two design approaches and aesthetics that aren’t the same. One seems for bold, playful, and in your face, while the other seems more minimalistic and sophisticated.”
I took each of these comments into consideration as I began designing my final hi-fi prototype. I further separated the food items available into modules in order to provide adequate spacing for interacting with them successfully. I also redid the entire “get started” page as well as my login page. Finally, I switched to more modern graphics and current design systems for each to help make my designs more intuitive. I hoped this would help me simultaneously work towards a unified aesthetic and design style for Freedge.
Task Completion
I had three users complete a set list of tasks for my hi-fi prototype and monitored their actions. My goal was to see if I had successfully alleviated some of the pain points brought up from peer reviews and made the “problem” processes easier to navigate. Here is an example of a scenario I created to test this:
“You are resident in Davis who just baked four dozen cookies for a fundraiser, but you weren’t able to sell them all. You now have a whole lot of cookies you don’t really want, but you’d feel bad just throwing them out. After searching for apps that might help you reduce your cookie-food waste, you stumble upon the app Freedge. Freedge lets you give and receive extra food items in your community. After signing up for the app, find out where the nearest Freedge to you is. Then schedule a time to drop off your extra cookies at that Freedge.”
The speed and ease at which my users could complete their tasks had definitely improved after my revisions, however a couple more pain points were brought up as a result:
Some of the fonts might be two small for a mobile app
It was difficult to not press “edit” and “delete” at the same time while trying to complete an action for an item in the cart
Being able to swipe between screens was a useful function that was not made clear as an option to users
I changed the font spacing and sizing for certain screens to help fix this problem. I am also currently exploring ways I could implement a short app tutorial that would include a brief overview of how to use the apps processes and features, including swiping left or right as a way to change screens.
Final Prototype
Future Changes
Due to time constraints, my targeted audience is still very small and was only focused around Davis residents. I’d like to better separate myself from my users and begin broadening my audience to include individuals outside of my area. I also wasn’t able to make it to the hi-fi stage for some of my screens, such as the the checkout screen. I’d want to further develop these screens and their animations to make the overall user experience more intuitive and delightful. Finally, I would like to conduct another round of user testing afterwards, including with the Freedge organization and members themselves.
Challenges
Encouraging people to test out my product was definitely difficult. I struggled with being able to offset the negative emotions that people expressed amidst a pandemic, with school and design classes seen as a dreadful by a lot of students. I think the overall tiredness of students made them want to do a survey even less than normal.
I also really struggled with making my app accessible to people who really need it. I realize that there is a good chance individuals who are struggling with food insecurity might not have access to smartphones or related technology and therefore not be able to benefit from my app.
Takeaways
Reassessing and considering your product’s audience throughout the design process is key to successful accessibility.
It’s important to narrow down your design’s purpose and goals, but only after you’ve explored all the options for both first.
Designers can create digital products that don’t just further inequity, but go a step further and act as solutions to inequity issues while promoting equity; I am beginning to better understand how to do so from this project.
I discovered I have little experience with branding would love to experiment with this more as I did with the Freedge organization.
>> FINAL PRODUCT
Freedge Mobile App Design
The Freedge Mobile App helps users reduce food waste by allowing them to donate or pick up excess food. It’s modern yet playful design acts as a friendly, personable interface that will encourage users to use the Freedge app consistently and be excited about food recovery. Freedge is first and foremost human-centered, and lets users fully customize their Freedge settings to better cater to their needs, such as allowing filters for dietary setting or favoriting local Freedges. It’s design also takes into account the current pandemic and makes its user’s safety a high priority, offering a typical scheduling system for accessing Freedges with a 15-minute gap between each visit. Overall, the mobile app that I’ve created streamlines the Freedge processes and centralizes them into one place, making food recovery simple, fun, and easy to do for a regular user.
This final hi-fi prototype video shows a college student with an existing account logging-in to her account on a new device.