ALLRECIPES
VIDEO COOKBOOK
An instructional cooking video app for the Windows 8 and 10 tablet experience.
CONTEXT
There are endless cooking how-to videos on the web. But when it comes down to actually cooking from a video there are practical complications that come with using a device in the kitchen. The Allrecipes Video Cookbook for Windows allows users to pause, skip and go back to any step with a single tap. Ingredients are displayed prominently alongside the video for easy reference.
OBJECTIVES
• Combine Windows UI conventions with the Allrecipes brand aesthetic
• Maintain the identity of a recipe as seen on Allrecipes
• Showcase recipes through video
• Create a user experience that integrates the process of cooking seamlessly with the step by step video model
PROCESS
• Problem definition
• Examined user data from
• Whiteboard wireframes
• Hi-fi mocks and visual design
• Redlines and assets
RIGHT: Detailed redlines delivered to the outside agency developing the Windows app for Allrecipes.
Users can view top level categories of recipes from the main screen. To see more of a specific category, tap the title. Tapping a recipe image will take users to the recipe & video details.
Since the app is video focused, the recipe video has the most visual weight. Basic recipe stats are seen below. The ingredients section of the recipe sticks to the top of the screen while the directions scroll beneath. Directions can be highlighted.
Using the pinching gesture one would use to zoom out on a map brings up Semantic Zoom in Windows apps. From this view a user has access to top level recipe categories.
Users can view top level categories of recipes from the main screen. To see more of a specific category, tap the title. Tapping a recipe image will take users to the recipe & video details.
MY ROLE AT ALLRECIPES
At Allrecipes I worked closely with product managers and engineers of multiple scrum teams plus other members of the design and marketing team. My role as a UI/UX designer was very collaborative especially with other designers. I worked iteratively on a variety of products including the main website, an Android app, iOS Apps as well as a Windows app.
