New platforms, new commercial conditions and new user behavior. These were all factors that were making the site TV4.se outlive its usefulness. TV4 approached us in order to define an entirely new digital presence.

“We need your creative process.”

Tommy Jarnemark, Head of Business at TV4 Digital Media

The objectives of the new TV4.se were to:

  • create, enable and capitalize on viewers’ commitment,
  • be accessible from computers, smartphones and tablet devices,
  • be open to innovative advertising opportunities, and
  • increase the stock of video commercials, particularly through clip consumption.

And the vision was clear:

“TV4.se should become Sweden’s best website!”

Sandra Brundell, Chief Editor at TV4.se

There were many question marks. We began by creating a foundation on which the concept could stand.

Strategy

The TV industry is a business characterized by intense competition. What could we do to help TV4 stand out?

The Daytona team had read about and personally experienced new user behaviors. We would sit with our smartphones in front of the TV, following twitter feeds about Melodifestivalen (the Swedish qualifier to the Eurovision Song Contest) and Agenda (a current affairs show), and realized this was a new and interesting phenomenon. But what was the true nature of this behavior? Which shows were various viewers committed to? What was the nature of this commitment and how widespread was it? And how could TV4’s advertising business benefit from this? These were some of the questions we needed to answer.

In our strategy work, we examined:

  • Emerging change in viewer behavior
  • TV4’s commercial conditions
  • External trends
Daytona’s digital strategy model features three research focus areas

Diving deep into the current status

Since the framework for the transformation of TV4.se was still rather undefined, we decided to conduct a survey covering a wide range of issues. Consequently, our research used a broad spectrum of qualitative and quantitative surveying methods.

Capturing needs, behavior and expectations

One of the most important insights was that viewer commitment was highly show-specific. The audience watching the talent show Idol had entirely different needs than those who watched Solsidan (a popular Swedish comedy series).

Nevertheless, we were able to identify several emerging changes in viewer behavior, the new commercial playing field and external trends. Our observations included:

New commercial opportunities

The digital advertising formats were undergoing rapid development, particularly when it came to animated solutions. Native advertising and t-commerce were just two examples. In a responsive environment, TV4.se should be able to capitalize on new opportunities arising from such developments.

Commitment lifecycle

Viewer interest followed a clear pattern of loyalty to scheduled shows. TV4.se should reflect this interest pattern by supporting different types of behavior at different times of the day and different days of the week.

User types

Different viewers had different needs and behavior. We shortlisted our customer insights into four user types that we catered to in our design work. This proved very helpful when time came to prioritize certain content and functions. Identifying the user types was also helpful to the editorial staff when it came to the site’s content management.

Relationship to TV4 Play

Our user surveys confirmed the picture indicated by foreign reports: second-screen behavior was prevalent in Sweden too. It was clear that TV4.se should be a platform for forward-leaning interaction and commitment—while TV4 Play should be the venue for watching television.

Structure for simple navigation

Using a simple side-structure, we allowed viewers to navigate the site in different ways: through schedule, alphabetical listing or search.

Modular architecture

Based on the viewers’ respective needs, we created a system through which we could classify TV4’s different shows. There were many common denominators, as well as major differences. The service had to be modular in order to adapt to the different software platforms.

Design

How we made the complex simple.

Our design solution had to resolve a number of important issues. For instance, the service must:

  1. Be extremely comprehensive, with views for each sho and each episode transmitted on any of TV4’s (at present) 11 channels.
  2. Have a framework needed sufficiently flexible to allow for the content and functions to be adapted to various software formats.
  3. Display advertising in a satisfactory manner – the challenge here was to make it all work in a responsive environment, despite fixed-size banner advertising

Ensure the best customer experience

We used an iterative and user-centric process, focused on the needs of our different user categories and tested our designs on real-life users. We also divided the design work into steps and began by creating the service’s most important view: the landing page presenting all the shows. Our plan was to implement this well and create momentum for the rest of the service.

Insights

User results were analyzed, resulting in new insights and methods for resolving problems and creating new solutions.

Prototype

We design a prototype based on what we know. At the onset of the project, the prototype comprised some simple sketches on paper, but the level of detail gradually increased and by the end of the project, the prototype consisted of complete interface scripts.

Testing

The design prototype was thoroughly tested on real-life users.

This is how our work with TV4.se was conducted
TV4.se has a simple structure and is based on a data structure rather than a page structure.

Domain-based architecture

Viewer interest was naturally closely associated with themes that characterize the world of television: shows, individuals and subjects (such as cookery and sports). Inspired by major media sites such as the Guardian, the New York Times and particularly the BBC, we structured the service based on these objects, rather than on pages, article streams or other more traditional niches. There were many advantages to this approach and we could write an entire essay about it – but others have already others have already done this.

