From Fries to Phones, Leviathan Uses Adobe XD to Design Interactive Experiences

This creative agency relies on Adobe Creative Cloud solutions to simplify how it creates interactive experiences for clients such as McDonald’s and Verizon Connect.

Image source: Leviathan.

Interactive experiences are great for attracting attention and getting people to engage, but the experience has to pay off. That’s what creative agency Leviathan strives for in every interaction it builds for its customers — a start-to-finish combination of creative content, digital technology, and unique physical spaces, to build experiences that change a customer’s perception, drive massive engagement, and ensure meaningful, measurable ROI.

“When Leviathan first opened its doors in 2010, we led more with design-focused motion content than anything, but from day one had always wanted to create physical experiences that also utilized some of those content skills alongside our interactive capabilities,” says Chad Hutson, Leviathan CEO. “Some early successes with live events such as Amon Tobin’s ISAM tour visuals along with activations for HP and Dodge really helped solidify that there was a need for specialized experiential teams like ours, and showed we were on the right track.”

From there, he explains, they spent the next few years evolving from a content studio supporting agencies to an agency leading concept-through-execution.

“It wasn’t without its growing pains, but we’ve really found our place in the world,” Chad explains. “Not only do we now help design and develop immersive digital environments for brands, but also team up with themed entertainment companies like Disney and Universal to augment their attractions. It’s a great balance to have after 10 years in business.”

A key tool for accomplishing their projects is Adobe Creative Cloud, including Adobe XD for creating wireframes, diagrams, and flat designs, as well as to support 3D work.

“Adobe is all about giving artists the tools to empower creativity, and as they evolve that toolset, we develop new and exciting ways to create experiences for our customers.” says Kyle Shoup, Executive Creative Director for Leviathan. “We’ve used Adobe Creative Cloud since day one. For 2D design, it’s the gold standard — we use Illustrator, Photoshop, even After Effects for post-production. Now, we’re integrating Adobe XD more and more to prototype digital experiences.”

Easily move from prototyping to development

A recent example of Leviathan’s powerful environment-based work is McDonald’s Global Headquarters. When the iconic organization moved to Chicago’s West Loop, Leviathan stepped in to create a suite of digital learning tools to inspire, teach, and engage visitors, including employees, suppliers, and franchise owners.

The space on each of the eight floors has a variety of interactive walls, education stations, and personalized experiences. Dynamic content is achieved with intuitive content management systems and various data feeds that combine curated and automated content. There’s also an interactive video that greets and draws visitors into the immersive brand experience.

On the second floor, Leviathan developed an interactive learning experience lovingly called Hamburger University. Here, visitors can learn about the history of McDonald’s, celebrate current students, and dig into the brand’s philanthropic work. It also features Hamburger University’s photo wall, a corridor lined with 132 square planar displays. Each panel features profiles of the current Hamburger University class and showcases their experience throughout the week with a graduation mode which displays social media feed of the current students. Information is collected via a custom mobile submission platform when students arrive.

The Ronald McDonald House Charities have their own experience located at the top of the stairs. This planar mosaic provides a unique, scrapbook-like format that displays unique experiences of families impacted by the Ronald McDonald House. Here, all experiences are managed through a custom CMS, ensuring easy updates in the future.

Image source: Leviathan.

A huge project like this requires total coordination and collaboration — which is a core element of XD. Using co-editing features, teams can work together in the same document in real-time, eliminating duplicate work and issues with merging changes. Stakeholders can also share designs internally and externally, soliciting feedback and moving the creative and technical processes along much more efficiently.

“We used Adobe XD in multiple aspects of the project, from wireframing, all the way to final design frames, and a series of post-launch updates. These were large multi-gesture touchscreens customers can interact with, and we were able to go from prototyping in XD to actual real-time web development quickly and seamlessly,” explains Taylor Brinkman, Senior Interactive Art Director for Leviathan. “We did our sketching in XD and then used the handoff features to ease the load on the development team.” The creative team was also able to move seamlessly between Photoshop and XD.

Clearly plan interactive elements

Verizon Connect also had an eye on creating an immersive, on-brand experience when it tapped Leviathan in 2018 to design its presence at the Latitude tech conference.

“For projects like these, we need to create storyboards that are easy to use and easy to pass around the team,” says Taylor. “From there, a lot of these elements become interactive with hints of UI here and there. So we storyboard a lot in XD, doing wireframe work within it. We’re also seeing new features in XD like blend modes that we can use to enhance our final deliverables.”

Working with Verizon and Adobe Creative Cloud applications, Leviathan created six bespoke demo stations to highlight Verizon Connect innovations in a virtual experience. Each digital diorama had interactive 3D stories and experiences that started at a touchscreen. Then, because Verizon was focused on generating sales leads, the experience transitioned directly to more information about existing product offerings.

Image source: Leviathan.

For this project, Leviathan needed to create storyboards that were easy to pass around the team and easy to update.

“We created a lot of artboards in XD and wireframed them,” explains Taylor. “The ability to be so quick with so many artboards in XD has been very helpful for us when it comes to staying organized — and to just wrap our minds around projects.

“Often, we get convoluted sketches for how screens should interact and what the varying requirements are, and it’s challenging to interpret. XD helps us overcome those hurdles so we can easily and quickly deliver the right experiences.”

Work faster and be more in sync

Adobe solutions — and, now, XD in particular — help Leviathan focus more on the high-impact work their clients expect, rather than getting trapped in the tedium and other back-end processes that come with creative design and development.

“The way that the Creative Cloud applications integrate definitely helps us with a lot of our projects,” adds Pedro Sanchez, Creative Director for Leviathan. “Being able to have some designers working in Photoshop and Illustrator, then sending work over to animators using After Effects and prototyping it all in XD, makes the creation process quick, easy, and collaborative.”

“Now, when we’re in the trenches, we have peace of mind that everything is going to work smoothly and quickly,” Taylor said. “Using XD we can work faster and ensure everyone is on the same page. Having that reliability and easy ability to collaborate is crucial.”

Learn more about how Adobe XD can help you prototype immersive, interactive experiences for your customers.