DNV GL is the leading provider of risk management and quality assurance services in many industries, like maritime, oil, gas, power and renewables. Operating in more than 100 countries, the company is also a global leader in certifying management systems across the sectors healthcare, food, beverage, automotive and aerospace.
In the course of the group-wide digital transformation, the company planned to replace the print magazine Maritime Impact and nine additional ship-specific publications in a digital form.
The concept worked pretty well, so I could start with the design. We did some iterations and explorations of different styles and interactive elements, as well as different content formats. We quickly had a solid MVP that was ready to be launched. After the release the KPIs exceeded all expectations and since then we continuously improved the content hub with additional content formats and enhancements to the overall experience.
In the following before-after module you can see the small structural difference between the wireframe and the design of an article. The concept of telling a story side-by-side, with an image on the left and the content on the right, made it from the very beginning to the final design. A remarkable addition is the option to share. When a text is selected a tooltip shows up, that enables readers to share the highlighted text on social media.
The editors and journalists of DNV GL produce a treasure trove of content about safety, quality, energy efficiency and environmental performance of the global shipping industry. To make this content accessible, we developed a bunch of different content formats with individual layouts and interaction patterns.
Not all articles might be relevant for every user. That's why we placed a filter bar right on top, which stays sticky while scrolling through an endless stream of articles. The content can be filtered by selecting one or more tags. Then the tiles reorder automatically with an animation, so everything remains nice and tidy back in the grid.
The click on a tl;dr icon of a tile reveals a summary with an estimated reading time. Only selecting a single tag shows a contact person, to get in touch with the expert of the specific ship type.