In addition, we supplied four different methods of navigation

  • based on schedule – which, as we observed in our strategy work, was motivated by viewer-interest levels
  • based on alphabetical order – for those who know what they’re looking for
  • based on search – also for those who know what they’re looking for
  • contextual – particularly to increase serendipity

Layout with prototypes

The first thing we did was to decide on a basic layout and guidelines directing the flow of content and functions depending on screen sizes. To test the functionality of the framework, we developed a simple, clickable prototype in HTML.

Basic layout

Although major portions of the service were specific to the certain shows, there were many functions that needed to be available throughout the service. We set up guidelines for their respective placement.

HTML prototype

Using a simple prototype, we were able to explore various routes to a functional responsive framework. The efforts to guarantee the site’s flexibility were particularly challenging due to the fixed advertising template sizes we had to adhere to.

The key to success

Although the service was to be modularly built to support various types of platforms, there were also considerable common denominators that were applicable to all the platforms. And there were numerous functions that belonged to the service’s framework.

Show guide of paramount importance

It is natural for design work to build on the core of a service and to move outward from there. At TV4.se, the show guide was of paramount importance. It was the place to which TV4 wanted to direct viewers (for the sake of advertisement sales) and it was where we could best capture viewer commitment. Consequently, we chose to begin with this view.

From there, we designed the service’s other pages through an iterative process.

How we arrived at a visual design

When we began working, we knew that the site design should highlight both content and ads. Furthermore, the design solution had to allow for individual shows to take up more space. In turn, those show individual show all had their own design elements.

To find our way and obtain a shared vision of the visual concept that we needed to create, we conducted a series of exercises with the product owners and TV4’s Head of Branding.

What experience should the design convey? The slider control was one of the exercises we conducted.

Two styles

Based on the slider control, we created two different drafts for the style. Although they appear to be fairly similar on the surface, the rendering was distinctly different.

The style we ultimately settled on was a combination of the two drafts.

For a uniform expression, we setup a library of graphic components at an early stage.

The component library

The end result was a design that flexibly adapted itself to suit the viewer’s technical conditions. The service is built on three layout renderings: one for the desktop, one for tablet devices and one for smartphones.

Click on the image to zoom.

Home page
Show guide (desktop)
Show guide (tablet device)
Show guide (smartphone)
Clip heaven (tablet device)

Second-screen experience

In 2013, we created a second-screen rendering together with TV4, in the form of a single-page responsive Internet application. The left menu comprises six apps. Additional apps may be created and added depending on the software platform used.

Events

This app contains a stream of selected content such as polls, votes, slide shows, etc.

Twitter

Editorially selected tweets about the show from viewers and show participants.

Images

Behind-the-scenes images from Instagram.

Chat

Real-time chat for viewers.

Voting

Information on how to cast a vote during the show.

Live viewing

Linear TV broadcasts.

The outcome

Sweden’s best website

The pilot launch covered the 2012 Hockey World Championship. The full service was launched in June the same year. Since, the consumption of video clips has increased steadily, resulting in record revenues from animated ads.

TV4.se also won the InternetWorld’s Top 100 in 2012, winning both the entertainment and overall categories. Thus, we officially succeeded in achieving our project’s vision of creating Sweden’s best website.

“Over the past few years, Daytona has played a significant and vital role in TV4’s journey towards digital platforms. Daytona has jointly developed concepts and designs for our digital television services, and helped us in making daring and wise decisions, while consistently keeping the viewer in focus.”

Cecilia Beck-Friis, Deputy CEO, TV4

position #2 Top 100 in 2011

“TV4 is an expert at linking television content with web content. /.../ [TV4] establishes a presence that matches and occasionally exceeds their ambitions and offering of scheduled shows.”

Winner of Top 100 2012

“In a sector characterized by radical changes arising from digitization, one operator is now shining brighter than the others.”

Three questions to Rasmus Sellberg, Strategist

What were the key success factors?

— In addition to our close collaboration with TV4, I want to highlight the meticulous user surveys we conducted at the preliminary strategy phase of the project. We truly familiarized ourselves with the viewers and their needs.

What should have been done differently?

— This was one of our very first responsive projects and we learned a great deal. In hindsight, we should have hastened our scripting process – the design stage was slightly too static.

What are you most proud of?

— That we succeeded in creating a service that essentially lived up to all the objectives. We increased our stock of animated ads and defeated our arch-rival, SVT in the Top 100 list.

Rasmus Sellberg, Strategist

Roles in the project

  • Strategy, concept & design: Daytona
  • Web development: TV4, Daytona and Fleecelabs

Do you want to know more about the project or how we work?

Contact Martin Ragnevad, CEO.
martin.ragnevad@daytona.se