January 23, 2021
Responses by Savannah Wallace, director of digital experiences; Kody Dahl, creative director; Jordan Epperson, senior strategist; and Brett Bash, senior engineer, Whiteboard.
Background: “For more than 25 years, the Tennessee Aquarium has been a focal point in the revival of downtown Chattanooga. What sets the Tennessee Aquarium apart—beyond its iconic architecture and breathtaking wildlife—is its focused efforts in conservation and education,” says Savannah Wallace. “The aquarium’s desire to communicate this purpose made it necessary to reach beyond building an online tourist hub; we wanted to create a convicting narrative that highlighted its animals and told the story of the care, enrichment, conservatorship and education it intentionally provides.
“We wanted this online experience to give individuals, families and schools within the Chattanooga community as well as in the greater Southeast region a taste of the experience virtually, moving them to explore the beautiful facilities and enjoy the animals in person,” Wallace continues. “From planning your next aquarium conquest to ‘diving into’ its heartfelt articles on its magazine Riverwatch, the new Tennessee Aquarium site is delightful for visitors both near and far.”
Design core: “We began the design process for this site by underlining that, no matter what, the user had to come first. Every design decision had to start there,” says Kody Dahl. “It was immediately clear that this meant the visual language should focus on the animals; that is, after all, what people come to an aquarium for. That led us to create a media-led design system that emphasizes the aquarium’s beautiful photography, videography and livestreams—and steps into the background whenever needed.
“The site was designed from the beginning to feel like diving into an aquatic environment: fluid, splashy, organic—alive!” Dahl adds. “We created this impression compositionally through organic shapes, liberal use of white space and an eclectic, detail-driven type scale, as well as interactively through fluid page transitions, dimensional hover states and organic warp displacement. In essence, you’re putting on a mask and diving in!”
Challenges: “The harder part of this site—and our most consistent tension as a team while designing and building—was riding the line between story and utility; between a rich, immersive environment for exploration; and an ever-present pathway towards informed action,” Dahl explains. “Too expressive, and the audience interested in a purchase (and an actual visit) can’t find their way to tickets. Too sales oriented, and the audience exploring the site to learn about conservation or the nonprofit side of the aquarium could be pushed away just as easily. We built a flexible system, just in case we fell too far on one side or the other—but we’ll need a few months of post-pandemic data to be certain.”
Navigation structure: “We had a couple high-level heuristics that drove decision-making at the strategic and structural level,” says Jordan Epperson. “As it is expressed in the navigation structure, our aim was to find the middle ground between meeting client goals and keeping the user in mind. We needed to clearly position the Tennessee Aquarium as a leader in tourism, animal care and conservation. We also needed to optimize pathways for a wide array of user intents: from navigating to an educator event to purchasing tickets to browsing the library of animal content on the site. We wanted visiting users to feel immersed in a new world while maintaining clear ways for them to find what they need to plan a visit or take their next step with the aquarium as a volunteer or donor—a careful balance of narrative and usability.”
Technology: “The website was built in WordPress while harnessing powerful tools, such as Advanced Custom Fields Pro, Timber (for Twig integration), Bedrock and Lumberjack,” says Brett Bash. “This enables the WordPress CMS to have a modular, modern MVC framework structure similar to Laravel. The front end uses Vue.js for the JavaScript framework, GreenSock for animations and Tailwind CSS for all of the styling.”
