Panera Bread Case Study

Details

  • Deliverables
  • HTML5
  • SASS
  • Sketch
  • Skills
  • User Experience
  • User Interface
  • Responsive Web Design
  • Web Development
  • User Journeys
  • Prototypes
  • B2C
  • User Personas
  • E-Commerce

History

Panera Bread is an American chain of fast-casual restaurants. I worked to convince Panera’s leadership that there were massive, untapped opportunities to drive revenue and engagement through user experience, analytics, and personalization, and that the path to success was paved with moments that matter, key tactics, and measurable outcomes.

In 2012 Panera attempted to unify their online properties. Panera had neglected their online presence for years leading to dozens of sites with no coordinated planning, strategy, design, or insight. Hence the unification plan: gather all sites under roof with a new content management system with a unified visual design and analytics and data providing a unified view of the customer.

Unfortunately, we fell short of our goal. Competing forces and bad decisions left us in worse shape than before. Not only did we fail to unify our digital properties, we now had to deal with one of the most complex content managements system available (on a limited budget with an inadequate staff) for a confusing, marketing-only website (without e-commerce and not responsive/mobile-friendly), a separate e-commerce web site (with no marketing capabilities), a catering e-commerce website (plus another one for Canada), two e-commerce native platform apps (with no marketing capabilities), and many more. Compounding the issues, each group also had their own design, their own technology stack, their own analytics, and — in many cases — their own data sources.

Turning the Titanic

After a couple of years of withering support for panerabread.com, I decided to take the initiative and prove to the company that we were missing big opportunities: to connect with users, to increase revenue and enhance efficiency, cost-effectiveness, and quality control.

I knew there was little appetite within the company for another website “redesign” project, so I began to position this as an evolution of panerabread.com. We needed to be smarter and more strategic, and we needed a simple, but powerful and concrete vision of what success could look like, as well as how we should get there — to leap over the middle ground between where we were and where we needed to be.

My pitch has always been that Panera would be best-served by building one web site that synergizes the relationship between brand, customer, and commerce, driving efficiency in design, engineering, and technical debt, and gaining an advanced, single-source-of-truth for customer behavior. The key to unlocking customer behavior is understanding your users.

Understanding Users

In order to hone in on the biggest opportunities for success, I conducted a series of user interviews with a broad spectrum of people: people who classified themselves as heavy users and light users. I interviewed customers and people employed by the company.

The five biggest problems (opportunities) identified were:

  1. Site navigation and content organization were complicated and confusing and lacked a direct drive to commerce.
  2. The site was not mobile-friendly.
  3. The site was impersonal and transactional. There was no joy in the user experience.
  4. The visual design of the site was already outdated and out-of-alignment with other brand efforts.
  5. Search engine optimization and site analytics were poorly executed.

Understanding Analytics

I took the empathy gained from the user interviews and studied the site’s analytics to better understand user behavior and pain points. There were a lot of opinions at Panera about what users wanted from panerabread.com, but what did the data say mattered most to users based on their behaviors?

  • Users
  • 57%Menu
  • 26%Rewards
  • 8%Locations
  • 9%All others
  • Pageviews
  • 56%Menu
  • 27%Rewards
  • 8%Locations
  • 9%All others
User behavior January 2016 through December 2016

This data — combined with the user interview feedback — clearly showed what mattered most to users: food and rewards. The prevailing executive-level attitude at the time was, “Do not get in the way of e-commerce.” This was a noble goal, but they did it at the expense of experience. By placing a wall between the brand‘s belief system and the brand‘s commerce system, they created the first problem for users: “panerabread.com lacked a direct drive to commerce”.

A More Elegant Solution

What Panera’s leaders failed to realize is that the menu was (and still is) the perfect place to drive transactions and engagement. I knew from the research and analytics that the moments that mattered most to users were the menu and their rewards. Everything else was secondary for users.

