Chick-fil-A_Logo 3

Chick-fil-A.com Redesign

Chick-fil-A.com Redesign

Fall 2015–Fall 2016  •  Wondersauce

Team Members:

Team Members:

  • Kaley Hedric Product Management
  • Corey Michalek Design Lead
  • Mark Austin Junior Visual Design
  • Lindsay Knoll Junior Visual Design
  • Meghann Bush Project Management
  • Kaley Hedric Product Management
  • Corey Michalek Design Lead
  • Mark Austin Junior Visual Design
  • Lindsay Knoll Junior Visual Design
  • Meghann Bush Project Management

America’s most beloved restaurant chain was ready for a complete redesign and reimagining of their online presence.

Working together we created a new site that’s both a storytelling and information hub that serves as a digital extension of their restaurants. The site features localized menus and pricing and content that adapts based on location, time of day, and customer preferences.

America’s most beloved restaurant chain was ready for a complete redesign and reimagining of their online presence.

Working together we created a new site that’s both a storytelling and information hub that serves as a digital extension of their restaurants. The site features localized menus and pricing and content that adapts based on location, time of day, and customer preferences.

America’s most beloved restaurant chain was ready for a complete redesign and reimagining of their online presence.

Working together we created a new site that’s both a storytelling and information hub that serves as a digital extension of their restaurants. The site features localized menus and pricing and content that adapts based on location, time of day, and customer preferences.

America’s most beloved restaurant chain was ready for a complete redesign and reimagining of their online presence.

Working together we created a new site that’s both a storytelling and information hub that serves as a digital extension of their restaurants. The site features localized menus and pricing and content that adapts based on location, time of day, and customer preferences.

How can we set a new precedent for modern fast food websites?

How can we set a new precedent for modern fast food websites?

How can we set a new precedent for modern fast food websites?

Goals

  • Consolidate duplicate and fragmented content, digital properties, and microsites.
  • Create a storytelling platform that emphasizes people and their stories
  • Embrace a commitment to food transparency with nutrition and ingredients
  • Prioritize location finding to drive guests to nearby restaurant locations
  • Highlight and integrate online ordering throughout the experience
  • Individualize each guest’s experience through personalization and localization
  • Craft a premium experience that brings the brand to life on the web
  • Cleverly integrate the iconic “Eat Mor Chikn” cows
  • Consolidate duplicate and fragmented content, digital properties, and microsites.
  • Create a storytelling platform that emphasizes people and their stories
  • Embrace a commitment to food transparency with nutrition and ingredients
  • Prioritize location finding to drive guests to nearby restaurant locations
  • Highlight and integrate online ordering throughout the experience
  • Individualize each guest’s experience through personalization and localization
  • Craft a premium experience that brings the brand to life on the web
  • Cleverly integrate the iconic “Eat Mor Chikn” cows
  • Consolidate duplicate and fragmented content, digital properties, and microsites.
  • Create a storytelling platform that emphasizes people and their stories
  • Embrace a commitment to food transparency with nutrition and ingredients
  • Prioritize location finding to drive guests to nearby restaurant locations
  • Highlight and integrate online ordering throughout the experience
  • Individualize each guest’s experience through personalization and localization
  • Craft a premium experience that brings the brand to life on the web
  • Cleverly integrate the iconic “Eat Mor Chikn” cows
  • Consolidate duplicate and fragmented content, digital properties, and microsites.
  • Create a storytelling platform that emphasizes people and their stories
  • Embrace a commitment to food transparency with nutrition and ingredients
  • Prioritize location finding to drive guests to nearby restaurant locations
  • Highlight and integrate online ordering throughout the experience
  • Individualize each guest’s experience through personalization and localization
  • Craft a premium experience that brings the brand to life on the web
  • Cleverly integrate the iconic “Eat Mor Chikn” cows

Content Consolidation

Content Consolidation

Content Consolidation

Content Consolidation

Chick-fil-A wanted to bring all their digital properties together under one roof. Over the years they had amassed quite a collections of one-off site for "this and that, and that, and don't forget about this one, and oh... I'd never actually seen this one before, and who knew this one existed?" And so on and so forth. Get the picture? We worked really hard to understand all the content we were being asked to consolidate, looking  not just at what it was, but what it might belong with, who the intended audience was, and asking where it fell in a hierarchy with the other content.

