Emotionally Supporting Students

I designed this scenario-based eLearning experience to help middle school teachers support students that are feeling overwhelmed.

• Audience: Middle School Teachers

• Responsibilities: Analysis, Instructional Design, eLearning Development

• Tools Used: Articulate Storyline 360, Adobe XD, Adobe Illustrator, MindMeister

• ID Models Used: ADDIE & SAM

Overview

Teachers often do not know how to provide support to students who are feeling overwhelmed (crying, panicking, or shutting down), yet they are often the first to interact with an overwhelmed student.

I analyzed disciplinary referrals, counseling referrals, and attendance records to confirm that teachers needed to practice providing emotional support to students. Bridging this skill gap would help teachers build supportive relationships with students and avoid missed instructional time.

To accomplish this, I proposed a scenario-based eLearning experience. This type of eLearning experience would immerse teachers in a risk-free environment and help them practice making the right choices. Learning these strategies will help them feel more confident in their ability to respond to an overwhelmed student effectively.

In this eLearning experience, the learner navigates through a school-based scenario where they are tasked with supporting Sally, a middle schooler that is feeling overwhelmed.

Throughout the scenario, learners are presented with realistic teacher-student interactions where they must choose the most suitable teacher response out of several offered.

The learner will see the consequences of each choice and will receive constructive feedback that can be applied to real-life situations with students.

Process

I consulted with two subject matter experts (SMEs) from the mental health team at Trotwood Middle School in order to learn about the emotional needs of students in their building. We also discussed common mistakes that teachers make when they interact with overwhelmed students.

We agreed that a scenario-based eLearning experience would be an ideal fit for delivering this eLearning experience. It would let teachers practice the necessary strategies in a risk-free environment.

My workflow included:

• Defining the eLearning experience goals via action mapping in Mindmeister,

• Mapping out the learner pathways leading to varied consequences via visual and text-based storyboarding in GoogleDocs,

• Defining the eLearning experience tone, visual design, and functionality via iterative prototyping in Adobe XD, and finally,

• Developing the interactive prototype and end product using Storyline 360.

Action Map

After consulting with the SMEs, I created an action map using Mindmeister to hone in on the top six skills teachers would need to develop in order to effectively support an overwhelmed student.

During my initial meeting with the subject matter experts (SMEs), I asked them to define the skills that are necessary for teachers to gain. I took detailed notes during this conversation and mapped out each skill mentioned.

Through action mapping and further collaboration with subject matter experts, I narrowed down this list into observable actions that teachers could perform in order to meet the defined goal.

These actions included:

• Self-regulation before response

• Use a calm, even tone

• Get down on the student’s level

• Say “I’m here for you, how can I help”

• Offer a sensory break, and

• Offer the choice of a replacement support person if they cannot provide the support themselves.

Text-Based Storyboard

After action mapping was complete, I developed a text-based storyboard to detail the copy and visual notes for the eLearning experience. All prompts, questions, and consequences were written exactly as they would appear in the final eLearning experience along with visual notes to indicate slide background and slide transitions.

In the eLearning experience, teachers will navigate through five decisions where they are offered one correct and two incorrect choices. All choices lead to a consequence slide to show would happen as a result of each choice, but the incorrect choices ask the user to “Try Again” until they select the correct response. This allows teachers to see the emotional impact of their choice of words, tone, and body language during student interactions.

To make the scenario more engaging and educational, I developed a mentor character named Eva. Eva is a school counselor that is available to provide support and suggestions, at the user's discretion, on each question slide. Eva’s introduction and guidance at each question were also detailed in the text-based storyboard.

Visual Mockup

To design the visual feel of the eLearning experience and keep the colors consistent, I edited vector graphics in Adobe Illustrator. I then designed a layout for each slide type using Adobe XD.

My key goal was to create a feeling of trust and warmth throughout the eLearning experience. This is precisely why I chose blue as the main color of the eLearning experience, which represents trust and loyalty.

I kept the eLearning experience navigation simple and maintained a universal button design throughout the eLearning experience. The user has some anonymity throughout the eLearning experience to preview past prompt slides prior to making an answer choice. This allows the user to feel a sense of control as they move through the eLearning experience.

After creating the initial iteration, I sought feedback on the eLearning experience design and functionality and made changes accordingly. These changes included adding hover effects to all buttons and consistent spacing throughout all text boxes. I conducted three more rounds of feedback and iteration before settling on the final design.

Visual Storyboard

To aid in the transition from design to eLearning experience development, I created a visual storyboard to further solidify the flow and functionality of the eLearning experience. For the visual storyboard, I included the slide copy, button functionality, and visual design for each individual slide.

This step helped me further organize the eLearning experience flow, particularly the introduction of the eLearning experience mentor, Eva. By documenting every detail, I was able to identify conflicting elements and save time during the development phase.

Prototype

With the visual design, copy, and functionality set, I moved on to the development of the eLearning experience. I started development in Articulate Storyline 360 where I imported the three settings (classroom, counselor’s office, and hallway) and characters from Adobe Illustrator into Storyline.

Once the graphics were imported, I developed the prototype through the second question prompt. This allowed users to experience all three settings, each type of prompt slide; a question slide, a consequence slide, and the Ask Eva mentor feature.

Once complete, I elicited feedback from other designers, peers, and SMEs. I was given feedback on the hover state of buttons, the previous button design, and slide transitions between settings. All feedback was thoughtfully considered and implemented, if relevant.

Full Development

There are two features of this project that I am particularly proud of.

First, I wanted a flashing feature to guide the user to click on the “Ask Eva” button to practice how to access the mentor, should they need her guidance. I created this feature using looping layers, hotspots, and conditions.

Second, I wanted the user to be able to review the key strategies at the end of the eLearning experience. I created a review sheet that linked to the mentor feedback layers provided throughout the eLearning experience to accomplish this. I wanted the user to feel as if they were having a conversation with the counselor about the interaction they just had with a student. This feature allows the user to access the mentor guidance even if they chose not to throughout the eLearning experience.

Results and Takeaways

Overall, the development process went more smoothly than anticipated. This was largely due to the number of iterations and feedback cycles completed prior to final development.

Two major obstacles that I had to overcome included learning how to edit and export vector graphics using Adobe Illustrator and prototyping using Adobe XD. I consider myself to have a keen eye for visual design but making my vision a reality was more difficult than expected.

Nevertheless, I am now confident in my new skillsets. I was particularly pleased with how Sally’s emotions changed throughout the eLearning experience based on the learners' choices. This required cohesive character sizing and precisely timed animations to achieve.

The SMEs thoroughly enjoyed the eLearning experience and thought that it would be a great way to train teachers on the skills needed to support overwhelmed students. The eLearning experience implementation is set for next month.