• Follow us on Linkedin

From digital development to better training for all

DGI's Trænerguiden (Trainerguide)

Hero mask
<h1><span class="text-athletic-green">From digital development</span> to better training for all</h1> <p><span class="text-athletic-green">DGI's Trænerguiden (Trainerguide)</span></p>

Challenge

DGI’s Trænerguiden is a free online tool for trainers and educators, designed to provide exercises and inspiration across a wide variety of sports. Although it has more than 2 million views per year, Trænerguiden is also more than 7 years old and lacks both speed and ease of use.

Trænerguiden is also complex and time-consuming to update and maintain, since it exists as both a website and two native apps, as well as being tightly incorporated in DGI’s main website. This means that users often have different experiences, depending on how they access Trænerguiden.

Solution

To solve DGI’s challenges with Trænerguiden, we develop Trænerguiden as a PWA (Progressive Web App) using a headless approach. This ensures that there will no longer be qualitative differences depending on how Trænerguiden is accessed.

The new solution makes it easier and faster to use the platform for trainers and educators. It also makes updating and maintaining the platform easier for the Trænerguiden team at DGI.

Step one - what's Trænerguidens problem?

Our platform analysis, combined with briefings from DGI and workshops held with the Trænerguiden team, outlines a series of pain points that need to be alleviated. Some of these relate directly to the user experience, while others do so indirectly, by creating a digital environment that is unnecessarily cumbersome to work with. 

Based on our analysis of Trænerguiden’s digital setup, needs and IT practices, we recommend separating Trænerguiden from DGI’s main site, as well as replacing the old setup of two apps and a website with a PWA, using a headless approach. Some of the challenges Trænerguiden faces are:

  • 01. Editing

    Updates and edits to Trænerguiden cause training exercises to temporarily disappear and sometimes stops Spotify from working.

  • 02. Slow UX

    Using Trænerguiden often feels slow, due to both the API being enmeshed into the general DGI Umbraco setup, and large amounts of data being loaded into the users' browsers without being used.

  • 03. Specific issues

    There is a lack of user feedback, such as a spinner, when content is loading, as well as platform-specific issues such as the app not opening on Android, if the user is offline and logged in.

The tools we use to create the new Trænerguiden

On the technical side, we’re building the new Trænerguiden PWA using technologies that the Trænerguiden support team at DGI are already familiar with.

This means that, while the specifics of the solution are of course new, the framework is recognisable. The result is an easier work process for the Trænerguiden team, and in turn a better user experience for trainers and educators. In practical terms, we’re using the following to make the PWA solution:

  • Angular for the frontend.

  • Strapi for the headless backend CMS, with Strapi API’s to serve content to the frontend.

  • Custom API’s to get exercises and user generated content for the frontend.

This decoupled approach, where exercises and user-generated content are stored separately from the CMS content, makes the maintenance much easier and helps with content migration.

Traenerguidenmodel 1280

How DGI benefits from a headless PWA solution

The new headless PWA-based Trænerguiden means moving away from a setup of two different apps and a website - an undeniable benefit for its users. By the same token, since the new Trænerguiden isn’t tied to the main DGI system, updates can happen faster in order to accommodate user needs. Briefly put, the new headless PWA version of Trænerguiden gives trainers and educators, as well as DGI, five key benefits:

  • 01. Responsiveness

    The new Trænerguiden adapts to the user, regardless of the device used to access it.

  • 02. Faster updates

    No more triplication of work across a website and two apps.

  • 03. One place of content

    Easier updates and maintenance mean one high quality user experience.

  • 04. Continuous adaptability

    DGI's Trænerguiden team is now in a better position to accommodate changing user needs. 

  • 05. Speed boost

    The new design enables users to work faster and removes features that aren't seeing much use.

Dgidesktop 2038
Dgimobile 501

The sum of our work - what's changed for DGI?

From a system well past its 7th birthday, operating on a website and two native apps, to a modern, headless PWA, designed to adapt to the user however they access it. That’s the core of the solution we are delivering to DGI with the new Trænerguiden. And thanks to the structure of the new Trænerguiden, DGI looks to be in a better position to continuously adapt to the needs of trainers and educators everywhere.

Let's talk

Related work

Royal Greenland

Royal Greenland

Thanks to the digital product catalogue and the PWA-based solution Royal Greenland is now delivering an optimised and more efficient B2B sales process for their industrial clients.

Garrets

Garrets

Garrets' ambition is ‘to make our customers’ lives at sea better’. With the new intutive Stores Shopper, Garrets has taken a decisive step towards realising this ambition.