dish’d
Recipe Manager App
Dish’d is an app created to be a personalised catalogue of existing recipes from multiple sources, that’s easy to search, filter and navigate. How can we simplify the process of indexing your favourite recipes?
The design process worked through the methodology practices of user research, to get the prototype finalised and ready for the UI
my role
As this was a self-driven project I was responsible for the entire end-to-end design process:
- Research
- User Interviews
- Personas
- User Journeys
- Information Architecture and Site Map
- Sketching and Wireframing
- High Fidelity Prototyping
- Usability Testing
the problem
When deciding on what to cook, it can become time-consuming and overwhelming with the number of recipes out there, causing a real pain point in the process of making a home-cooked meal.
the solution
A way for users to easily search, filter and navigate their own personalised database of recipes collated from multiple sources.
research phase
During the research phase I conducted interviews with the target demographic, using questions that were open-ended and designed to uncover and understand the users’ behaviours, motivations and actions in regards to cooking, grocery shopping and meal planning.
The following key user personas and corresponding journey maps were compiled with the results from these interviews along with quantitative data collated from a survey (through SurveyMonkey)
research key findings
- People are overwhelmed by the amount of recipes available, from both cookbooks and online
- People forget where they saw particular recipes with no place to collectively collate them
- People often edit and make changes to recipes
- People are following recipes on their phones in the kitchen while cooking
Key Outcomes for MVP
- Add in links or import bookmark folders of recipes
- Upload images of recipes to be transcribed
- Be able to easily filter through recipes utilising editable tags and categories
- Have a “cooking mode” where phone brightness goes up and phone doesn’t lock
- Rate which recipes have been tried already
- Make it simple to adjust serving sizes, and adjust between metric and imperial measurements
- Ability to edit, add or delete ingredients or steps
- Inbuilt shopping lists that make it easy to manage grocery items needed
the prototype
Working from intial design wireframes, the below high-fidelity prototype was refined within Axure which was used for the usabilty testing on a Google Pixel
usability testing
The prototype was then tested with a number users, both in person and via Lookback. The following tasks were asked to be completed, with the success criteria outline on the right.
usability test key findings
- Users were trying to create accounts on the log in page rather than tapping on ‘Create Account’
- When editing recipes, user found the wording of ‘Upload Recipe’ confusing
- Most users had difficulty using the Shopping Lists function within the ingredients section of the recipe page
- User were confused what ‘Tab Recipe’ meant
- Users thought the search bar on the home page would globally search recipes rather than specifically their own
key outcomes for MVP
- Have a clear log in/sign up process, with the opening screen giving an option of the two to avoid any confusion
- Rename ‘Upload Recipe’ to ‘Save Changes’ on the edit recipe page
- Change the design of the check boxes on the recipe ingredients to make it more clear they can be checked
- Add a ‘Add to Shopping List’ button at the top of the ingredient list, along with a button can check/uncheck all ingredients at once
- Rename ‘Tab Recipe’ to ‘Pin Recipe On Screen’
- In the search field, have the default input say ‘ Search own recipe collection’ so it is clear this will only search own recipes
high fidelity mock up of key screens