I began to talk about the menu as the ideal index or table of contents for the site. Users who wanted to place an order or redeem their rewards could do so immediately on the home page or at any time on the menu pages without interruption or interference. With the same experience, branded content could be placed adjacent to menu items for users who were more curious about the brand. It was all about focusing on moments that matter and removing friction from those experiences.

Business Objectives

In order for any strategy to succeed, it is important to define what success looks like, so I highlighted three specific, measurable business objectives (key performance indicators) for the project:

  1. Increase transactions (and revenue)
  2. Deepen brand engagement (recency, frequency, depth, and duration)
  3. Foster a better understanding of user behavior to enable iteration and optimization

The outcomes had to be measurable and attributable to decisions made regarding the experience. It was also important to keep the scope of the objectives tight: focussed on transactions, engagement, and understanding. This was not just a strategy for the moment, but also for setting the stage for the future. There is no limit to the number of objectives you can apply to a project or a task. However, the heavier the burden, the greater the cost (in every sense of the word).

Key Tactics

Knowing how your success will be measured is important, but it is equally important to clearly establish the tactics to be used to achieve success. There are many good ideas, but you have to choose carefully. Every idea had to pass through these filters for consideration.

  1. A modern, mobile-first responsive design
  2. Heightened transparency and priority given to rewards for known users
  3. Convenient and prominent paths to commerce including personalized options based on prior behavior
  4. Simplified navigation (based on the moments that matter) and content supporting Panera’s brand values woven directly into the menu-browsing experience
  5. Promotion of other business channels (like gift cards and catering) as part of the content strategy

User Experience Design

From a design perspective, the goal was simple: keep the experience as clean as the food (clean food being a brand pillar). Site navigation needed to be concise: menu and rewards — everything else should be secondary. The data was to be trusted.

The intent was to present brand and commerce together, but keep both out of the way of each other: users who knew what they wanted should be able to place an order quickly (while still being exposed to some personalization and marketing), and users who had a desire to explore, connect on a deeper level with the brand, or just learn more about the food could dive as deeply as they like through videos, stories, and more.

Lastly, everything had to be cataloged as part of a tagging, testing, and analytics cycle to provide insights and highlight opportunities, as well as foster an enhanced learning environment.

Content Strategy

Content and design are most successful in a symbiotic relationship. The new content strategy was also simple: support the product (the food). Provide the details and tell the stories that inspired the food. Connect those things for people who are invested in the brand. Where do ingredients come from? How does it get to my plate? The only requirements: make it authentic and enjoyable, and something that would resonate based on how and when users were browsing the menu.

  • Inspiration
  • In the Field
  • In the Kitchen
  • On the Plate
  • In the Community
Continuum of storytelling opportunities

Prototyping

I made an early decision to present my concepts in fully-functional, hand-coded prototypes — to make it a point to put the work directly in stakeholder’s hands (on their own devices). Experience taught me that too many challenges come from static design for digital products. I was determined to design in code and test and present this project in the browser.

The prototypes also helped to highlight the benefits of a unified experience: one responsive design, one code base, any device, one experience for users to learn, but all stronger together.

I designed the first fully functional, responsive prototype for this new strategy and user experience in late 2016. I used live menu data (updated manually daily) in an effort to socialize the strategy with Panera’s leadership team and demonstrate the key pillars of a new user experience strategy and design. I supplemented the experience with simple weather and time-of-day logic to simulate personalization.

Results

My strategy, user experience design, and functional prototypes were successful: I convinced Panera’s senior leadership to approve a 2900% increase in funding year-over-year for panerabread.com. The topic became so hot that Panera went on a hiring spree and began to engage more seriously with external expertise.

By 2017 my time at Panera had run its course. Before my exit, I was fortunate to collaborate with Work & Co. on crafting on a new “omni-channel digital design”. I incorporated their creative work into the final version of the responsive prototype I had nurtured over the previous 2 years.