The project aims to attract and redirect users aged 15 to 25 to the Durabilia video games by creating an interactive web documentary on the Sustainable Development Goals (SDGs).
The main objective is to inform the target audience about issues related to sustainable development while actively engaging them in the process through an immersive user journey.
To enhance Durabilia's credibility, the project focuses on creating useful and high-quality content, with a platform designed similarly to Netflix and an administration interface to manage videos and questions.
The project took place over a total period of 18 days, including ideation, filming, design, development, and presentation phases.
Context
As a group of 13 students in the final year of Media Engineering at HEIG-VD (Haute École d'Ingénierie et de Gestion), we embarked on an exciting project: the creation of a web documentary about Durabilia. This research project, led by the Media Engineering Institute (MEI) of HEIG-VD in collaboration with the School of Management (HEG) and the School of Engineering and Architecture (HEIA) in Fribourg, involves the participation of around a hundred people. The main objective of Durabilia is to design a web game aimed at raising awareness about the 17 Sustainable Development Goals (SDGs) defined by the UN..
Our involvement in this project has offered us the opportunity to explore the SCRUM methodology, an agile approach that has enriched our academic experience.
The web documentary we are designing stands out for its interactive nature.Combining videos, texts, sounds, and animations, it constitutes an innovative form of digital storytelling. Users are invited to become engaged actors, actively participating in the story by choosing their own path and exploring different viewpoints. Unlike a traditional documentary, where the viewer remains passive, the web documentary gives a central place to the user. Our goal is not only to make them active but also to make them actors in the story we tell.
Personas
Respecting Durabilia's strategic direction, the core target audience remains French-speaking individuals aged 15-25, who will be the targeted players. Once the target audience was determined, we developed three personas.
Survey
While we were brainstorming the scenario and interface of our web documentary, we compiled a list of questions and created a survey on Typebot.io. This survey, aimed at young French-speaking individuals aged 15 to 25, was distributed among our contacts to identify the most suitable features, format, and tone for our web documentary. We obtained a total of 105 responses, 76 of which were completed. From this, we derived several insights.
- The web documentary format is not a very familiar experience for young people.
- The horizontal format for desktop and vertical format for mobile appear to be the best compromise.
- A significant portion of the respondents is not interested in a video format requiring a lot of interactions.
- The ideal duration of informative videos shows a preference for an experience of over 7 minutes with some dynamism.
- The informative videos that work best are accompanied by animations and highlighted text.
- A rather serious tone is to be favored.
Concept
We have designed a first version of the web documentary by delving into one of the 17 SDGs: SDG 5 "Gender Equality". The reason behind this choice is the current importance of the issue in Switzerland as well as our personal sensitivity to this topic.
We have come to consider that educating the target audience, of which we are a part, partly fulfills Durabilia's objectives. Therefore, we have imagined a solution as engaging as possible for the audience to involve them.
Therefore, the objectives of the web documentary are to educate and engage the audience on sustainability issues and redirect them to the Durabilia web game.
👉 SIMPLICITY
A user experience as simple as possible considering the significant portion of the target audience that is not familiar with the concept of a web documentary.
👉 IDENTIFICATION
An interview format involving speakers selected for both their expertise and their ability to evoke a sense of identification with our target audience.
👉 PROXIMITY
A direct and informative tone to add proximity and make the target audience feel more involved in the speakers' message.
👉 INTERACTION
User-selected question-answer formats
Scenario
In this web documentary, the user takes on the role of a newcomer to the Durabilia team and must gather information about the 17 SDGs to help develop a game based on them. They choose a theme within an SDG and conduct an interview with a real person involved in that theme. Then, they can decide to redo the interview differently or submit their research to their supervisor.
The scenario is based on real elements to be plausible, coherent, and interesting. Adding a story to this web documentary allows the user to feel immersed in the concept and identify with a role.
The scenario is reproducible and adaptable for all other SDGs, allowing for complete immersion for the user.
Shooting
During our shootings, we primarily chose to use a black and neutral background to create an intimate yet professional atmosphere and highlight the interviewees and their stories. We opted for multi-camera shots to add dynamism and offer a variety of angles. All these choices enhanced the visual quality of our documentary and its message.
Video editing
There were two types of content to edit: the interviews with the speakers on the four themes chosen within SDG 5 and the introductions, presentations, and general conclusions. We were mainly inspired by "Konbini"-style editing for the interviews and "In short" for the introduction videos.
The overall process involved logging the footage, formatting the sequences (for desktop and mobile), and synchronizing the sound with the images from the two cameras. Then, we moved on to the editing stage, which included selecting the most relevant music and speeches, alternating between the two or three camera angles, color grading, and adding special effects. Finally, we added subtitles, exported the videos in the correct format, and implemented them into the web documentary.
The introduction videos feature a person speaking directly to the user, explaining their role and providing various information about the SDGs, either facing the camera or in voice-over. There is also a picture-in-picture video containing multiple speakers discussing Durabilia and the 17 SDGs.
The interviews feature external speakers who "respond" to the user's questions. Moreover, they all start with a catchy phrase just before introducing the speaker, to engage the user and make them want to continue the experience.
Visual identity
We created a visual identity guide to give a visual identity to our future web documentary interface and to guide its concrete design by the developers.
Given that it has always been important to create a connection between our project and the 17 SDGs in our vision, we opted for a simple graphic charter, composed of neutral colors such as a range of grays.
The graphic elements clearly reflect the world of video platforms. The typography, on the other hand, was chosen based on its usage. We aimed to focus the project on an impactful writing style to engage the user.
Benchmark
To design the interface of our web documentary, we first conducted a benchmark on existing web documentaries and popular VOD platforms such as Netflix and Disney+, along with their most relevant features for our target audience.
Interface
We created interface mockups for both desktop and mobile versions, aiming to visualize the appearance of the interface and define typography, navigation, and ergonomics. These mockups were then used to develop the final version of the interface.
User testing
We conducted user tests, including think-aloud and semi-guided tests. The results showed that the clarity of the buttons was an issue and that there was inconsistent coherence between the menu screen and the interactions in the videos.
We iterated on the mockups, proposed two new versions, and retested. The key objectives were coherence and immersion.
Although the developers were unable to implement these versions due to time constraints, the results will help guide future steps of the project.
Development
For this web documentary, we developed several independent tools to facilitate the creation and structuring of interactive videos.
We first designed a user-friendly visual interface for importing videos into various projects and easily linking them together. To enable project playback, we then integrated a small API that provides projects readable by the computer in JSON format. Additionally, to play the projects and perform visual rendering, we created an interactive video player available in an NPM library: https://www.npmjs.com/package/@shammas44/interactive-video-player. Finally, we integrated this library into the final website.
In summary, the end user can easily and independently modify the photos, texts, and videos related to interactions.
All GitHub repositories related to this project are available via this link: https://github.com/orgs/Durabequipe/repositories.
Pour se connecter et utiliser l’outil d’administration, un simple login nom d’utilisateur/mot de passe est nécessaire. Pour le player vidéo et l’intégration dans le site final, une clé API.
Techniques used :
- For administration: TAL Stack, MySQL,
- For the player library: JS Vanilla, WebComponent
- For the final website: Angular, SCSS
Communication
The web-documentary can be adapted for various versions that can be reused to promote it on social media platforms.
- Alternating Reels with impactful text and images.
- Reels showcasing meaningful or emotionally impactful parts of interviews.
- 1-2 minute documentary teaser
- Podcast recording all or part of an interview
- Blog post revisiting a topic discussed during an interview.
We want users of the web documentary to reflect on the issue of sustainability, and for Durabilia to serve as a foundation, a starting point for this reflective process.
- 71% of Instagram users are under 30 years old.
- Ideal for visual content.
- Allows to initiate a dialogue and to create and manage a community.
TikTok
- 78% of users are between 11 and 24 years old.
- Great for humanizing the documentary and the Durabilia project by showcasing individuals.
- Using a challenge related to the Durabilia game would foster excitement around the project.
YouTube
- Boosts search engine optimization.
- Go-to platform for videos.
- Consistency in posting frequency and visual identity is key.
Snapchat
- 70% of users are between 15 and 24 years old in 2016.
- Useful for presenting short videos in stories and featuring the long format in swipe up.
- Exploiting the recurrence, even the redundancy, of publications.
- Relevant filters
Future steps
Given the short time available for this project, just three weeks, we decided to focus on a single SDG, SDG 5. However, the web documentary we created is far from perfect and could be improved with the addition of other content.
First and foremost, it would be necessary to replicate the work done for the other 16 SDGs, meaning finding 2-6 themes to develop within each of them, interviewing relevant individuals, and producing the videos in both desktop and mobile formats.
Speaking of videos, there would be the possibility to revisit and improve the videos already produced, whether it's regarding color grading, sound, editing, subtitles, or format. For instance, the introduction videos couldn't be produced in vertical format due to time constraints; therefore, this would be the first major point to focus on.
It would also be necessary to improve and implement the developed interface. Indeed, as explained in the "UX" section, we found through initial user testing that it could be improved, especially regarding button clarity, the menu screen, and interactions within the videos.
Once this is done, the next steps would be to integrate it with the Durabilia project's game, finalize the online release, and potentially promote the web documentary on social media, as explained in the "Communication" section.
Conclusion
This project has allowed us to learn about collaboration within a team of 13 people. We have seen that in some cases, collective intelligence is very important for moving things forward and evolving.
We were also able to focus on the skill we wanted to deepen since all the necessary skills for the project were present within the group.
This project has been very enriching, especially because we were briefed on the potential reuse of our project later on.