Case Study: GraphCMS and DTM

I love the idea of pure content data in GraphCMS. All applications – and who knows what we will come up with – simply retrieve content via GraphQL and serve it the way we need to at the different touchpoints. Tomorrow we could build an Alexa skill with the existing content structure we already have in place.

Marvin WeilandDigital Product Owner and Marketing Manager at DTM

2
Months from idea to launch
20%
Reduction in bounce rate

About DTM

Founded in 1984, the DTM builds on more than 35 years of history and offers a spectacular, passionate, and emotional wheel-to-wheel racing experience for millions of fans every year. The DTM series reflects the core product of the so-called “DTM Platform” which also integrates further products and events such as DTM eSports, the DTM Trophy, and in the future, the DTM Electric series. With its global live TV coverage (+30 countries) and more than 600,000 spectators on-site during the 2019 DTM season, the DTM series underlines its status as one of the biggest racing series, not only in Europe but worldwide.

The project

In 2019, DTM’s leadership decided to fully commit to a user-centric strategy for its entire digital presence. Tasked to lead the challenging transformation is Marvin Weiland, a marketing expert and product owner for DTM’s digital platforms such as websites, apps, OTT video streaming, and eCommerce platform.

The transformation project aimed at creating an excellent user experience along the digital touchpoints of DTM. This means being visible and attractive in the early phases of the customer journey with website features that show the emotional, exciting and ambitious character of DTM as well as offering ways for users to become integrated into the sports: via “Datatainment” second screen solutions, customizable video streaming or an enhanced event companion app that makes sure fans never miss any action while visiting the motorsport festival that DTM is.

Creating a simple yet exciting and adaptive UX is the philosophy of Marvin’s team and partners. It is essential to be able to relaunch at any time, allowing the team to react to any change in customer behavior. Fan expectations change all the time, so being agile and acting without a delay is paramount for survival and success. The transformation included a complete re-platforming of DTM’s website and the re-launch of their native mobile apps.

“User expectations change constantly and your digital architecture must be built for extensibility and adaptation. We build with the user in mind, not given software features. It is not responsible to only build with one specific software framework in mind. Our goal is to retain the users who have entered our ecosystem, to make them happy in every step of their life-cycle, to build true fan loyalty. There are so many superfans who can not necessarily attend race events on-site. We have a responsibility to them as well to bring them the enjoyment of the sport – in a digital way. That mindset proves even more important now in times of Covid 19 and limited fan allowances.”

Marvin Weiland, DTM Digital Product Owner, and Marketing Manager.

In the past

Previously, DTM’s website ran on several content management systems including a monolithic Drupal instance. The UX was not appropriate for the demanding fan and not adapted to the various user segments of DTM. The legacy technical setup quickly became obsolete as it no longer fulfilled the ever-changing user requirements. As the team spent time adapting the legacy system, one question was pushed to the forefront: “What is the tech architecture that will lead us into the future?”.

The tech stack

Microservice architecture with a user-centric approach rather than a tool-centric approach defined the direction of DTM’s transformation. GraphCMS, as an API-first headless CMS, is used for the management of all DTM textual and media data. GraphCMS’ GraphQL API delivers the content to the company’s website and its iOS and Android applications. The central content hub ensures data quality and integrity. Instead of having multiple content management systems for the website and for the mobile apps, DTM uses GraphCMS for all its content. The tech stack also contains a middleware with NodeJS and a frontend with VueJS.

“I love the idea of pure content data in the headless CMS. All applications – and who knows what we will come up with –simply retrieve content via GraphQL and serve it the way we need to at the different touchpoints. Tomorrow we could build an Alexa skill with the existing content structure we already have in place.”

Marvin Weiland, DTM Digital Product Owner, and Marketing Manager

The project development

Once onboarded to GraphCMS, Marvin Weiland’s team implemented the first pages of the dtm.com website on the brand new tech stack in just 2 months in Autumn 2019.

“Our digital user should be able to relive the offline experiences of somebody attending our races. The acceleration, the heat, the emotion, the spectacle – they are alive on our website and in our mobile app”.

Marvin Weiland, DTM Digital Product Owner, and Marketing Manager

In the second phase of the transformation, the DTM team worked with an agency to extend the web platform functionality and introduce a partially new frontend design. In parallel, another team relaunched the DTM mobile app which also consumes the same content from GraphCMS. Although both teams didn’t have extensive prior GraphQL experience, they became fully productive within just a few days. Revealing the content structure and all API features through the GraphQL API Explorer helps immensely to achieve proficiency without any additional backend or database experience. Two separate development teams working in parallel on different mobile platforms is possible thanks to the API-first nature of GraphCMS and features such as Development Environments. Parallelizing implementation work means a drastically reduced time to market for DTM’s products and any new features they wish to implement.

The website

DTM’s website is a gateway to experience thrilling motorsport in a digital way. It gives fans full access to relevant sporting data and news to keep up with the sport, live data-tainment features to individualize the watching experience during race weekends, and further event guidance that leads users to the eCommerce site. The website is localized in German and English. It features fast-loading video headers captivating both veteran fans and newcomers to the motorsport world while also surprising the user with a self explorable 3D model of a DTM Electric demo car. With a Google Lighthouse score of 85-95, dtm.com is an excellent example of the performance optimizations that can be achieved with a modern JAMstack-based platform. Additionally, there has been a 10-20% reduction in bounce rate thanks to an improved content architecture, a new content strategy, and the decreased page loading time.

The app

DTM’s mobile application for iOS and Android is a trusted companion of the true racing fan. It gives real-time access to breaking news, live standings, and competition results. Fans at home can use the app as a second screen to check a driver’s history while fans on-site use its location map as a navigation tool. The app provides fans with the ability to plan their own personalized event schedule: activities in the fan village that make DTM events a beloved motorsport festival. This content is all hosted on GraphCMS, an essential part of creating the fan-centric experience that DTM strives for.

Benefits of GraphCMS:

• 10-20% reduction in bounce rates after moving to GraphCMS
• GraphCMS drastically reduced the go-to-market time, making it possible to launch a new site in just 2 months DTM easily embraced the content hub approach by using GraphCMS as their repo, simplifying their execution to deliver omnichannel content
• GraphCMS made it possible to create a powerful Backend-as-a-Service with a GraphQL core quickly.
• Despite no prior experience with GraphQL, the teams were able to rapidly embrace the new query language, making their implementation even easier with the API playground and self-generated GraphQL documentation
• Best-of-breed tech stacks, including GraphCMS, enabled DTM to deliver better performance and measurably greater user experience as compared to their previous website.