• Article

Case Study: Huffington Post—Reinventing the “Big News” Experience with IE9 Pinned Sites

Justin Garrett, Senior Product Manager, Internet Explorer

Summary

The Huffington Post is a leading social news and opinion site—"The Internet Newspaper." HuffPost covers it all—politics, media, business, entertainment, living, style, sustainable “green” living, world news, technology, nonprofits, college life, books, education, religion, travel, arts, food, and comedy, and it’s a top destination for news, blogs, and original content. The site reaches more than 26M unique visitors monthly.

HuffPost wants to serve their readers relevant and timely “Big News” and encourage engagement with comments and social posts. Taking advantage of Internet Explorer 9 and Windows 7 developer tools, HuffPost created an immersive, app-like web experience with new Pinned Site features:

The result was great for both readers and HuffPost’s business. Users that pinned the site…

  • Spent 49% more time on the site
  • Were 14% more likely to stay on site
  • Viewed 11% more pages

And that’s exactly what HuffPost was hoping for—more engagement.

HuffPost developers used these tools to keep readers coming back for more, by designing an always-active presence in users’ Windows 7 Taskbar, where IE9 share exceeding 20% worldwide and approaching 30% in the US. Paul Berry, CTO of Huffington Post, describes the approach they took in this video.

Want to do the same thing? It takes about a day to replicate the development work that HuffPost did. Go to BuildMyPinnedSite for ideas and code samples.  A simpler version (with most of the benefit) can be done in 15 minutes.

Links in this case study will take you directly to specific MSDN Pinned Sites sections, so you can dive deeper into the details and check out code samples and demos.

Situation:

One of the core principles of IE9 is putting sites at the center of the user’s experience. Users go to their browser to visit web sites, not for the browser itself. Developers should have the tools to build engaging user experiences—and the browser should get out of the way.

While much of the web today is static and content-focused, more and more sites are emerging that are interactive, personalized, and social. It’s clearly where the web is headed these days.

HuffPost realizes that success means getting their relevant and targeted local content to readers, and encouraging them to contribute themselves. It also means using the whole PC to stay in front of readers—not simply relying on a browser URL, search, or mobile apps.

Developers at HuffPost are busy. They’re focused on site content and functionality, so they don’t have time to explore every feature on every platform. Features they do consider must be simple. They must be high impact. And they must immediately enhance the user’s experience.

Here are the three criteria HuffPosts ranks features against, and some questions you should be asking yourself when considering new browser features.

1.       Customer Engagement

  • Does it reach the customer in a timely and relevant fashion?
  • Is it part of the customer’s everyday workflow?
  • Does it help the customer get to our content faster?
  • Does it take our customer deeper into the site experience?

2.       Customer Value

  • Does it inspire the customer to stay and interact longer?
  • Will it increase the opportunity for our customer to engage with ads and premium experiences?
  • Is it “cutting edge” and “must have” for the customer?
  • Does it enhance the everyday experience?
  • Does it build loyalty and brand value?

3.       Engineering Values

  • Is it simple and sustainable from a development perspective?
  • Does it build on a credible, long-term platform with a mature customer base?
  • Does it sync with the mission and values of the business?
  • Bottom line—is it is profitable to use on a given project?

HuffPost wanted their web experience to feel more like an app.  Social engagement was also a priority. When readers are engaged, they visit more often, go deeper into the site, and stay longer.

They evaluated Internet Explorer 9 Pinned Sites features to see how the features would affect customer engagement and value. Right away, they were pleased with the “quick win” and “immersive” potential.

Ease of implementation, standards, performance, and sustainability were must-haves, because platforms—along with 3rd party APIs for social integration and mobile devices—continue to consume their limited development bandwidth.

Solution:

Simple to learn, simple to develop.

Devs learned about IE9 Pinned Site implementation through the MSDN IE9 Code Samples Library and IETestDrive Pinned Sites, which included easy-to-follow scenarios with “show code” pop-ups.