Chick-fil-A wanted to bring all their digital properties together under one roof. Over the years they had amassed quite a collections of one-off site for "this and that, and that, and don't forget about this one, and oh... I'd never actually seen this one before, and who knew this one existed?" And so on and so forth. Get the picture? We worked really hard to understand all the content we were being asked to consolidate, looking  not just at what it was, but what it might belong with, who the intended audience was, and asking where it fell in a hierarchy with the other content.

Chick-fil-A wanted to bring all their digital properties together under one roof. Over the years they had amassed quite a collections of one-off site for "this and that, and that, and don't forget about this one, and oh... I'd never actually seen this one before, and who knew this one existed?" And so on and so forth. Get the picture? We worked really hard to understand all the content we were being asked to consolidate, looking  not just at what it was, but what it might belong with, who the intended audience was, and asking where it fell in a hierarchy with the other content.

Chick-fil-A wanted to bring all their digital properties together under one roof. Over the years they had amassed quite a collections of one-off site for "this and that, and that, and don't forget about this one, and oh... I'd never actually seen this one before, and who knew this one existed?" And so on and so forth. Get the picture? We worked really hard to understand all the content we were being asked to consolidate, looking  not just at what it was, but what it might belong with, who the intended audience was, and asking where it fell in a hierarchy with the other content.

How do you architect a website cleanly and simply but still fold in an abundance of content?

How do you architect a website cleanly and simply but still fold in an abundance of content?

How do you architect a website cleanly and simply but still fold in an abundance of content?

How do you architect a website cleanly and simply but still fold in an abundance of content?

cardsorting1

Through card sorting we ultimately recognized we were designing for four main audiences: customers,  employees, restaurant operators, and business partners. It might not look sexy but boy was it helpful.

Through card sorting we ultimately recognized we were designing for four main audiences: customers,  employees, restaurant operators, and business partners. It might not look sexy but boy was it helpful.

Through card sorting we ultimately recognized we were designing for four main audiences: customers,  employees, restaurant operators, and business partners. It might not look sexy but boy was it helpful.

Menu as the Homepage

Menu as the Homepage

Menu as the Homepage

Our early research with customers quickly revealed that the top reason to visit Chick-fil-A's website was to see the menu. Based on this insight we took an unconventional approach and rather than force visitors to seek out that portion of the site, we simply moved menu to homepage. Right when a user lands on the site, there it is.

Our early research with customers quickly revealed that the top reason to visit Chick-fil-A's website was to see the menu. Based on this insight we took an unconventional approach and rather than force visitors to seek out that portion of the site, we simply moved menu to homepage. Right when a user lands on the site, there it is.

Our early research with customers quickly revealed that the top reason to visit Chick-fil-A's website was to see the menu. Based on this insight we took an unconventional approach and rather than force visitors to seek out that portion of the site, we simply moved menu to homepage. Right when a user lands on the site, there it is.

cfa_menu-hero

The menu begins with a fullscreen area that can adapt its content based on the time of day, what we know about the individual's preferences, or any local promotions. As the user scrolls down the page they discover a tabbed menu navigation preset to the most appropriate menu section for the time of day.

The menu begins with a fullscreen area that can adapt its content based on the time of day, what we know about the individual's preferences, or any local promotions. As the user scrolls down the page they discover a tabbed menu navigation preset to the most appropriate menu section for the time of day.

A majority of specialty running shoe sales happen in-store where shopper's are able to speak directly with a running shoe specialist. In this direction we wanted to capture the familar in-store conversational format to guide the shoe selection process.

Storytelling

Storytelling

Storytelling

Storytelling

Spreading positive heart-warming stories is one thing Chick-fil-A cares about most. "We wanted to offer [guests] something a little unexpected, like access to acclaimed chefs, seasonal recipes they can make at home, and stories that inspire, like the documentary-style film of a high school student who bonds with a dementia patient through their love of art,” Ashley Callahan of Chick-fil-A explained. As a result, storytelling became a central pillar of the online experience. 

Spreading positive heart-warming stories is one thing Chick-fil-A cares about most. "We wanted to offer [guests] something a little unexpected, like access to acclaimed chefs, seasonal recipes they can make at home, and stories that inspire, like the documentary-style film of a high school student who bonds with a dementia patient through their love of art,” Ashley Callahan of Chick-fil-A explained. As a result, storytelling became a central pillar of the online experience. 

Spreading positive heart-warming stories is one thing Chick-fil-A cares about most. "We wanted to offer [guests] something a little unexpected, like access to acclaimed chefs, seasonal recipes they can make at home, and stories that inspire, like the documentary-style film of a high school student who bonds with a dementia patient through their love of art,” Ashley Callahan of Chick-fil-A explained. As a result, storytelling became a central pillar of the online experience. 

