Forum Discussion
How to Apologize - Interactive Game-Based Scenario
Hey everyone!
We wanted to share a project that we presented this year at DevLearn's DemoFest.
Play through the scenario linked below for a safe space to practice apologizing. It walks you through an example situation to help you understand the impact of your words and actions. At the end, you’ll get tips for how to improve your approach constructively.
How to Apologize Landing Page
Some features of this project include:
User/Player Experience
-
- Choose your character: At the start of the scenario, learners get to select a character set. We chose a diverse range of individuals so that players are able to choose a couple that resonates with them.
- "Observation" and "Reflection" notifications: You receive notifications at each decision point. These optional video segments give the player more context/information about what is happening in the scene.
- Stress Meter: The stress meter goes up for every "wrong" answer and down for every "right" answer. When the stress bar maxes out, it blocks the "best" answer in the interaction. This is to mimic the real-world feeling of being stressed out and unable to think clearly.
To reduce your stress meter when it maxes out, you can watch an observation or reflection video clip to regain clarity and select the best answer. - Immediate Feedback: The partner character's body language and facial expressions are adaptive to how respond at each decision point. When you select a correct answer, they soften their face and open up, but when you select an incorrect answer they stiffen and close off.
- Customized summative feedback: At the end of the scenario, players are provided with feedback specific to their answers throughout the scenario. Feedback is presented using variables, so it is completely customized to an individuals unique answers.
- Choose your character: At the start of the scenario, learners get to select a character set. We chose a diverse range of individuals so that players are able to choose a couple that resonates with them.
Development:
-
- The scenario was developed in Storyline 360 and exported to HTML.
- We are hosting the project on a dedicated webpage using an iFrame, but it also lives on the client website
- We set up JavaScript tracking to keep track of user activity to inform the continual improvement of the learning experience
Media Production:
-
- Our in-house animation team developed the characters for this project, using a 2D animation style with detailed faces to showcase a range of emotions. We used simple 3D backgrounds (built in Blender) to focus attention on the characters.
- We used a professional sound engineer to create an emotive score for the experience.
- We used Storyline's built-in elements to build the user interface for choice screens, the notification bar, and the Stress Meter.
- Our in-house animation team developed the characters for this project, using a 2D animation style with detailed faces to showcase a range of emotions. We used simple 3D backgrounds (built in Blender) to focus attention on the characters.
10 Replies
Wow, Hot Neon! This example includes so many thoughtfully designed graphics and learning elements. Thank you for sharing your example here!
I was one of the people who stopped by your DemoFest station at DevLearn and I was blown away by the art and sound design on this project.
Thanks for sharing the project link here! And thanks for also giving us a bit of a behind-the-scenes peek at how you created it and how some of the features in the scenario work.Thank you for sharing!
The scenario design in this is brilliant. The visuals, sound, UI and everything are icing on the cake. It'd be really interested to learn more - do you run any sessions where you walk through this and where I could potentially ask questions?We have not done this yet but are considering doing something like that this year, we will let you know! Thanks for your interest.
Wow! This is really engaging and feels like a story-based video game. You did a great job with having inclusive characters, partners, and options for responses. The text descriptions also help to share the impact of the selections.
This looks so great! I'm looking at doing something similar to your customized summative feedback for an onboarding project I'm working on. I'd love to understand how you made the page look so organized if feedback wasn't needed (ie. no blank spaces). Did you have all the possible combinations and permutations of states or layers? Thanks so much for your insight!
Apologies we missed this! I imagine you probably found your own way to do this by now, but I'll share how we did it in case anyone else is curious. If no feedback was needed it would actually go to a different slide. There were 3 possible different ending videos, so depending on what their score was and which variables were activated they would see a totally different video slide followed by their custom feedback.
¡Buen trabajo! Gracias
I love this idea, starting from the graphics, animations, and voice-overs. The real-life scenarios were really engaging, and adding great animations yielded a fantastic result.
Awesome work! Thank you so much for sharing!
