This is a design of a cooking app done in university with my group where I was the main UI designer.

The Hi-Fi prototype may be accessed here: https://xd.adobe.com/view/05854105-ea61-4104-97e3-9e2e2ee1679f-50d6/?fullscreen

User needs

We interviewed several users about their challenges they had faced with cooking apps, which they had expressed how they found it hard to search for recipes using the ingredients they had available. Some mentioned how they had trouble finding out if recipes could be performed with their current skill level, especially without any known alternatives.

We had identified four types of users based on the needs they expressed:

- those who wish to search and filter recipes based on the ingredients they have available

- those who want to find alternatives to similar recipes based on ingredients they have

- those who wish to follow step-by-step instructions while monitoring their progress, in a way that caters to their current skill level

Process

The design was ideated with the team using the Crazy 8s method in order to design various components that would later be useful in the main design. Several inspirations were looked into in order to develop the components needed.

During this phase, various pages were designed such as the Home page for recommendations, Profile to view favorites, Inventory for the ingredients, the Search page for filtering recipes to find and the Recipe page to view a specific recipe and similar recipes to it.

Several wireframes were designed and through an iterative Agile process, we came up with this HiFi prototype as shown below with some of the pages.

Initial Feedback

Previous prototypes had suffered from visibility issues from the layout and visuals being oversimplified, such that the elements could not always lead to where users could find the recommended recipes. This occurred a lot on the recipe and search pages, leading to refining of the aesthetic to apply more contrast into elements and managing how it flows vertically in order to make it obvious if elements were hidden. Users also expressed how information may not need to be oversimplified so that they can view everything they need at once, leading to the design prioritizing showing recipe details as much as possible in components.

Evaluation

The evaluation was conducted through user-testing sessions performed on video call using the latest prototype. Users were provided with scripted scenarios and tasks to test key functionalities, which were used to assess usability and identify areas for improvement. Apart from user feedback and a UEQ survey, we had recorded task succession rate, time taken and errors encountered.

Of the five users who tested the prototype, all of them expressed getting lost in navigation, as well as having trouble with unclear interactive elements due to styling. Despite this, all users had 100% task completion and were able to navigate on the intended paths taken.

This encourages future designs to lean towards clarity, clearer navigation paths designed using personas, as well as maintaining consistency in the style to strike a balance between simplicity and being informative at the right view.