A new digital home for Svenska Dagbladet

We are happy to announce the release of a project that we have been working on for the past year: the online redesign of the Swedish daily newspaper Svenska Dagbladet (SvD).

SvD is one of Sweden’s highest circulating morning newspapers with a history of publishing that spans more than 130 years. A trusted news source and a brand with a look, a feel, and a voice that many readers have come to rely on.

We have been working with SvD on a few different projects the past few years and were honoured to be given the opportunity to work with them again. This time they asked us to help them reshape their digital presence from the ground up with a completely new design and an entirely new technical platform. We have worked in tight collaboration with the talented teams at SvD, led by project manager Ola Henriksson.

One Identity, One Product, One Website

Before the redesign Svenska Dagbladet had a few different sites, mainly svd.se, nliv.se and their corresponding mobile versions. They also had a customer site for their marketing pages and customer service. Each of these had their own design and their own navigation. This resulted in an incoherent experience for customers while browsing and reading.

We structured and designed the new site to accommodate all of these needs into one coherent experience regardless if you’re catching up on the latest news, reading a business analysis or managing your subscription.

“Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design, Responsive Web Design is web design, done right.” — Andrew Clark

People are rapidly switching to mobile to consume their news. But they don’t stay on their phones; during the course of the day they switch back and forth between their smartphone, desktop and tablet. Providing an experience that works across different devices and platforms is essential.

A new publishing platform and editorial workflow

Behind the scenes the project involved moving to an entirely new technical platform built on top of Schibsted Media Platform. For the last couple of years we have been working with Schibsted on the design and development of the new publishing platform that improves the discovery, writing and curation experience for editors and journalists.

“Smart organisations recognise that the Content Management System is their business.” — Karen McGrane

One of the traditional characteristics of daily newsprint is the amount of decision-making involved in the manual layout of pages. This mindset has been transfered to the web and is still very prevalent in many newsrooms, but it is antithetic to digital media’s now constantly evolving 24-hour news cycle.

An article is built, from top to bottom, with self contained pieces of content. These building blocks can be anything from a piece of text to images, videos and map coordinates.

The philosophy behind the CMS is the complete opposite, it is designed and built for the needs of a modern, digital newsroom and lets the editors and journalists focus on the content and its curation. It introduces interesting concepts like “news value” to decide how important an article is, “stories” that group articles into a course of events and many more.

Content Driven, “Hands-free” Structure and Layout

The goal in all aspects of the structure and design was to allow the editorial staff at SvD to focus more on producing quality content and less on the style and appearance of the layout.

With firsthand knowledge of the new content management system, and the many advantages it has, we were able to design an experience that is tailored to the needs of the reader and the editorial workflow.

It All Begins With an Article

A big part of the traffic starts with the article as an entry point. It is also the most fundamental part of any editorial site. Therefore it becomes an obvious starting point for designing the structure of the site.

One of the main goals of the project was to enable readers to discover more of SvD’s quality journalism. With the article as a starting point we made this possible in a few different ways:

  • Easy to go to the next article in the same context as the one you’re currently reading. E.g. in the “Latest news” context. Either by scrolling or tapping next.
  • Dig deeper into the story an article belongs to via the story view where you can find everything about “The Ukraine Crisis” or “Eurovision 2015”.
  • Discover more writings from the same author via their profile page.

One size does not fit all

There is a broad range of content on a news site. You will find everything from short notices to long form reports and opinion pieces. In order to create a cohesive experience that still supports all this we created a design that adapts to the type of content it holds.

Är Ingves en modern Kung Midas?

Opinion pieces has the author prominently in the head of the article (reminiscent of how that type of content look in the paper). Reports have a larger image at the beginning and an anfang where the text starts. Reviews use SvD’s characteristic dice to show the grade given (1–6). In the body of the article the editors can mix text, images, videos, quotes, facts and references to other articles to create a more interesting narrative.

Stories Give the Reader Context

News stories evolve in a rapid pace and a stream of articles are often published with different views and aspects of the same chain of events. The story is a core concept in the Schibsted Media Platform.

We designed a special “story view” that gives the reader a short summary and presents the most important articles upfront. Large stories also contains an extensive timeline that allows you to dig deeper into everything that has been published about a given event so far.

The Startpage

Based on experience and observations from the previous incarnation of SvD.se we knew that multiple column layouts does not work very well. Users simply tend to follow one single path down the page — so any column, besides the main one, is practically equal to dead space. Besides that, multiple columns are also problematic in a responsive design perspective.

We approached this problem the same way that we have done in previous redesign projects for Unicef and The Swedish Green Party. The approach is based on full-width containers stacked on one another and has later been formalised and aptly named “the container model”.

We designed the start page based on one clearly prioritised feed that constantly updates itself. The teasers are clustered and displayed with different characteristics and weight in order to create a dynamic layout. The visual hierarchy is automatically determined by editorial algorithms and data accumulated by the publishing platform.

Designing a Great Reading Experience

Our basic idea for the design was to create a great reading experience, with clear typography, high contrast and liberal use of whitespace to allow the text to breathe.

We also let the content speak for itself and avoided letting the “framework” take too much visual attention. Websites have natural edges in the form of the browser window or the device edges, we don’t need to add more boxes around the content.

We were lucky to work with SvD’s beautiful custom font family, “Sueca” made by type designer Mário Feliciano. We used a font loading technique to ensure that the fonts are loaded responsibly and consistently on different devices and bandwidths, as well as making sure that the fonts render as fast as possible on subsequent visits.

Icons matching the characteristics of the Sueca font family.

We also collaborated with Letters from Sweden. They manually hinted the SvD fonts so they would look sharp and consistent, regardless of operating system or browser. At our commission, they designed a series of icons matching the characteristics of the Sueca font family. They also redrew the logotype for both “Svenska Dagbladet” and “SvD Näringsliv” so that they would have a sharper, bolder impact on all screens.

A Shared Design System and Digital Identity

For the new website, we designed a system of components that is meant to be used for all of SvD’s digital products, both current and future, to keep a consistent experience and identity.

“We’re not designing pages, we’re designing systems of components.”
Stephen Hay

The system consists of an typographical system, a grid, colors, icons, common interface elements (forms, buttons etcetera) and a myriad of components.

The Future

We are excited about what the future holds for digital journalism and we are confident that we have helped SvD build a solid foundation for the challenges and the changes that lie ahead. We hope you enjoy the new site and we look forward to your feedback.

Visit the new site

PS: Does challenges like this one interest you? We are always interested in finding new talented and experienced people to collaborate with, please get in touch!

At Oktavilla we use strategy, design and technology to craft great services that delight your customers. Get to know us at http://oktavilla.se.

At Oktavilla we use strategy, design and technology to craft great services that delight your customers. Get to know us at http://oktavilla.se.