Helping to utilize recipes.

Conceptualized after a GV design sprint involving the cooking space, .Recipebook is a web application meant to complement recipe and excess food utilization.

figma link

Discovery and empathy

Initial hypotheses were guided by a GV design sprint previously utilized to understand and better the cooking process.

Competitor analysis was expanded upon while previous interviewees were willing to have a more focused and in-depth follow-up.

Interviews

Interviews, along with competitor analysis, showed a need for simpler interactions - i.e., voice commands, streamlined tab and keyboard controls, and identifying key snippets. Features that could be designed and developed with the added benefit of improving accessibility.

A majority of potential users also utilized a variety of platforms for saving recipes of different media types.

Personas and empathy maps

Key aspects utilized included the diverse forms of media for cooking, ingredients utilization, and personal reasons for cooking and remembering recipes.

Ideate and implement

Diagramming the user flows and wireframing the recipe creation/importing process was chosen for red routes. This would allow for initial research regarding creating/importing a recipe and the underlying information available for subsequent screens.

The recipe details page was also emphasized. Structured as a modal for quicker navigation and the preservation of the users state, the page was also minimal in content and included a search for scannability.

Foundations for key features ideated such as a better keyboard experience on the details page and voice recognition were set in the form of steps with a “focused” design.

Testing

Testing was done remotely with a medium-fidelity prototype.

Important discoveries included the need for more context regarding AI or programmatic features, the willingness of users to input more complex details, and the preferred use of prompt-like interactions over conversational ones.

Visual identity

The visual identity of the application reflects that of the market and its potential competitors. With orange being utilized as the main color, a sans serif font utilized for content, and a serif font utilized when needing contrast.