Hack the Fridge
A passion design project of my own imagination.
An app concept designed to help preserve our planet by reducing the amount of waste we produce.
Project Brief
The goal of this project was to create a mobile app that could positively benefit the planet at large by reducing the amount of waste generated. I tried to think of ways that I could alter my own behaviors to leave less of a harmful footprint on the planet and worked backwards from there. My wife and I both feel terrible when we have to toss out perfectly good food that just spoiled before we got around to making something with it, so that became the focus of my app design: “How could I design an app that would help decrease the amount of wasted food?”
My Role
This was an individual project for me. For this project I decided to focus on the design side. Design is my favorite part of UX work and recently I haven’t gotten to do as much as I would like, so my sole focus was the design of the app.
Phase 3: Design
IDEATION
The first thing that I did was create a quick persona. Generally, I would have built up to the persona with user research. Essentially, this persona is just an amalgamation of my wife and me.
The next step was to approximate the user flow. I had an idea of what three main areas I wanted to be included in terms of functionality: Shopping List, Fridge Inventory, and Recycling Tips/Information.
Finally, I sketched up a wireframe of what the design might look like. It was quick but the design concepts started to form in my head of what I wanted the app to look like. I knew I wanted the home page to be cut into thirds and have big cartoonish heroes images. I also knew there would be a navigation menu that would be static on the bottom of every screen.
Mood board & User Flow
I created a mood board based based off the movie poster of a famously ridiculous and delightful 90’s movie about computer hacking. I also changed the name of the app from “Fridge Helper” to “Fridge the Planet” and eventually to “Hack the Fridge.”
Final User Flow (Click to See a Larger Version)
I created a more detailed and final version of the user flow using Miro. I used the updated user flow as a guide when building the Lo-Fi prototype. While building out the user flow I was able to think through the features I would need/want in the app.
LO-FI PROTOTYPES
The Lo-Fi prototype began with the home screen and the landing pages connected to the three hero image links on the home screen. I then added the calendar page. I focused on building the app using as many “symbols” as I could. By using symbols, what sketch calls their repeatable elements, I was able to establish consistency among the lists. I knew that this app would have a lot of basically repeated design elements and being able to use symbols allowed me to build the app faster, and to make changes globally if needed.
I was also cognizant of designing the app with enough contrast for accessibility concerns.
Hack the fridge ICONS
I was able to source a lot of the icons, but there were some that I couldn’t find the ones I wanted, so I created those. In addition, to the hearts icons, check boxes/circles, arrows and add buttons, I also created the grocery bag icon, the food icon for yogurt, and all of the navigation icons on the sub-menu at the bottom of the screen. I also altered the icons for the recycling types as well. Every icon I created I made them SVG files so as vectors I could make them any size I needed to them be.
Phase 4: Deliver
HI-FI PROTOTYPE
The Hi-Fi prototype is pretty true to the Lo-Fi. Most of the changes were implementing the color scheme from the mood board and replacing the temporary text with sample data. I also created a landing load-in page. I coordinated the colors of the title banners and the highlighted icons on the bottom navigation menu icons. I updated a few of the icons.
The recycling informational pages probably saw the biggest changes. I added a gradient to the background once I decided to match the background colors to the links on the previous page. I repositioned the headers and icons, and added shadows to the text to make it pop in contrast to the icons and background colors.
You can find a clickable version of the prototype HERE.
NEXT STEPS & TAKE-AWAYS
I’m fairly happy with how the app came out, but there are some areas and/or features I would like to update or add.
I would want to redo hero images on the home screen. They are basically what I wanted, but I would like to design them from scratch so they are completely of my own creation. I don’t find anything wrong with sourcing icons, images, sample text to use in my design work, but there is something satisfying about creating the images yourself.
The edit button on the on the list pages I felt was fairly self explanatory, but it is a feature that didn’t actually get built out and that is not the kind of loose end I like in my work.
I wanted to create an animated load in screen, but I was having trouble making that happen in Sketch. I really appreciate the ease of use of Sketch and it is my preferred wire-framing program, but so far in my experience Figma allows me to create a more interactive prototype for the user to try.