[et_pb_section fb_built=\u00a0\u00bb1″ _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_row _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4″ _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_image src=\u00a0\u00bbhttps:\/\/audreycsikos.ch\/wp-content\/uploads\/2024\/04\/Durabilia.png\u00a0\u00bb title_text=\u00a0\u00bbDurabilia\u00a0\u00bb force_fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb hover_enabled=\u00a0\u00bb0″ global_colors_info=\u00a0\u00bb{}\u00a0\u00bb sticky_enabled=\u00a0\u00bb0″]<\/p>\n
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).<\/p>\n
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.<\/p>\n
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.<\/p>\n
The project took place over a total period of 18 days, including ideation, filming, design, development, and presentation phases.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n
As a group of 13 students in the final year of Media Engineering at HEIG-VD (Haute \u00c9cole d'Ing\u00e9nierie et de Gestion), we embarked on an exciting project: the creation of a web documentary<\/strong> 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.<\/strong>.<\/p>\n Our involvement in this project has offered us the opportunity to explore the SCRUM methodology<\/strong>, an agile approach that has enriched our academic experience.<\/p>\n The web documentary we are designing stands out for its interactive nature.<\/strong>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.<\/p>\n [\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/audreycsikos.ch\/wp-content\/uploads\/2024\/04\/Affiche-ONU-SDG.jpg\u00a0\u00bb title_text=\u00a0\u00bbSustainable Development Goals_E_Final sizes\u00a0\u00bb force_fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_font=\u00a0\u00bb||||||||\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n [\/et_pb_text][et_pb_gallery gallery_ids=\u00a0\u00bb28965,28963,28964″ fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_gallery][et_pb_text ol_item_indent=\u00a0\u00bb13px\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb ol_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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<\/a>. 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.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n \ud83d\udc49 SIMPLICITY<\/p>\n 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.<\/p>\n \ud83d\udc49 IDENTIFICATION<\/p>\n An interview format involving speakers selected for both their expertise and their ability to evoke a sense of identification with our target audience.<\/p>\n \ud83d\udc49 PROXIMITY<\/p>\n A direct and informative tone to add proximity and make the target audience feel more involved in the speakers' message.<\/p>\n \ud83d\udc49 INTERACTION<\/p>\n User-selected question-answer formats<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n 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.<\/p>\n The scenario is reproducible and adaptable for all other SDGs, allowing for complete immersion for the user.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n [\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/audreycsikos.ch\/wp-content\/uploads\/2024\/04\/IMG_0004-scaled.jpg\u00a0\u00bb title_text=\u00a0\u00bbtournage_02″ force_fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n [\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/audreycsikos.ch\/wp-content\/uploads\/2024\/04\/Capture-decran-2024-04-15-a-21.55.20.png\u00a0\u00bb title_text=\u00a0\u00bbmontage\u00a0\u00bb force_fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n [\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/audreycsikos.ch\/wp-content\/uploads\/2024\/04\/Capture-decran-2024-04-15-a-21.57.27.png\u00a0\u00bb title_text=\u00a0\u00bbidentit\u00e9 visuelle durabilia\u00a0\u00bb force_fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_font=\u00a0\u00bb|700|||||||\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n [\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/audreycsikos.ch\/wp-content\/uploads\/2024\/04\/Capture-decran-2024-04-15-a-21.58.38.png\u00a0\u00bb title_text=\u00a0\u00bbbenchmark durabilia\u00a0\u00bb force_fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n [\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/audreycsikos.ch\/wp-content\/uploads\/2024\/04\/Capture-decran-2024-04-15-a-21.59.57.png\u00a0\u00bb title_text=\u00a0\u00bbdurabilia_interface\u00a0\u00bb force_fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n 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.<\/p>\n We iterated on the mockups, proposed two new versions, and retested. The key objectives were coherence and immersion.<\/p>\n Although the developers were unable to implement these versions due to time constraints, the results will help guide future steps of the project.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.25.0″ _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb16px\u00a0\u00bb header_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font=\u00a0\u00bb|700||on|||||\u00a0\u00bb header_2_font_size=\u00a0\u00bb38px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n For this web documentary, we developed several independent tools to facilitate the creation and structuring of interactive videos.<\/p>\n 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<\/a>. Finally, we integrated this library into the final website.<\/p>\n In summary, the end user can easily and independently modify the photos, texts, and videos related to interactions.<\/p>\nPersonas<\/h2>\n
Survey<\/h2>\n
\n
Concept<\/h2>\n
Scenario<\/h2>\n
Shooting<\/h2>\n
Video editing<\/h2>\n
Visual identity<\/h2>\n
Benchmark<\/h2>\n
Interface<\/h2>\n
User testing<\/h2>\n
Development<\/h2>\n