Nate Designs

Menu
Let's Talk
View Demo

Project Overview

This scenario-based e-learning concept project was developed for a training & development firm, to train its staff on how they can give each other feedback after closing projects.  The course allows the learner to navigate through several real-life corporate scenarios where they have to make choices and experience the real-life consequences of their actions. 

  • Audience: Firm Staff
  • Responsibilities: Instructional Design, E-learning Developer, Graphic Designer for visuals & mock-ups
  • Tools: Articulate Storyline 360, Adobe Illustrator, Adobe XD
  • Images: www.freepik.com/ and undraw.co/

Problem & Solution

The firm reached out after finding out that employees were experiencing conflicts due to how they were giving each feedback after working on a project together. This issue was contributing to a lack of team spirit and inefficiency when it came to achieving team goals. 

I proposed a scenario-based e-learning experience that would allow employees to make real-life decisions throughout a typical process for providing feedback among colleagues.

Process

I approached this project by consulting an SME to inform my text-based storyboard. I then created visual mock-ups using Adobe XD which also informed the visual storyboard of the project. 

During the revision of the visual mock-ups, I developed a prototype in Articulate Storyline 360. After getting feedback on the prototype, I finalized the project in Storyline while also making minor adjustments where it was necessary. 

Action Map

After discussing the problem and the proposed solution, I started my consultations with the SME to determine actions that were poorly performed and actions that needed to be taken to deliver feedback properly. 

While discussing, I created an action map. From the action map, I came up with different scenarios that staff always encounter in their daily work life so that they can make choices and see the real-life consequences of their choices. 

Text-Based Storyboard

Building on the action map and the proposed scenarios, I created multiple different real-world consequences for each scenario to show the learner the results of making the choice they made. I also created a character who guides the learner throughout the course. 

As the learner makes a choice in each scenario, the multiple real-life consequences are triggered to give feedback to the learner on the choice they made. Also, the learner is given the choice to try again and make the right choice.

Visual Mock-ups

I used Adobe XD and Adobe Illustrator to create visual mock-ups. Because the course allows the learner to make choices, the goal was to create a strong contrast between the background image and the text background. 

I chose the red color for the “negative” real-life consequences feedback to draw the learner’s attention to the consequences so that they can avoid making those choices in real-life, especially at work.  After the initial iteration, I addressed feedback from other designers by including visuals on each feedback slide to give learners a sense and feel of their choices.

Visual Storyboard

With the overall visual design and the text-based storyboard, I created a visual storyboard. 

I included programming notes by specifying all interactive events in the course that would be needed for the project to run. Adding all details to the visual storyboard made the development process smooth and took a short time to build in Articulate Storyline 360. 

Full Development

I started by building a prototype in Articulate Storyline with examples of key interactions so that I can get feedback and address it. To create slides, I designed a static background in Adobe XD and imported it into Articulate Storyline whereas triggers were directly from the storyline. 

Some of the feedback I got was that the font size was too small, there was no strong contrast between the slide titles and the text body, and some of the layers were showing at the wrong time. So, I addressed the feedback by bolding the slide titles and increasing the font size. I also reviewed the triggers to make sure that layers are showing correctly. 

After addressing the feedback, I finalized the project in Articulate Storyline. The project was not complex, so I only worked with one scene. Then I published the course and reviewed the course multiple times to make sure that all triggers are responsive

Screen Shot 2022-06-13 at 15.57.29
Screen Shot 2022-07-26 at 13.42.57
Screen Shot 2022-07-26 at 13.39.25
Screen Shot 2022-07-26 at 14.50.33
Screen Shot 2022-07-26 at 14.50.48
Screen Shot 2022-07-26 at 14.51.01
Screen Shot 2022-07-26 at 14.51.21
Screen Shot 2022-07-26 at 14.51.34
Screen Shot 2022-07-26 at 16.15.05
Screen Shot 2022-07-26 at 16.15.25
Screen Shot 2022-07-26 at 16.15.45

Takeaways

I had fun working on this project as I developed more skills while using both Articulate Storyline and Adobe Illustrator. I am proud of the outcome, but one area that I struggled with is creating so many slides and getting the right visuals that convey the relevant message. But, I am sure that for the next project I’ll be able to address this feedback. 

If I could do this project again, I would reduce the number of slides, use layers instead, and add animations to make it more interactive for the learner. While working on this project, I got a good sense of how to formulate scenarios and create multiple choices by exploring all possible outcomes of just one scenario. Now I feel confident that in future projects, I will create improved scenario-based e-learning courses.