The Creative Design Process Behind The Simpsons Landing Page

In Design, Visual by LauraLeave a Comment

This is about that one time when I drew THE Homer Simpson and then pitched the concepts to his people at Gracie Films. Be still, my heart.

While this project has shined in the portfolio for a few years, it continues to be completely surreal to think I had anything to do with it. I recently rediscovered the sketches from this one and seriously have no better way to illustrate the creative design process to you, especially where real-life business hurdles and timeline challenges are present. This was hard. It took a holistic perspective to take the right next steps. And, in the end, it straight up rocked for a thousand reasons you might not expect.

Look at the creative design process behind this awesome project for The Simpsons! Wicked cool ideas and sketches. @marketmox

Once upon a time, the awesome folks at Gracie Films teamed up with Garmin International to offer some pretty epic voice and vehicle downloads for your in-car navigation system. They needed landing pages. Awesome ones. So, working with a badass developer, we set out to create some truly incredible interactive goodness to celebrate the new products.

We had to get through the entire creative and development processes and we had to do it fast. With a product launch date less than 30 days out (meaning we had just days to produce a functional landing page for review), we rocketed through the prepare, incubate, insight, evaluate and elaborate stages of the creative design process to build some great pages. This is what that looked like:

Ideas and Concepts

I’m a known doodler. I visualize everything and communicate best when I can draw it for you. The Simpsons landing pages were no exception. With three solid ideas in mind, I sketched full layouts of what we’d attempt to build. These options were at scale based on the time and level of effort that our teams would have to invest in making them happen: good, better and rock your face off.

Option 1: Good

Look at the creative design process behind this awesome project for The Simpsons! Wicked cool ideas and sketches. @marketmox

Our first option would allow for super-fast development and easy shopping by leveraging a standard template that I’d built for previous voice and vehicle bundles. While this was a phenomenal option for both the brand and the user experience, it didn’t quite pack the creative and interactive punchiness that both my developer and I wanted to explore.

Option 2: Better

Look at the creative design process behind this awesome project for The Simpsons! Wicked cool ideas and sketches. @marketmox

Our “better” option added more interactivity and leveraged the show’s styling to set Homer, Marge and Bart on the streets of Springfield. Users could navigate left and right to explore the street, meet the characters and make their purchases. Some awesome parallax detail, fun buttons, sound effects and animations made this a quirky and fun experience.

We had executed this exact concept with characters from Sesame Street just months earlier and knew how to optimize the process. Still, it would take a bit more time and creative effort to build this over our first option.

Option 3: Rock Your Face Off

Look at the creative design process behind this awesome project for The Simpsons! Wicked cool ideas and sketches. @marketmox

Option 3 was pretty fucking epic if I do say so myself. Leveraging parallax, some incredible animations and general sorcery on the developer’s part — this animated vertical scroller told the complete Simpsons story.

The page opened with clouds parting and logos zooming just like in the opening credits of the show as you scrolled. Inspired by Ben the Bodyguard (to this day, one of my favorite interactive sites), the overhead tour through Springfield would trigger animations and Easter eggs to highlight the features of each voice and vehicle bundle. We concepted an entire map of the city and just how each car would flow through page — simply unbelievable.

But remember, we had only days to execute. This was by far the most time and development intensive option on the table.

Design and Execution

After pitching the concepts to Gracie Films and gaining access to their creative assets, it became brutally clear that our timeline simply couldn’t accommodate the flashy interactive options (a d’oh moment). This is where many lean principles came into play: we had no data to support the need for the more development-heavy concepts and couldn’t prove that our investment in them would show a clear boost in sales. With those things in mind, we opted to leverage the more simple but data-driven design.

The layout was customized and branded with The Simpsons 500th episode graphics. Its fast turnaround allowed us to direct attention at creating beautiful matching banners and images for use in ads and social media. Ultimately, we were able to build an entire campaign around promoting this landing page in less time than would have gone into building even the slightly more interactive option.

Look at the creative design process behind this awesome project for The Simpsons! Wicked cool ideas and sketches. @marketmox

The clients were thrilled with the result and the page performed wonderfully. With a clear definition of the products, the sound effects available and how they worked — we were able to boost conversions and sales for the bundles while showcasing the awesome partnership of two huge brands.

Analysis and Evolution

After seeing the success of The Simpsons bundles delivered in this simplified layout, we went on to build all future bundles in this same template. In fact, we even back-tracked to our Star Wars and Sesame Street bundles months later and reformatted them into this consistent style.

While we were forced by our timeline to reign in ideas into more manageable projects, relying on our data and user experience expertise allowed us to efficiently build the better of our options and meet the business goals we were aimed to achieve. Pretty freaking sweet.

The Simpsons name, logo, characters and art are the copyright of Gracie Films. The Garmin name, logo and copyright is the property of Garmin International. Works for both brands are reproduced here as a show of portfolio by designer, Laura Noll, under fair use practices for non-commercial editorial content.