INNOVATION DRIVES AN ENGAGING EXPERIENCE ONLINE FOR THE NATIONAL GEOGRAPHIC CHANNEL.

Think of the future of the web: What will the next generation of websites look like? As sites become more seamless and immersive, the paradigm of thinking about content in terms of “pages” is changing. The latest incarnation of Natgeochannel.com provides an example of what’s to come, taking cues from the broadcast experience and blurring the lines between information and entertainment.

The media-rich channel home page effectively features the National Geographic line up of TV shows and provides a brand transition between the TV channel and magazine sites.

Seven years ago, National Geographic extended its brand into the U.S. broadcast arena, creating a channel that combines unique information, high quality production and entertainment value. As a result, popular shows like The Dog Whisperer have built a loyal fan following. The channel’s companion website, then 5 years old, was behind the times in technology, though, and did not represent the brand as a visual, photo-centric experience. Tedious site updates were compounding navigation and usability issues. And although the channel site has original content, it’s also part of the overall brand, and thus needed to become a companion to the National Geographic magazine and its site. The site’s redesign was engineered to address all of these issues.

MATCHING NEEDS TO CAPABILITIES
At the start of the project, the National Geographic team knew they would need to discard preconceived notions of how the site had worked in the past. Brad Dancer, senior VP of digital media and research at National Geographic Channel, explains a critical consideration: “There are different considerations when you move from an editorial model to one that is image-based.” And the new site needed to find the right balance between structure and flexibility to feature individual show content within a cohesive whole.

Chris Fahey, partner and user experience director at interactive design firm Behavior, grew up reading National Geographic and, like many of us, had fond childhood memories of the brand’s ability to spark intellectual curiosity. So when Behavior was asked to redesign the site with a new creative vision to meet overarching strategic needs, he knew it would be a good fit with Behavior’s culture and technical capabilities.

A new database structure puts access to shows that fit a particular viewer’s interest just one click away at all times. At the channel guide, you can choose to visibly tag shows following a theme, and each theme has an overview page to point you to specific shows.

To get started, Behavior needed to understand the brand and how people watch nonfiction television. They discovered there are two basic types of viewers: those who are simply curious about what’s on, and those who are fans of the channel or a particular show. For the first type, Behavior’s goal was to raise awareness, and for the second, to keep them fully engaged with the site. Addi­tionally, Behavior had to consider how viewers might be accessing the site before, during and after the TV shows. All of these dimensions factored into the strategy for the online channel guide, as well as work in progress on a new community area. Regardless of viewer type, the overall need was to get audiences excited about National Geographic shows through their online experiences.

A SITE THAT “LEANS BACK A LITTLE”
Fahey describes the typical online experience as one where the user “leans forward”—web visitors lean forward, crouched over their keyboards, reading information. Watching television, on the other hand, is a more passive experience: You can “lean back” in your recliner and be entertained by the visuals coming across your screen. The designers’ approach to the new National Geographic Channel website was to create a user experience that blends the experiences of web and TV. Fahey calls this fusion a “lean back a little” approach—he wants the user to get great information, but be a little more relaxed with the experience.

For the new site, both design and technology would have to contribute to a more entertaining online experience. Behav­ior used AJAX interactions to avoid some page refreshes and make the transitions between content more “TV-like.” From a design standpoint, as you move deeper into the site, you lose the “inverted-L” framework and get more of an immersive experience.

While the structure of each show page is template-driven, the design can be customized to reflect an individual identity for each show. For shows without an established look and feel, even the standard template works well, with a clean layout and full use of the screen.

TECHNOLOGY THAT WORKS
At the new site, technology is almost transparent to the user; the content grabs and holds attention because the technology is implemented so effectively. It’s a bit like great special effects in a movie—the best effects are the ones that support the experience without stealing the show. The site just “works”—without the user really thinking about it. A few personal observations: For starters, the fact that the site detects my time zone and displays information appropriate to me is incredibly useful: no more mental calculations on how many hours to add or subtract to determine a show’s time. This can even be adjusted with a pull-down selector at top right, to shift the time zone if needed. When viewing the Flash-based channel guide, the first thing you notice is the speed. Quick-loading and simple to navigate from show to show, the guide offers easy browsing. Want to see a different hour or day? Just click-and-hold the mouse and start dragging around. The guide instantly loads everything in the viewable window. Additionally, pull-downs for “themes” or show titles make it simple to find what you’re particularly interested in.

The guide invites user participation with large thumbnail graphics and a clean grid. Visually, the show’s thumbnails span the allotted time. For example, the visuals for a two-hour show are twice as wide as for a one-hour show, an attribute that gives visual prom­inence to features. Clicking on a show quickly layers in a preview window with basic information and a link to the complete show site, if available. Once on a show, the AJAX tabs let you flip between photos, videos and more without waiting for a page refresh. This effect, as Fahey points out, was a technical challenge, but the goal was to elevate the experience to one that mimics the seamless nature of television without breaking the conventions of the web.

The channel guide has large thumbnails and a clean grid that highlights the length of each show. Clicking “more” cleverly deploys a yellow rectangle to highlight a show and provide details using an inline preview window so you don’t have to leave the main guide page.

Search engine optimization on a site like this is extremely important and was a large consideration in development. The site is highly searchable—not just the overview pages but every page in the site. Behavior overcame the challenges of book marking by implementing code that refreshes a page’s title and browser history in the sections where AJAX is used. This is quite an accomplishment, since AJAX is typically not bookmark-friendly. Useful for search engines as well as fans that want to bookmark their favorite shows, this attention to detail aids the overall site experience.

On the maintenance side, the goal was to move from a completely manual update process to an automated process; achieving that goal required careful upfront planning. Now all photos and videos on the online schedule grid are automatically updated from an internal scheduling database. One downside is that the “Print Week” feature loses all of the visualization of the grid—but it’s still helpful as a quick reference when needed. The site also has options for mobile phone reminders. It’s possible that future visitors will be able to subscribe to aspects of the schedule, or even customize their own. With the database platform now in place, these types of far-reaching options are open for contemplation.

SUCCESS ON ALL FRONTS
Since the site’s launch in April 2008, Dancer says the overall site has seen a 20 percent increase in unique visitors. Traffic to the online schedule has almost doubled, demonstrating the usefulness of its visual system. Each visitor is spending an average of three minutes on the site—an all-time high compared with the previous site. And the new site’s increased traffic has not gone unnoticed by National Geographic’s advertisers, who are now showing more interest in online buys.

More telling have been the internal successes. Executive producers are much happier now that the web team can work closely with them to customize the look and content for each show. With the template system in place, the focus is on pushing the creative instead of pushing content. Additionally, the new schedule automation system frees the team to work on “fun” technology instead of manual updates. One example: National Geographic is working on including more videos and integrating more movement into the site.

Since everything from workflow to content management was changed, the redesign was a total paradigm shift for Dancer’s team. “We went from being site updaters to publishers. It’s very freeing,” he reports. The site will continue to grow with a renewed focus on improving stories with even better content. A new community area should be completed by the time this article is published. With the right technology, processes and creative ideas in place, there is no doubt the innovations will continue.