This intention behind this design sprint was to practice utilizing smart animations between frames.
Tools
Figma
skills
Prototype Component Creation Animation
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.
.gif)
.gif)
.gif)