Home Chef Jonah Bitautas

Home Chef Meal Cards Interaction

  • Save
Home Chef Meal Cards Interaction framerjs javascript css3 prototyping animation transition motion design ui design interaction design ux food home chef

Last week at Home Chef we launched a new version of meal cards throughout our web app. The thought behind the new flipping interaction was to surface key details that may be of interest to a user when picking a meal. This works in preventing them from needing to click away from the current page to find those details. It’s also a slight nod to the recipe cards that we send out with every delivery. ;)

Check out our menu page to see it in action:
https://www.homechef.com/menu

This was designed in Sketch and the interaction was initially prototyped in Framer (http://jonahvsweb.com/home-chef/meal-cards/) and developed through pair programming with @Mike Gibson using CSS3 Flexbox & Coffeescript.

keyboard shortcuts: L or F like