Overview

Audience: New international students starting classes in the winter
Learning Outcome: By completing the learning activity, students would be able to identify winter weather basic precautions when it comes to dress attire, commuting around town, and staying healthy.
Responsibilities: Instructional Design, eLearning Development, Visual Design, Storyboarding, Action Mapping, Prototyping
Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, Microsoft Office, Notability

A client working in a role supporting international students at a university in Canada wanted an interactive eLearning solution for students to use as they transition to being a university student at their institution. They originally had this content as part of a larger PowerPoint presentation facilitated by a staff member. The client was interested in developing an activity for students to do online at their own leisure. By completing the eLearning activity, students would be able to identify winter weather basic precautions.

After analyzing the learning restrictions the current PowerPoint format provided, I proposed a scenario-based eLearning experience where students would practice identifying how to dress, what to watch out for while commuting, and how to stay healthy during the winter. I suggested framing this activity around a University guide leading the experience for the student and to section each theme (dress, commuting, staying healthy) in its own scenario, transitioning from one to the next.

The client accepted my proposal and we proceeded with the project.

Process

Action Mapping

I consulted with the client who was the subject matter expert (SME) to develop the action map and establish an overall goal and roadmap. We decided on the activity having a simple completion method since all students would complete this as part of their transition as an international student. The required actions for the activity were identified for each theme for students to gain a clear understanding of navigating winter weather in Ottawa.

Text-Based Storyboard

With the action map approved, I wrote a text-based storyboard to incorporate these key actions into a cohesive narrative.

I framed the scenario as the student just settling into their residence hall (dorm) and their University guide would support them by giving them a tour around town. I consulted with the SME to make sure each element of the scenario was relevant and realistic to the international student experience at their University.

Although there could have been many situations that would bring up precautions for the student to be aware of, I focused on basics every student would commonly encounter.

The first themed scenario was set in the student’s bedroom to focus on what to pack and how to dress before going out in wintry weather. Students would be asked multiple choice questions. Selecting an incorrect choice would require the learner to try again.

The second themed scenario took place outside in the city to focus on what hazards to watch out for. The third themed scenario happened in the kitchen of the student’s dormitory to point out foods and items to consume to stay healthy. Both scenarios were point and click-based. This involves the learner to hover over areas until they noticed it glowing to spot and click to expand the lessons being taught. For example, the student learner would click on glowing snow on the ground, which engaged a pop-up to appear with information on needing to watch out for that type of hazard. All areas would have to be clicked on before being able to move on. Student learners could revisit the scenario if they wanted to or proceeded forward when all aspects of the scenario activity were completed.

In all scenarios, student learners could get help or a tip if they got stuck.

Visual Mockups

After the text-based storyboard was developed and approved, I created visual mockups for the scenarios in Adobe Illustrator and Adobe XD. Adobe Illustrator allowed me to curate and edit the vector images into a cohesive set of image assets. The visual style was established to maintain consistency, resulting in a custom color palette from the background to the characters. Adobe XD allowed me to experiment and compile visual elements to define a logical narrative-driven layout that would easily transfer over to Articulate Storyline.

Buttons, prompt boxes, and font was also determined at this stage to complete the look and feel of this project.

I then recreated everything in Articulate Storyline to begin making the activity interactive.

Interactive Prototype

Using the visual mockups and storyboard, I used Articulate Storyline 360 to create an interactive prototype with proper actions programmed. The prototype consisted of a title screen, scenario introduction, and University guide introduction, before transitioning to the first themed activity.

I integrated transitions, animations, and some sound effects fitting to the look and feel for each prompt and slide element for additional immersion. For instance, when a student learner got an answer wrong to any multiple choice questions, the University guide character would have a different facial expression.

With the framework programmed and established, I shared the prototype to the client and sought feedback on the look, feel, and overall experience of the project. The reception was positive, with some suggestions such as integrating relearning opportunities and a more immersive exit to fit the theme I created. I moved on to full development after all the feedback was processed.

Full Development

The full development of the scenario happened using Articulate Storyline 360. It was straightforward and efficient since all the elements had been created and a programming framework for each consequence was established. There was some back and forth at times to experiment and determine what trigger actions would be best. Running through the full development highlighted some minor additions needed to make sure the animated version flowed properly. This resulted in summary prompts before moving onto the next activity.

Experience it Yourself

FEatures

Custom Visuals: An image repository was used to source visual assets. I edited them using Adobe Illustrator to maintain immersion and a cohesive look. This included resizing, editing layers, replacing other vector assets with more theme fitting ones, recoloring individual elements, and merging assets.
Prescriptive Feedback – University guide: In each scene with an interactive activity, the student learner can access their university guide to provide suggestions for their responses. This guide helps steer the learner toward the correct answer or behavior while providing explanations for why that choice is effective. I created the custom guide button using Adobe Illustrator to incorporate the University guide cleanly into each question prompt.
Hover and Click Labeled Graphics: I incorporated hover over and click features in two of the scenes involving those elements. To achieve this, I created a hover state with individual graphics glowing in Articulate Storyline and then duplicated the same graphic with a normal state that glowed. Then through unique triggering and variables, I made it possible for the previously clicked graphics to remain glowing to help the learner identify what has already been clicked.
Custom Variables: To use additional prompts in the same scene as layers in Articulate Storyline, custom variables were added to program two outputs: 1. Learner can click on hover and click labeled graphics in any order and the activity will know when all have been clicked to trigger a summary prompt to move on. 2. An exit sequence that would play the Zoom outro sound before exiting the project.
Custom Sounds: Sourced sound effects from a sound repository to connect to various scenes during the intro, introduction to the next scene/activity, and to exit the project. The sounds were edited by clipping, level adjusting, and added fades.
Scenario Branching: For the Bedroom – Getting Ready To Go Out scene, the scene included questions which prompted the learner to select the correct answer. Incorrect choices would lead the learner to prompts and information from the University guide to guess it right by trying again. Once the correct answer is selected, the learner will be prompted to continue to the next question.

Results and Takeaways

I shared the completed project with the client, and it was positively received. Along with being shared with the client’s colleagues, they really enjoyed the overall interactive abilities and immersive style. They were satisfied with how it veered away from the sit-and-get type PowerPoint presentation they were accustomed to facilitating with their students. Since this project was completed at the start of the Fall semester, it will be a few months before any international students start in the Winter, so further results will have to be determined at a later time.

When taking into consideration of potential improvements for a future iteration of this project provided with more time and resources, there are several possibilities:

Increased Audio Elements: There was consistently positive feedback around the sound effects included. An expansion opportunity would be to narrate the prompts where the University guide is talking. It could add another layer of immersion and provide an additional type of learning delivery on top of just reading text.
Expanded Situations: This project featured only a few scenarios with simplified knowledge. There is opportunity to either turn each of those themed scenarios into its own expanded experience, or, to add more questions or situations within the same themes.
More Customized University Characters: If the client ever wanted to, there is the opportunity to integrate the University’s mascot for example. It would involve working with their University’s branding office to gain permission, but it would add another customized element and tailored feel just for this University’s students.
SCORM Integration: Since this interactive experience is a new approach for the client, they are using this completed project as a supplemental tool that be accessed by a link. There is an opportunity to support the client in adding this project to the University’s learning management system (LMS) if they choose to use that resource.

This project provided me with the opportunity to work with a SME, integrate feedback, and utilize a wide variety of instructional and graphic design tools. I had a lot of fun engaging in a more graphic-based design approach, which was an area I wanted to get even more experience in considering I have done more videography, live-action, and screen capturing based learning content.

Winter Weather in Ottawa