How to Apologize - Interactive Game-Based Scenario

Nov 29, 2023

Hot Neon
By Hot Neon

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. 
 
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. 
 Feel free to reach out with any questions! 
8 Replies
Bianca Woods
4 months ago12/19/23 at 9:10 pm (UTC)

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.

Stephanie Blair
4 months ago01/08/24 at 2:50 pm (UTC)

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! 

Sign In to Reply