News publication renewal

•

Renewing multiple news web sites

and the design behind it.

Screenshot from ongoing work

Project kickoff

The project started in 2018 with a goal to renew and unify all news platforms under the Keskisuomalainen media corporation, including over 50 news sites.

The renewal was just not happening for the frontend, but also the backend completely with new publishing system.

To keep this story focused, I'll concentrate mostly on the design.

Make publishing great again

With the project, we would be able to streamline workloads and build strong foundation for every upcoming publication for the web. This was mandatory as we were maintaining 4 web publishing platforms, 5 application platforms and 7 different databases. All of this was getting just too much to handle.

My work was to design user interface for this project, working on variety of devices and could be expanded for future requirements. Involving stakeholders to the design process was naturally part of the process. Luckily this was not the first time renewing news site, so all the experience was appreciated.

Our digital team consisted of 8 persons, including project manager, developers and a designer. Quite a big task to pull off, therefore everyone had a big responsibility in the project.

Our team reaching for the same goal (Well not really, but idea is the same)

KISS (Keep It Simple Stupid)

We knew, that there was no room for inefficient work. Everything should be built once and used multiple times. This was the way to keep things effective and maintainable for team sized as ours.

So, to keep things simple as possible, we wanted create the UI components from the scratch. Building everything from smallest components to eventually large structures gave us the best possible situation when changes were needed across the sites.

Levels of the UI:

1. Foundations

2. Materials

3. Elements

4. Data visualization

5. Themes

All the design work was done using Adobe XD and greatly inspired by Atomic Design (Thanks Brad!)

1. Foundations

Grid, positioning and spacing, typography and colors create the foundation for the UI elements to be placed on. Every element follows the rules of size, placement and style which were set there. This way it's possible to build completely responsive layouts, for all possible viewports.

2. Materials

Materials are the basic building blocks, on top of the foundation. These include icons, buttons, input fields, text areas, notifications, tooltips etc.

3. Elements

Elements are the combination of different materials which are used in same way on multiple places. This means navigations, menus, steppers, forms, different type of lists, footer, etc.

4. Data visualization

Data visualization is important part of journalism to support the stories told. These mean different kind of infographics, tables etc.

5. Themes

To expand the visual style, themes could be used to create custom typography, colors and icons, even grid. This gives different sites a possibility for their own unique look.

Beta than nothing

First beta versions of selected sites were published in beginning of 2019 for collecting feedback from stakeholders, our customers and stress testing the systems. Feedback and all available data was collected and looked through how we could improve the current design or technical aspects, before releasing to public.

Saying farewell

In April of 2019, I said farewell to my team to start on a new job.

I felt that there was still many things to build, so I hoped my design work could be continued and improved upon. Even not able to see first public release, I felt that the project was in good hands.

Over 50 sites and going strong

Now there are over 50 news sites around Finland, running on single web publishing platform. All the sites are built upon the very same foundations and building blocks we once created together.

For example, if you have read news from Aamuposti or Helsingin uutiset, you have been in touch with the very project. All these sites provide content for 1,5 million unique visitors in a week.

Edit 9/2022: As this project was launched in 2019, recently another renewal has taken place. Please note that current state of the sites is not reflecting this project anymore :( I still can be happy for it being live three full years.

These sites were included in the project:

Etelä-Suomen Media