Tear It Down, Build It Back Up
A new site for Jack in the Box and the beauty of sticking around long enough to re-design your own work.
There’s always one constant in any site re-design/re-build: The previous designers (and developers) were idiots. They made mistakes we never would’ve made. Their code is held together with bubble-gum and chicken wire. It’s obvious that their UX team was a bunch of converted media interns. Even on a brand identity job, you’ll hear the same refrains of ineptitude (typeface! colors! geometry! kerning!). Picking apart the work of the previous idiots is one of the purest pleasures our industry has to offer.
But what if you’re the idiot?
Over the last few months, that’s been the case. Maybe this means I’m old. Maybe it means I’m in the wrong place at the wrong time. Or maybe it means something else—that I’m finally seeing the value in experience, in hanging around long enough to attack a problem more than once.
We’ve been working with our wonderful, clown-headed friends at Jack in the Box for more than four years now. One of our earliest, most ambitious efforts was the re-design of their core digital property. It was a huge leap, a playful site packed with easter eggs and interactive adventures. Hundreds of weird animated GIFs. Photo filters on product images. A fake Geocities-style parody site. It was a blast to create and, well, not-such-a-blast to maintain.
After three years, we started to question who would’ve designed such a site. The internet had shifted and it was time for something new, something stronger, leaner and more adaptive. The re-design is forward-thinking and eliminates/improves on a lot of the speed bumps we’ve encountered over the last few years. It’s beautiful and functional. If the key to creative happiness to to always be the most excited about your most recent work — well, then, I’m incredibly happy.
It wasn’t easy, though. Objectively tearing down your own work is a humbling process. It exposes the flaws and weaknesses that are often hidden from the outside world—the things we desperately try to avoid thinking about, but know are there. In this way, it’s also incredibly therapeutic. Instead of living with the tinges of regret that accompany nearly any endeavor (no matter how successful), you have the chance to unearth those miniature creative demons. You can right the strategic and creative wrongs of your own past.
Before this all gets too philosophical, let’s get specific. The new Jack in the Box site was strategically grounded in five key objectives. Here’s what they are—and how we (a whole pile of Struckers, including Ben Peters, Abe Levin, Joanna Papaleo, Matt Gitchell, Patrick Sullivan, Katherine Cochran, Ryan Harmon, Robyn Reynolds, jaclyn.stiller, Steve Caldera, Essie Nagler and RyanCoons) tackled them:
Brand Reinvigoration
Over the last year or so, the Jack in the Box brand has evolved. Part of that evolution has been with the character of Jack and part of it has been more about visual tone/style and messaging. You may have noticed that Jack is more of an explorer and less of a goofball uncle. These shifts had a great impact on the design and content of the new site. Jack has settled into a less obvious/omnipresent visual role. We eliminated a ton of copy, adopted a more straightforward tone and emphasized more customer-perspective photography. The result is a site that looks, feels and reads unlike the previous site—but without abandoning the affinity that Jack’s fans have for the brand (and the character).
Email/Text Sign-ups
Given that e-commerce isn’t a focus of jackinthebox.com, there are only two areas of measurable conversion on the site: email/text sign-ups and location searches. Our last re-design, completed in 2013, had made huge strides in this area, boosting sign-ups by nearly 30% each month. It would be tough to top that achievement, but we had a few ideas. First, we used existing coupons to drive sign-ups. It seems obvious, but creating an instant incentive/reward for signing up was a new approach. The old site simply asked for sign-ups and then delivered coupons later on. Our new structure shows any available digital coupons, but only releases them once a visitor has completed the sign-up form. We were also tasked with giving away one million free burger coupons just a week after the site launched—a huge undertaking, but also a strategy that helped drive more subscriptions to the email and SMS lists.
Location Searches
We also faced a stiff challenge with location searches. The old site offered snappy location results with a number of hidden easter eggs stashed along the way (search for a restaurant in China and you might find an oddball animated gif with the Great Wall repurposed as a psychedelic miniature golf course). Our greatest ambition here was to maintain that efficient performance while looking for improvements across all devices. It’s a constant process of iteration. Visitors can search based on city/state, zip code or using their current location—and each restaurant has a unique, searchable results page. This strategy leads to a direct integration with Jack in the Box’s media partner, driving increased interaction around specific restaurant locations.
Food Focus
My favorite thing on the Jack in the Box menu is the pack of Mini Churros. They’re amazing. They’re churros, but they’re mini. Everyone should know about them. After flirting with product filters and backgrounds on the old site, our ambition this time around was to push the craveability of Jack’s menu. We explored a number of options, then settled on something we termed “Food on Food Porn.” Not nearly as derelict as it sounds, it’s a design approach that also resulted in a clever technical solve that divides primary content areas into four layers: background, foreground, headline and embellishment. All fully populated through the CMS (we used Contentful), designers can craft promos and product detail pages by following the simple four-layer structure. We may be biased, but the burger-on-oversized-burger pages are tantalizing, guaranteed to make you crave a Double Jack no matter the time of day.
Modern Structure
I intentionally saved this one for the end because it’s the one that hurts the most. The old site was modern in 2013, but quickly felt dated. The list of necessary upgrades was long (and predictable)—responsive, clean, flat, etc. etc. But we also didn’t want to fall into the trap of homogeneity. How could we adapt modern best practices but still maintain some of Jack’s unique spirit? We settled on a two-column structure with subtle animations to hint at the interactions. The left column would always be a fixed promo area, but the right column would offer as much scrolling real estate as necessary for product promotions, social aggregation and special offers/coupons. It seems familiar, but also (hopefully) wouldn’t be easily confused for a Squarespace template. Working diligently with the client, we also developed new design elements and eliminated any unnecessary copy. Even the primary navigation was streamlined. It might seem like a small thing, but we’re proud that the site is one of the most intentionally simple and direct sites in the category.
What am I trying to say? In our current atmosphere of better, faster, more, different — there’s still a lot to be said for persistence and longevity. How can we learn the value of iteration and agility if we never stick around long enough to tear something down and build it back up again? It’s a question that can only be answered one day and one relationship at a time. It requires hard work and tough conversations, humility and the willingness to do some really unsexy work. We have to fight to keep our clients happy. We have to be valuable enough that they want to keep us around.
Each day, we show up to do this work — and there’s at least one reason to jump ship. A fancier client. A longer timeline. A more flexible brief. A bigger paycheck. A loftier title. But, if we’re lucky/happy/lazy/hard-headed/daring enough — and if the stars align perfectly — we might get to re-design something truly amazing. We might get to re-design us.
Looking for more insights, facebooking, twittering, ramblings, musings and other thoughts? Follow our Greater Than collection.
