AutoFridge Mobile App Design

As part of my software design course, I learned to design a software application from scratch, from user personas and competitive analyses to architecture and defining the minimum viable product (MVP). On a team of four, we designed AutoFridge, a mobile app designed to allow a household to track shared food items in their fridge to prevent food waste and make shopping easier by allowing users to add needed items to the grocery list, check items off while shopping, and see what’s in the fridge easily, whether preparing to cook or clean the fridge of items past their expiration date.

We started by brainstorming features for our app, which quickly became extensive. To help decide which features were most important, we defined user personas, primarily targeting busy parents and young adults living with roommates. We then completed a task analysis to define what each type of user would need to do to reach their goals. You can view the full document here. Using this information, we were able to select the most important features for our minimum viable product (MVP).

We used the MVP design to define final product requirements, architecture, and necessary modules. For our tech stack, we chose to combine React Native with Node and Express, handling authentication, data storage, and notifications with Firebase / Google Cloud. We chose a Data Flow Architecture, where data is passed through various stages one at a time. Under this model, we planned to have the UI send events and user input to backend data processing, then pass the data to be updated in the database, which would use real time syncing to update the UI on each user’s device. You can see this document here. We then planned our implementation, defining what classes would be needed here.

Once we had defined the features we wanted to implement and what pages would be needed, we created wireframes in Figma, splitting up the design among the team based on user flows. I focused on the Grocery List and Food Detail flows, but the team also worked on screens for authentication, user profile and notification settings, fridge inventory screens, and many others. Since I had the most experience in Figma, I added prototyping arrows to demonstrate flows by taking the user to different screens or showing popup menus depending on what was clicked.

Once the design was complete, we began to work on implementing the app using React Native, testing locally by running Android Studio to emulate a mobile device. We were able to implement many of the designed screens, but realized that our MVP’s scope needed to be more limited in order to complete the project by the day of the demo. To achieve this, we mocked the database with a local file, moved some features such as real time syncing to version 2, and chose to use Jest to test a limited set of important features rather than aiming for full coverage.

This project taught us a lot about collaboration, software design, and the importance of scope, prioritizing agile iterative development over the waterfall approach. Although it came with challenges, I really enjoyed developing for mobile and the process of software design. I’m looking forward to continuing to build these skills with more projects in the future.

Thanks for checking out my project!