FRIJ
An engaging tool to help individuals and households plan groceries and reduce food waste.
Project Overview:
FRIJ is a grocery shopping and food organization app designed to reduce food waste in a fun and interactive way.
The purpose of this project was to solve an everyday problem. My team (4 junior UX designers) accomplished this through user interviews, identifying pain points, and testing potential solutions.
Role & Responsibilities + Team Size:
Lead UI Designer
Team of 4 UX/UI Designers
Project Timeline:
3 Weeks
Deliverables:
High-fidelity iOS prototype and documentation of the design process.
Tools Used:
Figma, InVision, Google Docs, Voice Memos, Procreate for iPad
The Final Product:
A beautiful app with an intuitive user interface giving users:
Visibility of ingredients and expiry dates with an intuitive color-coding system
A receipt scanner feature using AI for fast item logging
List views of different food storage locations in their home
A smart grocery list that populates based on upcoming ingredient expiry
A scoreboard feature to percent food waste by encouraging timely food consumption with healthy competition
You can access the high-fidelity Figma prototype by tapping, clicking, or scanning this QR code:
Project phases and
UX Frameworks:
-
Proto Persona
Surveys
Interviews
-
“I like, I wish, I want”
Feature Prioritization Matrix
User Journey
-
User Flow
Sketching + Wireframes
Mid-Fi Figma Prototype
-
User Testing
Style Guide Creation
Hi-Fi Figma Prototype
User Research + Problem Definition
The purpose of our research was to identify a solution for an everyday problem. At the beginning of this project, we spent a lot of time as a team brainstorming. As young professionals in a metropolitan city, we found ourselves exploring topics such as public transport, making time for activities like exercise and socializing, budgeting, and groceries.
Our focus gravitated towards grocery shopping and home food inventory management, specifically on the subject of food waste in households resulting from low visibility on expiration dates.
Shortly after deciding to make this our focus, we created our proto-persona to help us humanize our ideal users behavioral demographics, goals & needs, pain points & solutions, and assumptions.
Proto Persona:
Survey & Results
The survey asked participants questions about their grocery shopping habits and experiences:
Frequency of grocery shopping
Using some form of a physical or digital shopping list
User household size and grocery responsibilities
Frequency and reasons why food is thrown away
How often do you throw expired food away?
What are your reasons for throwing groceries away?
When asked, most participants expressed they mainly throw food away because they simply don't have time.
As the survey questions progressed and we probed deeper, we learned that users would benefit from having visibility on food at home and their expiry dates as it would inform how they invest time, money, and other resources into their grocery shopping process.
Interest in visibility of food at home
Over 94% of participants confirmed this theory, further validated by 5 user interviews.
Problem Statement:
How might we help people feel that grocery shopping and planning is exciting, simple and fun and help them feel confident in their ability to build better habits in terms of reducing their food waste?
Ideation
Early on in our planning process my team and I liked the idea of designing an app that helps people track household items and food expiry dates and also lists their shopping needs.
As we collected data through our user research phase, we recognized that users simply having an app on their phone might not be enough to reinforce habits that lead to a more sustainable lifestyle.
My colleagues synthesized our user research findings from our interviews and survey results into an Affinity Map which we then fed into an “I Like, I Wish, What if?” framework to define and prioritize potential features for the application.
We decided to name the app “FRIJ” as a play on the word “fridge”, but also acknowledged that users may want visibility of food/ingredients stored in all different parts of their home: cabinets, shelves, pantries, and other storage areas that might be unique to user homes.
Conducting a competitor analysis of grocery planning apps demonstrated that most of the existing big name applications were designed for single users to accomplish simple tasks such as listing items or “Add to Cart”. There was an opportunity for us to explore adding some sort of social features:
Ability to create shareable shopping lists for bigger households
A “scoreboard” feature where users and their friends are ranked by “sustainability scores” built on a simple premise:
Earn points for consuming food before expiry
Lose points by not using food before expiry
We felt the social features would take the app from being a 2-dimensional planning tool, to a tool that added a sense of accountability through community by allowing users to not only share the responsibility of groceries in their households, but also measure their sustainability in a friendly competitive way.
Additionally, we wanted to see how we could make use of some newer smartphone technologies such as Apple’s text recognition in images feature in iPhones. We recognized the potential to use this technology to build out a feature that would allow users to take a photo of or upload an image of their grocery receipt that would make it easier for users to input their items in the different storage locations in their home.
Journey Map
Establishing the user journey was invaluable in further visualizing the highs and lows of the scenario a potential user like Gregory might face. Upon setting the stage here, it became more apparent that there were some key opportunities to attempt to address in the next phase of the project: prototyping.
Prototyping
Lo-Fi Wireframe Sketches
I began the prototyping process by sketching low-fidelity wireframes of four key screens:
“Home/Dashboard” screen
“Grocery List” screen where each item has a “three-dot” menu allowing users to manipulate specific attributes of each item on the list
“Receipt Scanner” feature
“Storage Locations” screen where users can preview the different places food is in their home
Moving to Mid-Fi
The middle fidelity (mid-fi) prototype developed from these sketches introduced a cool blue which we decided to make the primary color of the app. This color was chosen based on color psychology research we conducted stating that blue evokes a calming, supportive, and reliable feeling in those who perceive it.
For typography, we decided to use two fonts:
We felt that these two fonts worked well together as they were minimalist sans serif fonts.
I conducted small A/B tests to determine how to best pair them together:
Montserrat Bold is ideal for headings and subheadings
Testers felt it can be overwhelmingly emphatic in body paragraphs
SF Pro Regular works well for larger amounts of text without overwhelming users
We also added a very simple 5-module bottom navigation bar for users to easily access different screens without having to navigate home each time.
We also included a basic Account Creation flow which would tie into the “Profile” section of the bottom nav bar. We felt the presence of the profile page helped users to better understand the purpose of the Scoreboard once they arrived at that screen, but we would later learn in testing that users would need more context.
User Testing
We conducted five user tests. Below are the key insights:
Difficult to navigate to the Home / Main Dashboard screen
Issues with scrolling, especially on the Storage Locations page
Add color coding to the expiration indicator
Need to explain the purpose of the scoreboard
Building a Visual Identity
Our high-fidelity (hi-fi) prototype successfully addressed these concerns, and we added more design elements that we felt would enhance the user experience. This included a custom logo and graphics I designed using the app Procreate on iPad.
Hi-Fi Prototype
The hi-fi prototype marries function and form, integrating solutions synthesized from our user testing feedback with the more polished visual design choices we made to improve the user experience with the app interface.
Home Screen
Purpose of the app under the main logo
actively encourage users to reduce food waste using the app as a planning and organization tool
Profile icon on the top right instead of the bottom nav bar to optimize space and humanize the interface
Sustainability Score with a week-over-week update
A cleaner “Quick Links” section with large modular buttons
Quick glance at expired items and items close to expiring
Color-coded visual indicators for food expiration status
Storage Locations
A cleaner interface for the storage location screens featuring:
Minimalist iconography for each storage location type
Smoother scrolling between storage locations
Segmented storage spaces like Refrigerators with Freezer sections
Options to add and customize storage locations
The color code indicators for food expiration
Overlay Menus
We also added more in-depth descriptions for items in each storage location in the form of small overlays to avoid crowding the screen.
Additional Screens
We also developed the screens for:
User Profile
Option to add friends
Scoreboard
Ability to add friends directly from the scoreboard
Receipt Scanner
Options to take picture through the app or upload an image saved on the user’s phone
Added a secondary review screen to edit/modify scanned items to minimize input errors
Conclusion + Future Opportunities
Our team was satisfied with the results yielded in the short time frame for this project. If we had the opportunity to build it further, below are some next steps we would consider as we developed the product:
Conduct additional testing with latest prototype
Ability to view storage all items in a single consolidated list view
Options to “Filter” and “Sort” items
Further enhance user profile page to illustrate user’s personalized food waste journey/timeline and environmental impact with suggestions for improvement
Money management features:
Built-in ingredient costs in the grocery list to assist with budgeting
Waste Cost Calculator: an estimated total amount of money lost in throwing away expired grocery items
Build out social features:
Sharing and collaboration on shopping lists with family, friends, other households
Plan events like potlucks where users can have a central platform to assign guests the items they can/should bring
Food prep calendar and recipe suggestions based on diet and inventory
Building out the “Sharing” and “Assignment” features for larger households and groups of friends
Add notifications to remind user when items are near/after expiry
Suggest places to purchase online or at nearby stores
Thank you for reading this case study.
I would love to hear your thoughts, questions, and feedback.
Connect with me on LinkedIn or
email me at contact@adichawla.com