Agency client work / Genuine Interactive
This is a full-responsive microsite for Panera's grocery division, Panera At Home.
The following pages are a sample of the entire site build. The first two pages are visuals of the responsive homepage. The site leads with a full-screen immersive looping GIF, which the user can interact and then watch the full video if they choose.
The real meat of the site is explained via the carousel that sits in the middle of the homepage. It is a split screen of Panera Bread Cafe favorites on the left and a recipe using either one or more Panera At Home grocery products on the right. It was one way for us to check a box (more like check plus a box) in regards to the business goals of the client. It was a great visual way to illustrate that you can have the same great taste that you know and love from the cafe in the form of easy-to-assemble recipes with their products. The Call-to-action would then drive to a designated set of stop-motion videos that we shot and developed in-house at Genuine.
The next page is an example of where one of the videos would live, at the top of a Meal Idea detail page. The user has the ability to watch a quick video, and the subsequent recipe info and ingredient list would fall below.
The final set of pages is the Meal Idea landing page, featuring a Meal Planner tool that allows users to select a set of recipes and the ability to email the recipe steps and ingredients needed to themselves or a friend. The mobile version you are seeing is an earlier prototype where we wanted to make the experience as easy as possible for the user. The top area would be repurposed a few times for directional messaging for the user to email themselves their chosen meal idea list.
Winner of a 2016 w3 Gold Award