Anything and everything becomes a story on Target’s site for Newfoundland and Labrador Tourism.
Responses by Ryan Strickland, digital design lead, and Dave Sullivan, creative group head and writer, Target.
Background: Tall, True and Tangled is part of a storytelling campaign for Newfoundland and Labrador Tourism that launched with a 90-second TV spot called “A Tangled Tale.” The campaign showcases the province’s ability to weave a story from just about anything. Tall, True and Tangled is a storytelling hub where people can come and explore the many stories of this place. Our audience, many of whom are over 45 and well read, are seeking authentic experiences that go well beyond traditional sightseeing. We want potential travelers to know that out here, you’ll hear stories. And they’re all true—especially the bits we make up.
Design core: The design for this Netflix-like content hub borrows visual inspiration from travel guides and Google Maps. It launched with an animated version of the custom campaign logo, built entirely with SVG paths and CSS transitions. As you scroll, it unveils a path—representing the rugged coastline of Newfoundland and Labrador—that guides you from tale to tangled tale. The content pages tell the province’s stories through video, audio and long-form written tales. Each story page uses colors automatically generated from its cover image using Vibrant.js—a JavaScript port of Android’s Palette API. This gives each piece of content a custom appearance, although a few colors were tweaked by hand. After all, Newfoundland and Labrador is a colorful place.
Challenges: Curating a site of this size was definitely a big undertaking. Putting all of that content together—from the stories to the imagery to the themes to the descriptions—there were a lot of moving parts. Using this much SVG animation and testing them on a variety of screen sizes and browsers was a process as well. All for the sake of sharing an abundance of stories with our audience. We’ll never watch Netflix the same way again, that’s for sure.
Navigation structure: The homepage uses carousels of content that would be familiar to anyone who’s navigated streaming sites like YouTube and Spotify. The travel path guides visitors from theme to theme, encouraging them to keep exploring. Each tale contains large navigation buttons that sit at the bottom of each tale, enabling users to easily transition between stories.
Technology: Tall, True and Tangled houses a lot of images and video and receives a lot of mobile traffic, so we needed to make sure that it was a speedy experience for those that land on the site. To optimize page performance as much as possible, we created the site as a single-page app—built on React—and leveraged Next.js for server-side rendering. All video assets are hosted on Amazon Web Services and used HTTP Live Streaming. This allowed for a Netflix-style video stream adjustment to maximize video quality and minimize loading times on slow connections. So no matter your internet speed, you’re able to find a tale or two to pass the time.
