In 2022 my studios design project — New designsystem for 60 news websites in Finland — was launched in Finland. In 2023 the design was awarded in the prestigious Red Dot Award: Brands & Communication Design 2023.
CASE STUDY: How to design a system for a multi brand news website?
It is the largest design project my studio have worked with. The project scope is; To reform all Mediatalo Keskisuomalainen’s news products; over 60 websites and nearly 80 newspapers into one design system; where the main scope is to share stories faster in the group.
See the video:
WHY: Size matters. In all news media design projects, information content is paramount. To share stories faster is the main task for this project, a project that is large both in scale and scope.
It’s important to understand the habits of the digital readers and that the usability and storytelling depends on how your stories are structured.
The way-finding and navigation is an important part of the organising of news stories.
Just like Le Corbusier, so precisely said: »Architecture is organising«, news design is all about organising the content.
HOW: Stories needs to be prioritised. The size of the story matters and the variation and presentation of the stories.
— Is it short or is it long? What’s the nature of the story, category, time and section? Is it related stories and content? What is the rich media experience?
One of the main ideas of the whole design is to simplify and streamline the structures of the stories, i.e. the same elements are repeated in print and online.
Movement between a computer and a mobile phone, is seamless.
I started the project with the mobile design and scaled it up for the desktop design after the mobile design was designed. In Finland mobile is really first and most users will read the stories with the smallest device.
We set up the project in design sprints, starting up with wireframes, and combined the work with several workshops for the team. One good method we worked with for prioritising stories, was ‘the post-it notes’-w-shop. It proved useful for finding out the structure for the front.
We choose: Figma as the software for this project, it is so easy to prototype a project, and share the style guides remote with Figma. My studio worked with this project during several lock downs in the pandemic in between 2021-2022.
To make the work more efficient and easy on a daily basis I designed a system that is simplified but at same time will give the readers a clearer and better reading experience.
My studio designed the navigation and way-finding for the new design system, the stories journey and the icon system for all the stories ’call-to-action’ buttons.
WHY: Your typeface is your logo. News comes and goes but your typeface remains. Your typeface creates a consistency to your stories and brand experience. The choice of typeface is critical when creating a better reading and legibility experience for your readers and visitors in print or digital.
HOW: Create recognition with better typefaces. The concept is to keep the design in digital and print close, with the same typefaces to create a clear recognition between the print and digital platform.
What I look for when choosing typefaces:
In this project, the Finnish language was different, which not all typefaces work with. There are very long words in Finnish, which was challenging. The language is also harmonious and rhythmic. To me, it was very interesting to do research to find the typefaces that could improve the readability.
In the process of choosing typefaces today its ability to perform on small screens is critical. The typefaces for a project of this scope needs to work for different platforms, digital and print and have the quality to live over a long time period.
The serif typeface is called Majrit;
Mário Feliciano, Feliciano Type
The sans serif typeface is called Caslon Doric;
Paul Barnes, Commercial Type.
Photo: Jan Grarup
WHY: The power of visual storytelling
The visuals is the stories main emotional driver. The media today is more visual than it ever has been. The competition in social media and the classic news media is though and the users today expect more rich media experiences. Is it sound, motion, video, photos, illustration, visual data or information graphics?
HOW: Visual sparring to get that visual punch.
My method is to frame visual concepts for editorial products by getting inspired by the ‘best-in-practice’- examples and the trends in news visual journalism.
I held a 2 days inspirational w-shop in visual storytelling, for all the visual staff at the group, combined with a webinar in visual storytelling for all 6oo people of the editorial staff.
In the work with the digital design and to simplify and streamline the stories, the visual elements were also streamlined. The visual formats are framed and defined to make the daily production easier in print and online.
WHY: The fastest method to instantly communicate a message or a meaning through visuals and text are colour. So the colours are crucial to producing good user experiences. Colour plays an important role in the reader comprehension, so its effects are something you need to think about as a developer. Colours can simplify and sharpen the news communication or in worst case confuse the users.
HOW: Colours need to be prioritised. When transmitting the knowledge in colour to media and especially for the purpose of telling news there are two ground principles; keep it simple and colours needs to be prioritised.
The primary colours are key for any news product and helps the reader to attention and recognise the brand. Finland is the land of a thousand lakes and Alvar Aalto one of the masters of Finnish design. Inspired by The Aalto vase and its indigo blue colour, I named the new overall brand colour: Japan blue.
The colour system is designed with a holistic approach to create a coherent visual identity and with a few added colours needed to improve the digital experience.
Pekka Mervola, the journalistic director of Mediatalo Keskisuomalainen.
The aim is with the new design system for digital and print is to create a holistic visual identity across all touchpoints.
Read also the interview, on the print design system for 78 newspapers:
Creative Direction and digital design by Anna Thurfjell, Anna Thurfjell Design studio Aps, Copenhagen.
Assistant: Steffen Gammelgaard, frontend designer, Brandrocket, Copenhagen.
The in-house: digital team at Mediatalo Keskisuomalainen, Finland:
Terhi Nevalainen, editor and overall project team manager
Seija Finne-Saarento, designer in-house, leading design and visual team
Timo Häkkinen, Webmaster
Herkko Huttunen, UX designer
Jutta Listamo Javanainen, Digital project manager
Juho Hämalainen, Journalist