IE9’s Pinned Site APIs and Built-In F12 Developer Tools were also very useful.

Like many online news sites, HuffPost primarily uses JavaScript in publishing news from their Content Management system. That made JavaScript-based Pinned Sites features easy to add and test into the existing system with almost no custom code.

The hard part was determining what content to serve and when to serve it. They decided to showcase their Big News sections because it’s what sets them apart from competitive news sites.

The end-to-end effort? 3 days to go-live.

  • Design = 2 Days, shared across Marketing, Editors, and Product Planning
  • Development = 1 Day, 1 Developer to build, test, and deploy

HuffPost in IE9 is a clean, branded experience that puts content and interactivity in the focus. Pinned Site features are designed to increase customer engagement through Windows 7, outside thebrowser.

A DEEPER LOOK AT HUFFINGTON POST IN IE9

Drilling into the experience, here is what HuffPost did to reinvent their site in just 1 Day, with 1 Developer:

Step 1: Map to your current brand look and feel.

HuffPost defined the navigation button colors, home page, window size, and tool tips using pinned site metadata. IE9 does the rest.

Step 2: Let your users know. Then remind them! 

HuffPost wants readers using IE9 to pin their site. The site automatically checks when users have not yet pinned it, and prompts them to drag the tab to pin. All done with just15 lines of code. Users can now drag the tab to the Taskbar and start the Pinned Site experience.

Step 3: HuffPost on every taskbar.

HuffPost wanted a brand experience that looked “clean and shiny” like an everyday part of their users’ experience. They designed 5 Favicons in X-Icon Editor with the colors associated with each news section.

Readers can simply pin their favorite section directly to their taskbar to jump back into the HuffPost experience with a single click.

Step 4: Bring them back again and again!

News changes by the minute. When big news hits, readers need to know. HuffPost wants to make sure that their readers are the first. Notifications are a great way to unobtrusively alert readers to breaking news without disruptive noise or unnecessary emails. Custom Icon Overlay and Toolbar Flash capture users’ attention directly on the Taskbar.

Step 5: Go deeper with jump lists.

Readers are delighted when they discover new content, and HuffPost wants to encourage exploring the site.

Dynamic Jump Lists contain “hot” keywords like celebrity names, political opinion, or entertainment buzz, making it easier for readers to stumble on news that’s interesting. Each Jump List is personalized by news section and updates every 15 minutes.

Users can right-click the pinned site to see a fresh Jump List. How easy is that?!?

Step 6: Go social with thumbnail toolbar.

It seems small and simple, but it makes a big difference. One-click Thumbnail Toolbars on their Taskbar make it easy to“Like” and “tweet” stories. Users can then easily share stories with their friends, which in turn gives HuffPost’s content an even bigger audience.

Summary & Next Steps

HuffPost measures success in terms of Customer Value against their Cost to Code. A small development investment—1 Day, 1 Developer—to create an immersive reader experience really paid off.

Developing for IE9 is straightforward, especially when your goal is to deliver great content directly to your customers. Unlocking the potential of Windows 7 and IE9 keeps your focus where it should be—on the content, and ultimately, on your customers.

Huffington Post’s Success Metrics—exceeded!

HuffPost is thrilled with how a little effort (1 Day, 1 Developer) paid off on their readership goals:

Users that pinned the site…

  • Spent 49% more time on the site
  • Were 14% more likely to stay on site
  • Viewed 11% more pages

Site experience benefits:

  • Created a personalized experience by letting users pin the news content they want with one-click access
  • Increased user engagement through notification, pulling users back into their “Big News”
  • Was low cost to code and easy to sustain using existing technologies like JavaScript

 Ready to go? Learn how to do what they did.

See it in action!

Check out the Huffington Post in IE9. There are loads of resources for developers, including code samples, technical docs, APIs, and more below:

Easy clicks! Links referenced in this case study: