Redesigning a website to be as thoughtful as the company it represents.
Born from a three-year-old hot dog cart in Madison Square Park in 2004, Shake Shack has become a New York institution. The reason? Well, the food tastes great but Shake Shack’s edge lays in its thoughtfulness: the original Shack was designed to be harmonious with the park it originated in, its burgers star 100% all-natural Angus beef, its menu is free of trans fat, gluten-free options are available, and the buildings comprise green materials and sustainable woods where possible. It’s the sort of stuff that inspires lines around the block around the clock. But that was the offline reality. Online, things were different.
As Shake Shack grew from a single stand in New York City to fifteen restaurants in three countries, its website stood still. The arrival of so many new physical locations stirred an increasing need for a unifying online presence. Shake Shack is a company that thinks thoughtfully about each individual community to ensure the needs of the locals are being met. It was clear they needed a site that emphasized what makes each location unique while reminding the community of their humble beginnings. We came together to make one user-friendly site that reminds viewers the importance of the neighborhood, no matter the coordinates.
Flash made for a clunky website experience and for tiresome updating. And, with mounting demand to bring new locations to more communities, the site simply couldn’t keep up.
Our mission was to bring Shake Shack’s thoughtfulness online. And this is how we thought about it.
Keep decisions moving
When people are closing in on Shake Shack and have made it past the worlds of social and food apps, the key behaviors on mobile and desktop are essentially the same: fetch and go. People find a menu, check the address, and run. Playing with a brand like Shake Shack leads to temptation to do some wild and wacky stuff (like Skittles – Experience the Rainbow). However, we made a decision not to get in the way of decisions – but to keep the decisions moving to a nearby restaurant. For that reason, the site focuses thought on locations and menus.
Let locations show their personalities
There’s something beautiful about a company that encourages its locations to be relevant to their local communities. Some would call it thoughtful. To deliver this on the website, each location has its own page with a photo, a small spiel, location specifics, contact details, a map, its Shack-mosphere (current weather), its leaders, its menu, relevant social data (Instagram photos, check-in counts) and charity call-outs. This keeps decisions moving but also enables each store to add their own flair to the website.
Give fans somewhere to see the big (social) picture
Shake Shack has very avid fans – a lot of them, too. They share photos of burgers, burgers in mouths, fries in burgers, shakes, insignia and design, people lining up, and in-store whiteboards. They check in on Foursquare (over 165,000 check-ins at the time we posted this), they Tweet and they Like. So we created an area where Shake Shack’s most passionate connoisseurs can see what each other is doing – and we did it in a way that would not get in the way of people hunting for burgers.
In addition to aggregating fan photos, we art-directed a photo shoot designed for one thing: drooling. Yes, we ate our way through the day but it was a sacrifice we were happy to make.
Build for scrolling fingers and thumbs
In addition to transitioning the site to HTML5 and enabling users to access information from any device in a way that makes sense on that device (also known as ‘responsive design’), we put the content into five long pages. This is to appeal to users’ natural tendency to scroll rather than click through a site for quick access to valuable information.
Build for expansion
One of the advantages of the site’s simple structure is that adding new locations won’t be a nightmare. What makes it even easier is the use of WordPress for the content management system. There are enough plug-and-play modules to allow the content manager to add locations easily, yet still add local quirks to the location pages.
Add small touches
Pentagram originally developed Shake Shack’s iconography. We worked to the style guide and developed a suite of icons to, again, bring the offline thoughtfulness online.
So, while Shake Shack occupies the thoughts of many people around the world daily, it’s achieved this through a thoughtfulness that we aimed to bring into the website redesign project. The result is a deliberately simple user and admin experience with lots of small touches – just like the restaurants themselves.