MoreNosh
Overview
What is it?
​A recipe suggester application, MoreNosh, in which users can input the random ingredients they have lying around the house and it will suggest recipes with it using classic pantry staples.
Skills used
Remote and in-person testing and data collection
User Interviews
Ethical data collection processes
Data analysis
User and commercial research
UI and Graphic Design
Wireframing and Prototyping
Agile sprints and iterative process
Protopie
Presentation of work
Timeline
3 months
Solo project
Sole designer, researcher and project manager
Problem statement
Food waste is a problem in Europe, with Europeans being responsible for an average of 72.5 kg of food per person year (UNEP 2021) and 17% of food waste occurring in the household (Loran 2021). European households have trouble finishing all their food before it spoils even though it is not their intention to buy food to end up in the bin. This is a problem because it represents a loss of money to the individuals and contributes towards food waste which upsets this sustainability focused user group.
User Research
I wanted to start by exploring how my user currently experiences this problem space.
I ran interviews with my target group focusing on their food management, where possible the interviews were carried out in the participant’s kitchen and included a task to explore their current food management. The research focused on motivations behind food-related decisions, including shopping, cooking, and food waste.
The main reasons why somebody let their food spoil were that they lost physical sight of it in their kitchen, they were unsure about how an ingredient should be used in the first place or else it was left behind when they travelled and spoiled in the meantime.
​
Participants wanted to minimise food waste with sustainability being a strong theme.
INSIGHTS
All this lead to my persona.
​
Persona - Paula Vanachter
And these two mini problem statements:
​
1. Paula needs better visibility of the food in her storage because if she doesn's see it - it spoils.
​
2. Paula needs to know what to do with random ingredients / leftovers in her storage so that she can save it from spoiling.
Market Research
I next researched what was already out there in terms of helping people manage their food stocks and reduce food waste, I focused on four main competitors - Kitche, Fridgely, NoWaste, and Frigo Magic.
The most aligned to the problem statement was Frigo Magic, a recipe suggester app that also requires you to input what you generally have in your pantry so that it can suggest recipes based on what you have at home, but it let you down a bit as it tied itself too tightly to this pantry function and did not simply suggest recipes regardless of whether or not you had the ingredients in your pantry.
​
Of the others, I enjoyed that Kitche had a feature that showed you how much food you had saved from the bin personally and NoWaste showed you how much food had been saved with overall use of the app. This was a good bit of gamification that could motivate users to keep coming back and I wanted to incorporate in my own design.
INSIGHTS
Many of these platforms force you to sign up when there was no benefit to it, this is frustrating – I want to offer an experience that is more personalised as an account holder but is still accessible if you want to use it as a guest.
​
Also, it doesn’t look good if your app has features that don’t work like some of these did that claimed to be able to scan receipts of bar codes but then was unable to. It made the input of information more difficult rather than easier.
​
Users can be motivated through good gamification, eg. being given quantifiable data of how their actions are positive.
​
There was an opportunity for a solution that helped you look for recipes when you just had one random ingredient lying around without having to give a full inventory of what you already had at home.
Ideation
Design Studio
To get started with ideas I ran a design studio session to work through and narrow down ideas, by keeping my user and problem statements in mind I focused on what mattered: ways to simply input someone’s current food situation at home (with food close to spoiling) and an interface that showed solutions on how to prepare that food.
​
The winning ideas were a drop down menu of ingredients that showed up while typing, photo recognition of your ingredient and a display of recipes that used your ingredient as well as other ones in which it could be used as a substitute.
​
Sample images from the design studio
Considering gamification
I also thought that I could use some gamification to motivate people. Two rejected ideas were using a trial-and-error approach to using the app to reward people for their attempt of cooking something and a worldwide leaderboard of who was saving the most food but these pulled focus away from helping people use the platform efficiently and feel like they were working together towards a common goal.
​
As seen in my competitive analysis though, what could work to motivate collective effort is showing the worldwide impact of using the app – and if you have an account then you could even get your personal cumulative effort so far shown. There could also be the option to share that impact on social media.
Prototyping
Concept validation
I started with a sketch concept of the prototype that I sent out to users to see if they understood the concept and how they responded to it – the positive response was the green light I needed to take the next step.
Mid-fidelity prototype
This mid-fidelity prototype focused heavily on functionality and getting something in front of users as quickly as possible to see if I was on the right track. To this end I left out the gamification elements for now and also focused on building the guest rather than the account experience – the difference between them is how personalised the information the user sees is rather than any important app functionality.
​
I chose to build this out on mobile as the user interviews showed that users never used their laptop in the kitchen but always had their phone on them. This also led me to learn a new prototyping tool, Protopie, because it allows users to take photos with their phone camera, a function I wanted to test out as an easy way for people to search for recipes with an ingredient.
​
Test participants were given a butternut squash and asked to use the app to choose a recipe that used it.
INSIGHTS
The photo feature needed to be more obvious if users were going to use it – most did not even see it.
​
The onboarding needed to be clearer, if a user goes through it and does not grasp the point of the app or how it works, the onboarding has failed. This led to users not being able to understand the results page or the page that showed how the ingredient could swap out another in another recipe.
​
The search function of the app needs to behave as expected: showing specific results that responded to what users had put in and not other recipes that users did not understand why they were showing up. It also needs to be clearer that the app just wants you to search for recipes with only the random ingredient you don’t know how to use and that you don’t need to write in the search everything else you have at home as well.
​
Having the app as a phone experience in the kitchen worked well, no one had an issue with it or wished they were on their computer instead. Also, all participants were able to complete the task and those who did understand the point of the app responded positively to what it did – so while there were obviously issues to fix the crux of the app was taking form.
Visual Design
It was also at this point that I developed and applied the visual identity of the app. To keep the sustainability focus of the user group running through the project, I chose elements that require the phone less energy to display: a red and green based colour palette (Greenwood 2022) and system fonts for the body text (Greenwood 2021). My title font is called Gelica (Rowland 2024).
​
I also spent some time exploring names and a logo, I explored ideas around plenty, food and saving and ended up with MoreNosh. When applying the design to the prototype I followed graphic design principles, an F pattern and paid attention to the details required to make things look right. Every single UI element of this prototype was created by me appart from the recipe photos and copy which is referenced below.
Card Sort Exercise
I ran a card sorting exercise to better understand what my user tended to have in their pantry at home, many assumptions were correct but many more ingredients were also revealed. The results were analysed through the tools own matrix (Optimal Sort) and also an affinity map I created on Miro of the ingredients users said they had at home to see how they could be grouped.​​​
INSIGHTS
The card sort led to me reconsidering how my users inputted their ingredients into MoreNosh in the first place – it would be faster and smoother if the app suggested recipes based on classic pantry staples rather than the user having to say what they have at home. As a bonus, the account holder experience could include the function to specify what you have at home for even more tailored recipe suggestions.
​
I redesigned how users input their ingredients to test it out: explanation in the onboarding that the recipes suggested use pantry staples, tighter language surrounding the input field to encourage users to only add the ingredient they are trying to get rid of and incorporating the search function directly in the results page that shows the suggested recipes so that there are fewer fields in which you can say what else you have at home.
Section of onboarding telling that pantry staples are used
Final copy centering on just adding in one ingredient
Search function and results showing on the same page
High Fidelity Iteration
This high-fidelity iteration was also the last one before the deadline so choices were made to be able to meet it. For instance, this entire app was a database searching experience and to maximise time I limited variables to only searching for recipes with one random ingredient (a butternut squash which was provided) and three potential diets: vegan, vegetarian and omnivore.
I focused the onboarding more on meeting the user goal and less on the functionality of the app. I tried to have prompts on an as-the-user-needs-them basis like the placeholder text in the search bar, which I also hoped would highlight the photo functionality more and the empty state of the main page giving hints on what to do.
​
This iteration also included the gamification element of showing the energy impact of cooking rather than throwing out the ingredient. A lot of research went into this for the experience to be as accurate as possible in order to understand if users would actually like this information.
​
A potential pitfall is that for this information to show the recipe needs to be marked as complete, if users simply close the app after checking a recipe they will completely miss this element. In future MoreNosh could develop a delayed push notification system to ask users if they have completed recipes.
INSIGHTS
If it isn’t visible to users, it won’t get used. This time the photo feature was used and loved, it even helped in multilingual contexts in case the participant did not know what the ingredient was called. But the page that showed where the ingredient could be used as a substitute in another recipe was barely visited at all as people did not need to go on that page.
​
There are established user patterns when it comes to a search experience on a phone that need to be respected – 60% of participants expected that when a filter was tapped in the search function that the results would auto-update without having to press “search” again. There should also be a fallback in case there are errors like spelling mistakes.
​
The graphic and visual design should aid and not confuse the experience. The visual design went down well and people were able to use the app correctly but there was a visual element on the results pages, a divider that separated exact search matches and other potential recipes, that people simply did not understand. There could also be more visuals used in general so that there was less pressure on the copy to have to explain everything.
​
The gamification was well received but the information should update. It cannot always be the exact same information or be something that users are forced to sit through every single time – else they will get tired of it and the feeling of enjoyment and collective positive action that it gives users will be spoilt.
Ideal next steps
The project was over but a designer can always dream of what next steps could be!
​
Visually more graphics and fewer words would be used throughout, also the recipes in which the ingredient could swap out another would be integrated into the main results page but have some kind of indication that they are a swap recipe.
​
From a functionality point of view, search results would update instantly when a filter is tapped, users would be prevented from entering nonexistent ingredients, misspellings would be corrected, and users would be able to skip the energy information at the end if they wanted to (eg. how stories appear on social media). It would also be great to expand into being able to search for recipes with several ingredients.
​
I would like to run another card sort to understand what fresh ingredients people tend to have in the house and also include more content in general, more recipes and more dietary requirements.
​
The account experience would also be built out with all the perks that comes with it: being able to say what you have in your pantry for more personalised recipe suggestions, ability to rank recipes and vote for community favourites, ability to favourite and retrieve recipes at a later date, have a personal cumulative impact report on the energy saved by you personally eating the food instead of throwing it out and finally the ability to integrate with your calendar so that the app can send you notifications a few days before travel reminding you to cook the food in your fridge so that it doesn’t spoil.
​
Setbacks and challenges
The biggest challenge of this project was that I was building something I had never done before, a search experience on a tool I had never used before, Protopie. This was at times a very steep learning curve with a fixed deadline coming towards me. As well as this, Protopie is not software made for visual designing in, it is best to import your work in from another software and use Protopie only for the interactive prototyping part so that also took time to organise.
​
As well as this, this was one of my first times exposing my low and mid fidelity prototypes to users and working iteratively in this way which was challenging and a lesson in the humility required when working as a UX designer.
​
I would have liked to have completed more iterations before the deadline but I was challenging myself to work in new ways and kept refocusing on the user when I felt like I had gone astray so I also believe that the iterations I did manage to complete were moving in the right direction.
Takeaways
There is a trade-off between time and energy: the best experience for my users meant that I had to spend time learning how to use new software and work in new ways. I am not afraid of either of these but in future scenarios I also need to be realistic about expectations and time constraints so that prototypes can be delivered as efficiently as possible.
​
I also learnt that it’s important to push yourself to work in new ways if they are in service of your user, even if they are scary or uncomfortable like showing them works in progress like a mid fidelity prototype to see if you are on the right track. All contact with my end user was beneficial, not only did I learn something every single time but it always yielded the best results.
References
Fridgely. 2021. Justin Ehlert.
Frigo Magic. 2024. Frigo Magic.
GREENWOOD, Tom. 2021. Tom Greenwood - Web Design for People and Planet [Conference talk for SICT2021]. Available at: https://www.youtube.com/watch?v=EXcgQokDrWE [accessed 27th March 2024]
GREENWOOD, Tom. 2022. ‘The dark side of green web design’ WHOLEGRAINdigital [online]. Available at: https://www.wholegraindigital.com/blog/dark-colour-web-design/ [accessed 27th March 2024]
Kitche. 2023. Kitche Limited.
LORAN, Sophie. 2021. ‘UN: 17% of all food available at consumer levels is wasted’. UN Environment Programme March 2021. Available at: https://www.unep.org/news-and-stories/press-release/un-17-all-food-available-consumer-levels-wasted [accessed 30th January 2024]
NoWaste. 2022. KH Creations IVS.
ROWLAND, Dave. 2024. ‘Gelica Font’ Adobe Fonts [online]. Available at: https://fonts.adobe.com/fonts/gelica#fonts-section [accessed 2nd April 2024]
UNEP. 2021. ‘UNEP Food Waste Index Report 2021’. United Nation Environment Programme March 2021. Available at: https://www.unep.org/resources/report/unep-food-waste-index-report-2021 [accessed 30th January 2024]