Spreading positive heart-warming stories is one thing Chick-fil-A cares about most. "We wanted to offer [guests] something a little unexpected, like access to acclaimed chefs, seasonal recipes they can make at home, and stories that inspire, like the documentary-style film of a high school student who bonds with a dementia patient through their love of art,” Ashley Callahan of Chick-fil-A explained. As a result, storytelling became a central pillar of the online experience. 

"Our goal is to share stories and create meaningful moments with existing and potential customers.”

"Our goal is to share stories and create meaningful moments with existing and potential customers.”

"Our goal is to share stories and create meaningful moments with existing and potential customers.”

"Our goal is to share stories and create meaningful moments with existing and potential customers.”

cfa_todays-stories

The Today's Stories bar gives stories a presence on the homepage without them getting in the way.

cfa_stories

The Chicken Coop serves as the site's central hub for all things storytelling with everything from recipes and stories to activities and press releases.

cfa_bite-size

Small "bite-sized" pieces of content appear all over the site linking utility focused content to related stories.

Closed on Sunday

Closed on Sunday

Closed on Sunday

As one of the brand’s most recognizable traits, the site also “closes” on Sundays driving visitors to family focused stories and activities instead. As a day set aside to be spent with family and friends and worshiping if you choose, this content is intentionally non-promotional focusing on community and bringing people together. And don't worry, the rest of the site is still accessible on Sundays if you need it.

As one of the brand’s most recognizable traits, the site also “closes” on Sundays driving visitors to family focused stories and activities instead. As a day set aside to be spent with family and friends and worshiping if you choose, this content is intentionally non-promotional focusing on community and bringing people together. And don't worry, the rest of the site is still accessible on Sundays if you need it.

As one of the brand’s most recognizable traits, the site also “closes” on Sundays driving visitors to family focused stories and activities instead. As a day set aside to be spent with family and friends and worshiping if you choose, this content is intentionally non-promotional focusing on community and bringing people together. And don't worry, the rest of the site is still accessible on Sundays if you need it.

cfa_sunday

On Sundays visitors encounter a fullscreen timelapse we shot explaining that the restaurants are closed. The overlay can be dismissed to access the site normally.

On Sundays visitors encounter a fullscreen timelapse we shot explaining that the restaurants are closed. The overlay can be dismissed to access the site normally.

Thoughtful Touches

Thoughtful Touches

Chick-fil-A is known for going above and beyond and for thoughtfully considering the little things. We worked hard to bring that spirit to their new website.

Chick-fil-A is known for going above and beyond and for thoughtfully considering the little things. We worked hard to bring that spirit to their new website.

cfa_ingredients

Mobile users can interactively construct each sandwich to learn what comes on it and to see each fresh ingredient individually.

Mobile users can interactively construct each sandwich to learn what comes on it and to see each fresh ingredient individually.

Mobile users can interactively construct each sandwich to learn what comes on it and to see each fresh ingredient individually.

cfa_cows

Let's not forget about the cows. They'll pop up in various places across the site so stay on the lookout. 

Let's not forget about the cows. They'll pop up in various places across the site so stay on the lookout. 

Let's not forget about the cows. They'll pop up in various places across the site so stay on the lookout. 

sauces1

Chick-fil-A wanted to create an authentic experience avoiding overly aspirational beauty shots of the food and condiments. This sauce hover state lets guests interact with each sauce packet as they would in a restaurant and let's them see both the packaging and  the sauce inside.

Chick-fil-A wanted to create an authentic experience avoiding overly aspirational beauty shots of the food and condiments. This sauce hover state lets guests interact with each sauce packet as they would in a restaurant and let's them see both the packaging and  the sauce inside.

Chick-fil-A wanted to create an authentic experience avoiding overly aspirational beauty shots of the food and condiments. This sauce hover state lets guests interact with each sauce packet as they would in a restaurant and let's them see both the packaging and  the sauce inside.

Menu-collapse

On scroll the primary navigation collapses down to a chicken sandwich menu icon.

On scroll the primary navigation collapses down to a chicken sandwich menu icon.

On scroll the primary navigation collapses down to a chicken sandwich menu icon.

cfa_extras-hero

Chick-fil-A.com is a massive site and I'm happy to talk about any of the nearly 100 pages we designed for the site (many of which follow a handful of templated structures we developed for the project).

*Additional process available upon request