Fakten & Zahlen - Interactive Charts for pharmaSuisse

Approach – from print to digital

Digitizing a print format usually brings new opportunities and challenges. The biggest advantage is greater flexibility. Thanks to digitization, facts & figures can now be continuously updated and distributed more easily. In collaboration with the design agency Usable Brands, we reinterpreted existing visualizations from the print medium for the digital, responsive format. A key challenge here was to generalize possible exceptions and find reusable components that could cover as many cases as possible.

In iterative steps, we supplemented the design process with a digital prototype in order to test and improve the real experience in the digital world.

Data, data, data

One challenge was that the final data was not yet available during development. We were able to test the visualizations with test data from previous years, but clarity about the requirements only developed in the course of the project, as the data was delivered and processed.

Responsive design for interactive charts

We paid particular attention to ensuring that the solution could be scaled as data changed and that editors could customize the display of data within the CI/CD framework.

Since both data and the size of users' devices can vary, we developed solutions that optimize the charts for smartphones first, but also for desktop devices. For very small datasets, we do not use labels and only display them when interacted with. Labels for rows appear above the row on mobile devices, while on desktop devices we use the available space and display the row labels directly at the beginning of the row. Particularly long line charts are made accessible on mobile devices by horizontal scrolling, while on desktop devices the chart can be displayed in its entirety. The donut charts benefit from the fact that we scale the labels according to the size of the pie slice – small values are displayed with smaller labels and larger values with larger labels.

Result

You can visit Fakten und Zahlen at the pharmaSuisse website.

Below are some examples of how the facts and figures were visualized:

Editorial experience

To support design and preparation as efficiently as possible, we have expanded the blökkli editor to include chart functions. First, the data is uploaded in a structured form, e.g. as a CSV file.

In a second step, the editorial team can interactively prepare the structured data in blökkli. The selection of predefined color palettes and sliders for settings help to optimally adjust the positioning and display.

Charts can also be exported as PDF files. Editors can manually set line breaks to optimize the layout of the chart pages.

Outlook

The interactive charts for pharmaSuisse have been successfully released and are continuously updated. pharmaSuisse benefits in that facts can be sent directly via digital channels and updated regularly. We are currently planning the second iteration: the presentation of facts will be optimized, with a focus on interactions and readability.

Many thanks to pharmaSuisse for their trust and cooperation. Thank you Usable Brands as well as Jan Hug and Jens Vranckz from our team for the implementation! We are delighted to be able to create and further develop an appealing visualization for facts and figures.