Context and stakes :

Since its creation in 1924 until today, the TOTAL company has become one of the largest oil and gas companies in the world. TOTAL wanted to set their history in an interactive timeline to highlight past and future commitments, the challenges linked to climate constraints and make this story the gateway to the corporate sites.

Aude Colas-des-Francs, Digital Media Officer at Total Group, wanted to tell Total “at a glance” to give an overview of the company. 

This need for rewriting had to be fulfilled immediately while the Total corporate website was in the midst of a complete overhaul. Which implied that the project would have to be easily integrated both in the temporary versions of the sites as well as in the final corporate websites versions.

Thanks to our software solution, today this story is told in 17 languages throughout the corporate websites in the countries where the group operates.

Total & RacontR collaborated in an agile and iterative way, in tune with the company’s guidelines and their CMS architecture (the corporate site, thanks to the ease of integration offered by the RacontR software.

#longform #engagement #interactivity #communication #storytelling #UX #MostVisitedPage #corporate

Screen capture of an interactive picture of the Earth taken from the Total Project made by RacontR
Screen capture of a picture taken from the Total Project made by RacontR


In order to make the group’s story lively and attractive while focusing on the user experience, RacontR’s digital studio opted for a long format and created interactive visuals and pop-ins which embellish the project and encourage further browsing.

The long form – this format offers smooth reading thus guaranteeing a pleasant user experience :

  • Interactivity improves the user’s engagement with the content produced
  • A streamlined interface creates depth thanks to asynchronous designs and animations.

The overall experience boosts the user’s engagement during their discovery of Total’s history and ambitions. This landing page prompts further reading of various content on the site. Today it is one of the most visited pages of the site.

Finalisation and assets :

1. From design to final online launch, the project was produced within set budget and planned deadlines (15 days) – this includes mobile and tablet versions


2. Integration is made with a simple .zip file sent by RacontR and loaded on the client’s server


3. This page dedicated to the history of the group is now the most consulted page on the site


4. The project can be turned into a template or updated in a just few clicks by the client or by ourselves if needed

Screen capture of an interactive picture taken from the Total Project made by RacontR
Screen capture of an interactive map taken from the Total Project made by RacontR

“At last we have a tool that can adapt to the message without being constrained by the end-device or the project’s hosting structure. We were able to get past the rigidity of our CMS while preserving an immense freedom of creation.

This opens incredible perspectives: not only can we adapt to the message and deliver it with a medium that increases engagement, but also really stand out.

In the end, the only limit with RacontR is good taste! “Aude Colas-Des-Francs, Digital Media Office at TOTAL.