FRIJ
helping reduce food waste for everyone
Maxwell Chen
Ethan Allwood
Alex Luoan
Jack Luo
Role: UX research and UI design
Skills: Heuristic Evaluation, User Testing, Prototyping
Tools: Figma, UX Pin
Duration: 5 Weeks
Maxwell Chen
Ethan Allwood
Alex Luoan
Jack Luo
Role: UX research and UI design
Skills: Heuristic Evaluation, User Testing, Prototyping
Tools: Figma, UX Pin
Duration: 5 Weeks
FRIJ is a food tracking app that allows users to keep track of the groceries they buy. As well as providing them with recipes based on the ingredients they already have at home.
This project was the final assignment for SFUs Interactive Arts and Technology third year course Interaction Design. The assignment had us design a new app that would help seniors age 75+ in a design domain based on our research.
Conducting primary research I found that many of the people I spoke with expressed difficulties surrounding grocery shopping and meal preparations, whether that be physical limitations not being able to go by themselves or problems surrounding memory of what they already had to eat.
These insights of difficulties around food and shopping allowed us to narrow our scope of what we were designing for- linking insights on both primary and secondary research we were able to frame two major design problems that linked across all of our research.
These insights of difficulties around food and shopping allowed use to narrow our scope of what we were designing for- linking insights on both primary and secondary research we were able to frame two major design problems that linked across all of our research.
Expiry date tracking would help eliminate unnecessary food waste for seniors who have issues with memory. Our research also found that this system would be beneficial for young adults or university students who may forget about the food they already have because of busy schedules.
Because we are designing for an audience that may not be familiar with mobile app conventions, we developed rough wireframes that would only use basic interactions with clear affordances of what each action did to create straight forward interactions and limit the cognitive load on the user. Designing low fidelity wireframes also allowed us to establish the potential interactions and the pathway of the user.
In this stage we began experimenting with our different interaction patterns paying close attention the physical capabilities of our senior user base.
Based on feedback on hierarchy and creating more contrast within the app we reviewed our wireframe iterations and refined one of them, adding elements and systems of interactions from others that worked best, combining them into a unified design.
Using UX pin, an online prototyping tool, we began creating a prototype that we could use for user testing and perform heuristic evaluation.
Planning user testing, our initial process was to test our user interface with a mix of younger and older audiences. While we put more focus on the results from our older audiences, the younger audiences were more accessible and helped increase our sample size to create more diversive results in our findings. From our usability test we discovered four main categories of issue in the interface that we grouped as: visibility, affordance clarity, error prevention, and copy writing.
For older audiences, the current text in the interface are too small for them to see. Additionally the lack of colour contrast makes it hard for both young and older users to differentiate certain clusters. There were also some cases of confusion surrounding the inconsistent use of icons.
Beyond simple changes like larger font size and bolder colour choices, the overall visibility and clarity of the app could be improved through more consistent icon usage on the main page, like using the red and yellow warning icons from the overview panel a second time in the list view to tie the two elements together.
Many of our affordances struggled to properly communicate their function or bring attention to their presence, some of these include:
Many of these issues could be solved through the use of more clear visual feedback on user actions, more clearly understandable affordances for things like the pinned item dropdown, and creating better visual separation for important items like the overview panel or recipe search button.