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.
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.
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.
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.
Despite many of the challenges being solved in the wireframe process the responsive pages still posed a challenge for our designers. In particular, gaining an understanding of the transition from mouse to touch is a critical issue in creating a quality user experience. Additionally, font sizes and readability are vastly different between mobile and desktop. Particular attention was put toward the article experience as that is where users will spend the majority of their time.
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.
The heart of any editorial site is the article experience and we designed the W Network to reflect that. The article page needed to be flexible and interesting while being easy to create and manage for the content team. We created various tools like quotes, product galleries, inline images, galleries, embedded shows and small details like drop caps and even a branded period.
While this new online portal was intended to be primarily a magazine, W Network is still first and foremost a TV channel. To reflect that we needed the experience of the show mini portals to be just as compelling as the full site’s experience. We designed these show pages to feel highly branded but also still within the W Network experience.
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.
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 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.
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.
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.
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 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.
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.