THE CLIENT

Panera at Home is Panera Bakery & Cafe's consumer product goods (CPG) line. 

THE BRIEF

Panera at Home needed to build a website where they could inform users of where they could find Panera at Home products near them and explore recipes using Panera products.

  • Help to develop the story about Panera at Home products and build a website for the brand and user experience.

SOLUTION

  • There are so many ways to Panera at Home. Demonstrate how versatile Panera at Home products are, showing how 2 or 3 items can make 6 or 7 different types of meals.

  • Build a site that inspires purchasing and sharing Panera at Home products and recipes.

  • Create wireframes for the website.

UX DESIGN TECHNIQUES

Taxonomy development | Prototyping | Axure wireframes |  Functional Annotations

TOOLS

Pen & Paper | Axure | Microsoft Office

TEAM

Creative director, Lead UX designer, associate UX designer (me!), visual designer, account executive, project manager and Sitecore developer team.

DURATION

3 month project.

MY Deliverables

OUR DESIGN PROCESS

Our design process shows the path we took over the 3 month design sprint. The double diamond figure shows how we diverged and converged at different points of the design process. 

Discover + DEFINE

Strategy and background

I was brought onto this project just as the lead UX designer was wrapping the box wires stage in which we laid out the basic goals and objectives of each template for the site. Prior to that, Strategy had done stakeholder interviews and a good amount of secondary research collection insights on Panera's consumer base and how best to market to the target demographic (mothers of financially well-off families). My role from this point on would be to help execute on designing out the wireframes. 

DEVELOP + Deliver

WIREFRAMES | Designs | Functional Annotations

 
 

WIREFRAMES

To make this experience one that would increase product sales and up social sharing, we wanted to design an engaging, image-driven experience with strategically placed opportunities for the user to find products near them and share products and recipes with their friends. We also wanted to create an interactive experience that would bring users back to the site for recipes as well as highlight how Panera at Home products allow users to get so much out of just a few products. 

Designs

Helped guide designs based on wireframes. As the project progress, Panera's legal team came to user with accessibility requirements which made for a fun and engaging challenge working within the limits of Panera at Home's style guide and brand colors to make the whole experience come together. Our greatest challenge however was running into the realization mid-designs that the client could not support the taxonomy and filtering system given their budget. To solve for this we had to pivot. I worked closely with design to create a much simpler approach to the recipe filter system which in the end turned out beautifully. 

 
 
 
 

Functional Annotations

As the client was approving designs, we began updating the wires to reflect and updates made using Axure. As we completed the annotations, the development team began working on the site.

SUMMARY

 
 

LESSONS LEARNED

From this project I learned a lot from the developers about how they use functional annotations and how might be a better approach for them moving forward. From this project on I would recommend to our account executives and project managers to scope for annotated designs since those always end up being the most up-to-date reference point for developers, linking in the wires and referencing them when specific functionality need to be implemented. I also learned a lot about Sitecore and wish we had been coordinating with the clients sooner on Phase 2 development costs to keep our designs within reach of the discussed budgets. 

UX DESIGN TECHNIQUES

Taxonomy development | Prototyping | Axure wireframes |  Functional Annotations

TOOLS

Pen & Paper | Axure | Microsoft Office