Cookie Recipe App

design sprint
Project Overview
This intention behind this design sprint was to practice utilizing smart animations between frames.
Component Creation
To start this project, I identified powerful tools commonly used in recipe apps and blogs and where pain points were noted. From there, I began to design out the prototype screens, initially working on the animated transition between recipes and expanding from there. If you check out the Figma file, you'll see I began with an original design that I extended out into various screens that break up the steps so as not to overwhelm the user.

Key Features

  • Calculator for measurements dependent on batch size.
  • Checklist option for ingredients added to recipe.
  • Quick view of ingredient list for shopping needs, along with time and yield counts.

Component design using three variant states with "on tap" interactions.

Simple two-state interaction is used to create this checkbox, with screen animations scheduled to reset components to original state on transition.