How Seattle’s KCTS 9 built an interactive website about the sharks of Puget Sound
Did you know that sixgill sharks, which usually keep to the dark, open ocean, are roaming Seattle’s Puget Sound? Last summer, independent filmmaker Michael Werner teamed up with Seattle public television station KCTS 9 to produce a documentary, “Searching for the Mystery Sharks of Seattle,” on the elusive sharks that scientists have been tracking for years.
To amplify the story and its reach beyond a television audience, KCTS 9 built an interactive website that wove in photography and illustrations as well as charts and maps plotting the depth, time and GPS coordinates of several sixgill sharks. The documentary recently won a 2017 Edward R. Murrow award. Storybench spoke with Patty Lindley, digital director at KCTS 9, and Joseph Liu, a journalist and developer at the station, about how KCTS 9’s digital team operates.
How did the shark project get started?
Lindley: The genesis of it comes from a conversation with the aquarium here in Seattle. Our former boss had a chance to meet some researchers at the aquarium and back into this crazy idea that there were these rather large sharks lolling about Puget Sound. There was a mystery about why these sharks were there and years of researchers diving there. Making an hour-long documentary came out of that conversation. Michael [Werner] was our go-to guy for the project and he got contracted on independently to work on the documentary. [More behind the scenes from Werner here.]
How was the site built?
Liu: They came to me with an overarching idea about what data would be available and what the narrative would be. Along with text, audio and video, we created a shark tracking map. We wanted to have a very strong multimedia feel. At the beginning we went with a pre-rolling video that really sets the tone. It’s very scene-setting. It’s a shark coming out of the blue. It’s murky. Mysterious.
Two-thirds of the way down we have a shark tracker map. The scientists tag the sharks and those devices send pings of GPS coordinates, time and depth of the sharks. Based off of that we created the map. The tools I used were Leaflet and HighCharts. They’re free and require some basic Javascript. D3 is amazing but I find HighCharts easier to work with because it’s prepackaged. To store the shark tracking data, I created a simple JSON file that sits on the server. Leaflet and HighCharts are both connected to that JSON.
What CMS do you use?
Liu: We use Drupal 7. You can put Javascript, PHP and CSS directly into the body of your content. We have a page builder that gives us a full-width template that allows us to drop whatever we want on the page. You can code directly onto the page, so you have to know what you’re doing.
How does your digital team work?
Lindley: We’re a digital team and we sit within the newsroom at KCTS. As they work on stories, we’re part of the conversation in the early rounds. We’re asking, “What would make this an interesting multimedia story?” Joe is really our principal interactive developer. We’re constantly steeped in great, interesting stories that are being developed. We, as a team, try to aid and abet that process and try to find interesting, additive ways to support those stories.
“We, as a team, try to aid and abet that process and try to find interesting, additive ways to support those stories.”
Not every project gets a bear-hug approach. But when our team is really invested in a project, there’s ways we can really pedestal that work in interesting ways and make it a little bit interesting and engaging. For the shark story, Michael was avid about meeting with us early and often to talk about what elements to bring to bear on the interactive experience. Certainly in public media that embarrassment of riches is not always available.
What is KCTS9’s digital philosophy? How many are on the digital team?
Lindley: In 2013, Rob Dunlop, KCTS 9’s interim CEO, really shaped a strategic vision that said there’s an imperative to figure out how to bring public media forward and use all the digital platforms available to distribute our content. When I landed here [in 2015], the conditions were set well for me to say, “For us really to do this, we have to invest as a station in capable people who know how to do this stuff.” We added a senior web developer with Drupal experience. We hired someone with publishing and web editorial expertise. And we hired a graphic designer. We wanted to make sure that when rebuilding and relaunching our website, we’d have the people in place to do this work.
Tell us about that website redesign. What was the priority?
Lindley: We’re really trying to satisfy two principles with our website: How do we show our relevance with beautifully-produced media but also make sure people that really love our TV can find it and hopefully watch it on the website. Our website is not just about watching Masterpiece Endeavor or Call the Midwife, it’s about our great science and environmental reporting and local stories.
PBS has a video platform called Cove. They station-brand a version of it for all member stations. When we redesigned our site, we wanted to use the Cove API to pull content into our own domain. But we also wanted our website to be about our local storytelling and local programming.
Where do you see public and local TV moving in the digital space?
Lindley: We go to this annual PBS meeting called TechCon. There’s a little bit of this panic attack that you can feel of people trying to get their digital strategy squared away.
I think within public media, some of the most interesting things I’ve seen have come out of a documentary space. There are a lot of interesting interactive documentaries being produced. Sometimes it’s just easier to do something novel with a cool and lovingly created piece of media. That is a benefit of the metabolism of public television. We get to do these pensive, deep explorations of topics and really give them a full life-span. We’re uniquely positioned to do novel things in public media. We’re not chasing ambulances. We have that different mandate to create content that inspires a smarter world.
Can you tell us about an interactive documentary KCTS 9 has produced.
Lindley: Battle Ready, a story about the military’s environmental legacy in the Northwest, was an EarthFix project that went from being one story to multiple stories. It had great photography, great archival material, and great data that could be used in interesting ways. We decided to build a custom digital documentary platform. It was a nifty way to bring some sort of user-controlled way to move between these stories that weren’t necessarily linear. EarthFix provided all the infographics and content. We’re lucky to be on the receiving end of this beautiful content.
Liu: Battle Ready was a much bigger, long-term project. The idea was to create an interactive documentary website. We also created it as a mobile-first experience. You have a video wrapped inside a designer site. As you watch the video, you can interact with markers on the bottom that pull forward ancillary, related material. This was all built in HTML5. I took a JSON file, marked off the timecodes for when we wanted the segments to show up. These were additional elements that you couldn’t get on TV.
Speaking of digital projects, if I may, I’d also point you to some of our Wildlife Detectives pieces like Elk Runner, which I gamified to make look like a Mario Brothers game.
Hard to believe that Battle Ready was a project built by a local TV station. It really cuts against the grain.
Lindley: There’s certainly within public TV this idea that TV is first. But Battle Ready was conceived to be an interesting digital project first. It was launched in December and then the TV doc was released the following February. It really split the traditional public TV model of engineering a big documentary for TV. That was actually an afterthought.
