W Network is a national television channel with programing for, by, and about women. W Network creates compelling lifestyle and entertainment programming as well as featuring popular movies. W Network is a part of Corus Entertainment which is one of Canada’s largest media companies. It operates over 35 radio stations, 20 TV channels, and engages millions of Canadians every day. As audience engagement continues to move online, the W Network wanted to follow suit. The plan was to create a platform to feature editorial content aimed at their target audience. This portal would become a best-in-class online magazine that lived up to the high quality standards of the W Network TV experience. The portal would also be a home for information about their shows and a strategy to encourage users to discover new content to tune into.

Project Goals

  • Great editorial experience

    W Network did not simply want an online magazine, they wanted to create the leading online destination for Canadian women. Our goal was to create compelling article layouts and a bold aesthetic that would instantly become recognizable as the new and improved W Network.

  • Modern responsive design

    Many of W Network's readers were beginning to come from mobile and tablet devices and this trend was increasing. We planned to design the W Network site to be fully responsive and to provide a powerful experience for all platforms.

  • Encourage tune in

    By tailoring the content creation to match the programming, we had an opportunity to attract readers to the site with editorial then subsequently convert them to watch the corresponding shows. We planned to accomplish this by creating tools for associating content with shows and featuring these shows prominently within each article.

  • Modern advertising

    Like many editorial sites, W Network sells advertising against their content. One of the projects primary goals was to create more compelling ad units for advertisers while anticipating and maintaining standards and trends.

The Team

Bogdan

Interface Developer

Dave

Software Developer

Adam

Interface Designer

Scott

Product Manager

Strategy & UX

Like many of our projects we start with a thorough understanding of the base requirements and often use a sitemap as an integral tool. We worked closely with W Network to identify the content categories they desired along with the best strategy for organizing show information. Finally we established preliminary ideas for different article types as well as simple information and company pages.

Our project document outlines key goals, features & timelines

Once we’ve gained a general understanding of the project from a sitemap level we move to identifying the key functionality throughout the site. We use a feature matrix that includes the features, complexity and value as these metrics help us in early discussions with the client. While we often do an in-depth study of features this does not prevent us from proposing changes as we develop and discover new ideas or better methods.

Wireframes

The key challenge of the W Network project would be to create compelling layouts that would be fully responsive and our early energy focused on establishing goals for each platform. Once we had a good idea of the key features we began creating wireframes that would allow us to quickly visualize the site at different sizes. During this process we worked closely with the advertising team at W to establish a new strategy and adopt new ad types. Once the wireframes had captured all the requirements we began the design process.

Design

Working with the W Network brand was not straightforward. Digital brand guidelines didn’t exist so the only reference was an on-air style guide and we worked closely with the brand team to discuss how best to translate it. The challenge was that the W Network changed their on-air style every season and often took very different approaches in the user experience and design language. A few things stayed consistent: a sense of sophistication and the use of the W orange color, both of which we adopted in our design. Our solution to this problem was to create a site that had a very minimal interface and was driven by the content as much as possible. This way the site would naturally change with the content, thus maintaining the on-air art direction.

Header

Keeping a the header of a site simple is an important way to improve the UX of a site. We kept the header simple by using fly-out menus to hide the social and newsletter functions.

Encourage Tune-in

One of the most important goals for the W Network was to encourage users to watch their shows. We created a system that associated shows with relevant articles allowing for discovery of W programming.

Advertising

Not only did we want to adopt modern ad unit sizes but we needed to develop a strategy for advertising on different devices and for different screen sizes. Many of the ads that were on the existing W Network site were flash-based and transitioning away from that was important as they would not function on most mobile devices. We also explored the up and coming popular ad units to find what we believed would become the next standards. Finally, we needed a strategy for falling back to more common ad units as these would make up a large portion of the W Network's ad inventory.

Technology

With any magazine site there is a need for a powerful CMS that is also very easy for content teams to use. As the W Network is very familiar with Drupal, we all agreed that this would be the best direction. While Drupal took care of the basics, there were still many custom modules that needed to be created and like working with any CMS, we needed to do a lot of tweaking.

Ad units

Responsive sites are now common across the web, but their content is often organized in the same linear sequence for all layouts. However, on the W Network site, items that appear at the top of the page on desktop may have to be near the footer on mobile, and vice versa. We achieved this through a combination of intricate CSS, creative floating of block elements, and sometimes duplicate markup which remains hidden for all but one layout.

Responsive

Responsive ads presented another challenge. If we embed multiple sizes of the same ad, and hide all but one with CSS, the ad network receives multiple impressions. The solution was to save the browser width in a cookie and pass it to the server, which only prints one embed tag. We created opportunities for modern ad units while allowing fallbacks to more standard sizes. In this way the site managed to be responsive with many different ad types and sizes.

Analytics

We strongly believe in incorporating powerful analytics into everything we build. The W Network agreed but decided to take it one step further. They asked us to implement four separate products. We worked with Comscore, Google Analytics, Omniture and Chart Beat. These tools would be used by different teams within Corus and the W Network and we coordinated with each team to adjust each tool to their specific use case.

Scheduling

One of the largest aspects of the build was the integration with the W Network content schedule API. We had designed the site to feature shows and movies prominently, and we wanted those shows to be updated automatically and to display air times. We accomplished this with the W Network schedule API. Unfortunately this tool was anything but straightforward and required a great deal of work on both sides to get it up to standard.

CMS

The W Network site was built on Drupal as that was the CMS that Corus was most familiar with. While Drupal is a powerful tool it can often be a Swiss army knife when all you need is a can opener. This behemoth of a system necessitates keeping the code simple, clean and minimizing hacks in order to build a stable platform. We had to heavily customize Drupal by using both plugins and custom code to power the flexibility desired for the W Network platform.

Emails

Emails were a big part of the new project as the W Network wanted to connect with their users frequently about articles, recipes, shows and contests. We built a series of email templates that would all be flexible enough to accomodate any type of content created by the W team. Using the Drupal CMS we allowed for the creation of these custom emails through a simple editor tool that would auto-format site content. They could then send these emails using their existing email platform Lyris.

Conclusion

As user attention continues to move online, many traditional media outlets will need to adapt to stay relevant. This is never easy as existing infrastructure, expertise, and revenue is all in the traditional medium. That is why these media companies will need to look to digital agencies to help make sense of the opportunities. What we have built with the W Network is simply a first step in that direction and we hope to continue to help them take full advantage of an online audience.