Fridgy Food Tracking Application

Role: Product Designer

Team: Individual IOS Project

Timeline: November - December 2018

Project Background

For a personal project, I designed a mobile application that lists the items a consumer purchases in a grocery store. The application records and reminds users when their food is about to expire and also recommends recipes based off of the foods users have in their fridge. In the final version of my app, I designed Fridgy as a system that would theoretically partner with a supermarket. Consumers could scan their barcode before the grocery worker scans their items; the food purchases would then be automatically transferred into Fridgy and analyzed to generate related recipes.

Like many college students living on their own for the first time, I was challenged to consider how I could effectively and economically grocery shop and cook for myself. Buying groceries and cooking meals without wasting food or having it expire is all about timing, and it was difficult to master this task. I often purchased produce that I would then need to throw out because I had not consumed it before expiring and failed to stay up-to-date regarding expiration dates. These experiences sparked my initial idea to create an application that reminds consumers when their food expires and how they can use it before that happens.  

Problem statement

Consumers need something to track their grocery purchases to remind them when their food will perish and something to recommend specific recipes based off of purchases to decrease anxiety about wasting food and money.

Observational research

Living with three other roommates, I unintentionally completed observational research throughout the entire semester via exposure to my roommates’ grocery shopping habits. We regularly found rotten food in the fridge that no one remembered they had bought, and I also noticed that my peers often purchased unnecessary amounts of items they already had. Although unintentional, this research was significant especially because it was not self-reported. Generally, observational data includes less bias, and it was clear, even without directly asking my roommates, that remembering expiration dates was a significant difficulty. However, my three roommates obviously do not represent the entire population of grocery shopping consumers, so I also spoke with other college-aged peers.

My goals were to:

• Gauge if it was a common theme for college-aged students to experience problems with grocery shopping and food waste.

• Investigate the common cause(s) of food waste.

• Discover what people value most in cooking and grocery shopping.

  
  

Interviews

Instead of directly inquiring if my peers had trouble shopping or regulating their food consumption, I asked my peers to relay their day-to-day challenges regarding grocery shopping. This phrasing allowed me to discern if food management was a legitimate problem because it decreased response bias and ensured I received the most authentic responses. I also decided to speak with a different (older) demographic, casually asking my parents, my friends’ parents, older siblings, teachers, etc. questions about their grocery shopping habits.

After these conversations, I decided to complete supplementary research about food waste to find quantitative data regarding this problem. Subsequently, I discovered a noticeable waste issue in America:

• 50,000 tons of food is thrown out in US households daily. The most commonly thrown out items are fruit and vegetables, followed by dairy and meat.

• We throw out one third of all the food we grow in America.

• The average person spends 60 hours grocery shopping per year.

• “The average American household throws away $2,200 worth of food each year.”

• “Food waste is the single biggest occupant of American landfills.”

• “Around 52% of America’s fresh produce goes uneaten.”

• “90% of Americans toss food too soon due to basic misunderstanding of sell-by and use-by dates.”

Personas

After this research, I crafted personas with scenarios to devise a network of people that would be the primary users of Fridgy. These users’ attitudes, needs, and behaviors would guide me when crafting the features and design of my application.

Design requirements

To effectively establish design requirements, I wrote my problem statement at the top of a sheet of paper. I then asked five students in one of my UX classes to write the features they would expect after reading the problem statement in order to ensure my vision aligns with user needs.

After this process, I generated UX requirements and matched features with personas to fit the needs of users in actual use-case scenarios:  

Crazy 8’s Exercise

With the personas and requirements in mind, I completed a prototype sprint and sketched out the basic screens of my user flow:

I then approached the classmates who previously suggested features for Fridgy and had them review the paper prototype. Here were some of their suggestions and concerns about the design and features:

1. “Do you have to enter the expiration dates for each food and enter which foods are in the fridge, or will it update automatically when you scan your item?”

2. “For the search option, a person may want a certain cuisine with a specific food, so that would be cool if you could incorporate that.”

3. “Is there an option to keep track of calories?”

4. “It might be helpful to organize the foods by a ‘expiring soon’ section on the home page.”

Comparative reserach

Before bringing my application to life, I researched pre-existing apps to find inspiration for effective and user friendly designs and aesthetics.

As an avid user of The New York Times cooking application, I wanted to replicate the simple recipes presentation. With a clean layout and high-quality images, this app is successful in creating a professional feel that is simultaneously attainable. I employed a similar organization structure for the recipe layout in Fridgy.

In order to effectively list the foods, I explored existing expiration date products. Many included simple, plain listings screens. Thus, I incorporated this minimalistic design into Fridgy so that expiration dates could be easily understandable and accessible for users.

For the scanning screen, I was inspired by a QR Code Reader. I added a darker border to the areas not highlighted to create a more direct guide/area for users to scan items.

Mid-fidelity Wireframes

High-fidelity Wireframes

The first iteration of my medium fidelity wireframes mostly involved adding new screens to the user flow, including an add item manually screen, delete item screen, and add product screen. After showing the initial wireframes to my roommates, they mentioned that they would also want to keep track of other foods that are not only in the fridge. Accordingly, I incorporated a toggle menu at the top of the screen with a fridge, freezer, and pantry option to filter through.

Iteration

I reached out to other UX and graphic design peers with this version of my application for more detailed feedback. I noticed less points of friction regarding the usability and utility function of my app, but received many recommendations to enhance its professionalism and design.

User suggestions

1. To change the search screen as the grey on grey appeared “muddy.”

2. To develop a better way to show users their purchases rather than having them navigate all the way to the top-left of the screen to search through the food they have purchased.

3. To recognize that it is unlikely users will actually read all of the text on the on-boarding screen.

4. To include a rewards system similar to the Whole Foods/Amazon Prime application (incorporating discounts and coupons).

Modifications

Based on this feedback, I made the following modifications to my next iteration:

1. Decreased the text on the on-boarding screen.

2. Changed the yellow color on the cheese and chips to be more visible.

3. Altered the notification, search, and add products buttons to follow Apple’s native UI (it was both more familiar than my initial design and already built into the iPhone).

4. Increased the size of the recipe boxes to create more padding.

5. Altered the filtering options by kitchen space and expiration date.

6. Designed a screen to scan at the grocery store.

Interactive Prototype

Key takeaways

• I am not the user. The features that I want to see in Fridgy may not necessarily be the most desirable or relevant to the network of people who would engage with such an application. I found it difficult to exclude certain features because of my own personal preferences, yet I realized it is critical to conduct and utilize user research in order to truly create products that serve as supplementary assets to the needs and behaviors of a majority of potential users. It would have been beneficial to complete even more user research to observe: (1) how users categorize their food and (2) how they currently interact with food applications.

• Detail. One of the most important takeaways I learned through my iterations on Fridgy was the importance of detail. Whether it was alterations to the text color, box size, or padding, these transformations noticeably contributed to the overall positive impression of the application and are responsible for visual emphasis.

• Be precise in the moment of design. When designing, I initially added features and text without exactly aligning them or staying consistent with sizes. Not being as meticulous from the beginning of the project increased the amount of time I had to spend fixing positions rather than design features throughout each iteration. Thus, I realized that in order to spend my time most effectively, it is critical to be thorough and punctual starting from the beginning wireframes.

Going forward

There were other features that I considered when brainstorming the main functions of my app. These may potentially be applicable to later versions of Fridgy, including:

1. A more advanced filtering system for recipes.

2. Adding a grocery shopping list feature.

3. Easy access to coupons attached to the barcode page.

After completing my second individual project, I am continuing to learn what resonates with users, how to get tangible feedback, which wireframes yields the best results, and what software tools are most effective. I strive to work in a group setting and gain exposure to design and management development as a team effort, and am looking forward to further exploring different research and design approaches.

Edge cases

Throughout this project, I noted potential issues that would impact user engagement as well as successful operation of Fridgy:

1. What if a consumers’ preferred grocery store does not partner with Fridgy?

2. Where will the recipes be sourced from?

3. How will users remember to delete the food they throw out?