Hero image of several components used in the wendy's design system


Product design,
art direction

Let's be real, the only reason you're ever on a restaurant's website is because you need to check the menu and MAYBE because you want to see the new, weird sandwich they've cooked up. Anything beyond that is an edge case, albeit an important edge case with business implications, but an edge case nonetheless. The Wendy's site gets an average of ~3 million users a month, so that's ~2.9 million people a month who just want to see what's on the menu. So, naturally, a redesign and creation of a multi-platform design system needed to revolve around making it as easy as possible to see what's on the menu.

Check it out IRL ->
The website before the redesign
In addition to being an accessibility nightmare with text part of images and no logical semantic structure, the old wendys.com put the users needs second. Maybe even third or fourth.
The website before the redesign
The utmost importance was placed on pushing new limited time products and video content that was typically just content that was also running on television.
Process artifacts including sketches and sticky notes
Knowing the massive scale of the Wendy’s ecosystem we knew the final outcome had to be a living, breathing design system that spanned more than just the website.
gif of the homepage menu component scrolling horizontally
The vast majority of people that visit wendys.com simply want to see the menu, so there’s no need to hide the menu content behind a click, inside a modal, or nested in a carousel.
Wendy's homepage frosty example
Revolving limited time offer messaging in the top spot on the home page.
Wendy's homepage NCAA example
Flexibility in content authoring means this top messaging can still be fun.
Wendy's homepage Made To Crave example
It’s about finding a mix between user needs and business requirements.
Wendy's website card component and FAQ component
We also developed a bunch of other component types to house more technical, business-driven content.
Wendy's website internal dashboard example
The Pigtails design system has now started to sneak its way into other Wendy’s touchpoints, including the internal Wendys Image Management System (WIMS) which manages content for every platform including the menu in every single store.
Wendy's timeline component addition to the design system
Since Pigtails is a living, breathing system it’s constantly iterated upon. Internal teams across The Wendy’s Company are able to request help with a project and a team determines if it can be accomplished with existing web components or if a design sprint is needed to come up with a new component, like in the case of the Wendy’s History component featured above.
The site is also in the early stages of experimenting with personalization via Acquia Lift. More or less, frequent visitors of wendys.com fall into one of three categories - hamburger people, chicken people, or salad people. So the ability to segment those people and prioritze content based on their interests leads to a faster, more pleasant experience for everyone, Wendy’s included. Our work was featured at Acquia Engage 2018 and you can listen to Michael Mancuso talk about the project in much more detail in the video above.
Collage of process artifacts, app screenshots, food pics, and sketches

Special thanks to 90° Labs, Jess Elwood, Jeremy Cline, Bryan Allen, Michael Smith, and a lot of other people I'm definitely forgetting. Teamwork makes the dreamwork.

More like this

Fancy a burger?

Case study ->

Streamin' ain't easy

Case study ->

Storytelling that really matters

Case study ->

Sketch + GIFS = !!!

Case study ->

Turn that 404 into a 444!

Case study ->

Design, etc.

Whomst? ->