Chef It!
A cooking app that is centred around you.
The Project
Chef it! is a Home cooking mobile application that I created as part of my UX course at UAL. As the sole UX designer, I designed this project from inception to final design through research, ideation and UX design principles.
Duration: 6 weeks
Methods: Interviews, Empathy maps, Moscow prioritisation, Usability Test, Wireframes, Prototyping
Tools: Figma, Miro.
Context
Coming home after a long day to realise that there isn’t food prepared can be frustrating. But when you open up a cooking app to look for a recipe to follow and realising you don’t have all the ingredients to hand can be even more frustrating.
I was tasked to create an app that would allow users to easily choose a recipe based on the ingredients that they have available.
The Process
Research
Define
Ideate
Prototype
Iterate
Research
Competitor Analysis
To get a better understanding of the competitor landscape, I analyses on two of the most popular cooking apps on the market. I found that both provided the feature to input available ingredients but done so in very different ways Neither were intuitive in their approach and led to recipe overload.
Interviews
At the discovery phase of my project, I conducted user interviews with 4 users in order to get a better understanding of the users current process, the features they thought was most important and the problems they are currently facing.
Early insights
Through the interviews I was able to gather some early insights from the users and the features that would help.
Clear step-by-step visuals
Users found it frustrating when there is only a video showing the method. For this reason, I knew I should add a step-by-step video/picture along with the written form for each cooking stage.
Having a missing ingredient
This was a main frustration for users. Therefore a key feature would be to include the option to search for recipes, based on the ingredients already available at home.
Ratings, reviews, cooking time & tools needed
Users liked when they were able to see the rating, cooking time and the tools needed was clearly shown before having to commit to a recipe.
Define
Problem statement
Users of all cooking abilities need to be able to find clear, easy to follow recipes based on the ingredients that they have able considering the potential dietary requirements and in order to create smooth cooking process.
User Journey map
I mapped out the users’ steps to see how users interact with an app and how I could simplify their journey to help them reach their most important goals.
I also tracked the users emotions through the journey map, giving me ideas for areas to improve based on their emotions so that I could create a more intuitive user experience. I was also able to also gather possible opportunities that could be explored.
.jpg)
Personas
Based on the research the information gather was sorted into an empathy map where I was able to derive two personas.
I revisited these user personas throughout the entire product development process often in order to remind myself of the needs and frustrations of my users, and to maintain a user-centric focus for the duration of the project.
MoSCoW & Core features
With a better idea of my users and their needs, I used a MoSCoW framework to help me prioritise the features that i would be adding to the app at this stage.
I then identified the three core features that I wanted to focus on for the app.
1. Search button - Able to search recipe based on ingredients available/ dietary requirements and cooking time.
2. Clear guided visuals - A step by step visual with language describing each step.
3. Review + Share - The ability to review recipes and share on social media platforms.
Sketches
I usually start the design process with low fidelity sketches. This is the way I iterate through many design options quickly to then chose the one most centred to the users.
For the initial front page I quickly sketched 3 different options and with each time I had in mind the user and that the display wasn't too cluttered, too much scrolling and that it wasn't over powered with lots of options.
Ideate
Wireframes
Once the sketches were complete I went on to create some high fidelity wireframes on Figma. This was then used as a prototype to conduct usability testing.
Prototype
User Testing
The users were asked complete a few scenario-based tasks that would test the main features of the app, and were asked how they felt about the app in general. The results of the usability tests were recorded and analysed in order to gather key insights which helped formulate recommendations.
Key Insights
-
Users had difficulty navigating from one page to the other on the Step-by-step method
-
Users struggled getting from the search page to the suggested recipes
-
Users want to save a recipe without having to Snap and Share.
-
Users struggled to carry out the task straight away.
Recommendations
Highest
-
An arrow or button signifying how they can get to the next step of the method.
-
Rename the search tab and include a button within that page that says ‘search for ingredients’.
-
A button should be present when users have finished inputting their ingredients to show the potential recipes.
-
Search option should be the front page that is first viewed upon opening the app.
-
Option to skip the snap and share section and still be able to rate the meal and save.
-
Rate and save before snap and sharing so as to avoid making the user come back into the app unnecessarily.
-
Once the recipes are given, a filter which allows users to select based on cuisine, kcal.
-
Potential removal of the timer button and replaced with a next button
-
The use of language on top of the instruction such as ‘Step 1’.
Lowest
These recommendations are going to be used to create changes to the app based on the user feedback.
Iterate
Accessibility
After completing the project I did some further learning around accessibility and believe that the Chef-it app could do more to ensure that it is meeting the needs of the all users with all type of accessibility needs.
One way that i could have made the app more accessible would be to seek out users with accessibility need for the interviews and usability testing to make sure their needs were met. Another way that Chef-it could have been more accessible is having picture annotations to allow the pictures on the page to be read with screenreader.
What’s next?
I spent a lot of time researching Neilsen’s 10 Usability Heuristics towards the end of this project, and I believe that Chef it! Would will benefit from a heuristic evaluation for user interface design to ensure it is meeting usability guidelines.
Chef It! Could next do with a full UI design revamp in the future.
I also have a few features that are not yet available as this was a MVP but would most definitely like to include in the future.