.Recipebook
A sample project within the cooking space. Acted as UI/UX designer for a recipe book application, working through phases such as problem definition, prototyping and testing, and high-fidelity designs. Utilized Figma, FigJam, and Google Docs.
Understanding and Empathizing with the User
The Problem
Cooking from home, particularly from recipes, was chosen for the purpose of this project. To better understand how we might better the experience for users, secondary research and interviews were conducted.
Key insights from secondary research, through competitive analysis and market research, showed:
- 1. Websites for recipes were text-heavy
- 2. Mobile applications require increased screen interaction due to available space.
- 3. Lack of interactivity or features once on the recipe details.
Interviews
Interviews were utilized to better understand the problem space, potential features, and the user. Artifacts included: an affinity map, persona, and empathy map.
Affinity Map
With the creation of an affinity map, three main insights and features were found.
Users often searched for the same recipe or had multiple locations for having them saved, such as devices, browsers, and note-taking applications. With features related to recipe aggregation, a browser plugin, or mobile app overlay all being potential solutions.
Users had difficulty finding specific parts for recipes or skimming through them. With features such as in-recipe search, voice-assistance, and focusable steps all being potential solutions. These features would have the added benefit of promoting accessibility within the application.
Users each had their way of remembering recipes. Requiring a careful balance of customization and ease of use - with tagging recipes chosen as a compromise to complement search and create features.
Affinity Map
Persona and Empathy Map
A combination of secondary research and interview findings was utilized to create a persona and empathy map to better empathize with the user. Key aspects that were emphasized included the diverse forms of media for cooking, ingredients utilization, and personal reasons for cooking and remembering recipes.
Ideate
Although critical screens such as home and details screens would be designed, creating a new recipe was chosen to be a red route and the main feature to be designed and tested. Other features were, however, tested to guide more specific, in-depth, efforts.
User Flow
Wireframes
Testing
Testing was done remotely with a medium-fidelity wireframe prototype. An important discovery made was the need for more context and information with regard to labels, placeholders, and auto/AI features. Another insight included the willingness of users for having more complexity in the details page while testing the search by pantry feature led to the discovery of users wanting a prompt-like approach rather than a conversational one.
High Fidelity Designs
Mood Board
The mood board utilized orange as its primary color while emphasizing sans serif font as the most prevalent font. Orange being chosen due to its relation to hunger and food while Inter being chosen as it would be a text-heavy application.
The logo and name were inspired by the concept of being digital and also being a play on “dot com”.
Style Guide
The style guide drew from the mood board and expanded on font details, form interactions, and media specifications.
High Fidelity Designs
Next Steps
Next steps would include wireframes and testing pertaining to the finding, sorting, and filtering of recipes. While discovery could be started for a browser plugin and/or a mobile application that can be an overlay. Print considerations, similar to Google Photos, can also be made as printing is prevalent within the online cooking space.