Can You Communicate Efficiently?

I developed this scenario-based eLearning concept project for a mid-sized school district’s Central Office Leadership Team. This project helps the team practice selecting the most efficient communication tool when interacting with other departments, principals, and teachers.

Audience: Central Office Leadership Team (department heads and coordinators)

Responsibilities: Instructional Design, eLearning Development, Visual Design, Animation / Motion Graphics, Sound Design

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

Overview

A mid-sized school district with 1000+ employees was experiencing district-wide communication problems. Their employees were using email for almost all communication, rather than using the most efficient tools available to them in the Microsoft 365 suite.

This over-reliance on email led to lost information, wasted money on unused tools, and unaddressed school needs.

We discovered that the employees were aware of the available communication tools and even knew how to use them, but they sent emails instead because it was more comfortable.

We determined that the majority of emails in the district were being sent by the Central Office Leadership Team. This team consists of department heads and coordinators who communicate with the superintendent, other Central Office departments, principals, and teachers.

We decided to help this group practice communicating more efficiently because it would have the biggest impact on district-wide efficiency.

I proposed a scenario-based eLearning course that would allow the Leadership Team to make real-world decisions regarding which communication tool to use in various situations. After making choices, they would see the consequences of their choices in a low-risk setting.

I also proposed incorporating several animations that highlight the consequences even further (and make the scenes more immersive). The client approved and we proceeded with design and development.

Process

I began the process by working with the Subject Matter Expert (SME) to create an action map. After determining the top actions that the learner should perform, I created the text-based storyboard. Following approval from the SME on the text-based storyboard, I designed the visual mockups using Adobe XD. Using the text-based storyboard and visual mockups, I created the visual storyboard with included programming notes.

I designed five different animations that highlighted the positives or negatives of each tool. These animations include strategically placed sound effects to immerse the learner as they interact with and watch the consequence play out. It was important for this project to show, not just tell, the learner the results of using each tool to help facilitate real-world behavior change.

I then created an interactive prototype in Articulate Storyline. After incorporating the feedback from the SME on the prototype, I developed the project in Storyline.

Action Map

I created an action map with the SME to identify the actions that the learner should perform in order to complete the goal. Once we determined that over-reliance on email when communicating was the problem, we worked together to establish the situations in which email was being used inefficiently and which communication tool to use instead. Using this information, I created an action map that focused on the three most impactful actions people could take to communicate more effectively.

Text-based Storyboard

Choice C: Create a space on Teams for everyone to collaborate and share their feedback.
(fade to black…fade in)
Consequence Part 1: Two months later, the superintendent requests preliminary results from the program. You scroll through the Teams chat and summarize the main three points of feedback, then post to the team to make sure everyone agrees with your conclusions…(fade out)
Consequence Part 2: (fade in animation of Teams chat) – You post your conclusions on the team page requesting feedback. [Messages come in “This looks great” “_________”, etc.](fade out…fade in)
Consequence Part 3: The superintendent is impressed with your comprehensive report and decides to continue expanding the program.
Ask Kelly: When working on a project with a large team, it is helpful to have project-specific discussions all in one place. Creating a project team in Microsoft Teams allows people to post and comment in real-time (avoiding a long thread with multiple topics). And the best part? Everything is easily searchable!
Prompt: The school board has requested an update on one of your projects for tonight’s School Board Budget Committee meeting. During this meeting, they will vote on a revised budget for the project which increases your funding. The superintendent has asked you to give the presentation.
Question 2: You need to gather information from each department involved in the project and put together the presentation before the 6pm meeting. What will you do?
Choice A: Send a Forms link to each department asking for their updates so you can create the PowerPoint presentation.
(fade to black…fade in)
Consequence Pt. 1: At 4pm, you sit down to copy and paste the information from the Form. This process goes relatively smoothly…
(fade out…fade in)

Once the action map was complete, I worked with the SME to create a text-based storyboard. Each question was based on the action that we wanted people to practice, and we made sure to situate each question within the real-world context. The scenarios were based on the following problems:

Long-Term Team Projects: The Leadership team was primarily using email to communicate back and forth when working on projects throughout the semester. When past communication or information needed to be retrieved, it was very difficult to sift through email threads (sometimes months-long), leading to missed deadlines and general inefficiency.

School Board Presentations: Various Leadership Team members were regularly asked to present at School Board meetings. When PowerPoint slides were updated through email, information was hard to find and important revisions had been overlooked due to multiple copies of the same document being created and shared. This has led to decisions being made on faulty information and was important for the client to address since it can easily be avoided by using a shared document.

Feedback from Large Groups: Members of the Leadership Team regularly receive feedback from large numbers of school district staff. When receiving information through individual email responses, they would frequently get overwhelmed with the sheer volume and use valuable time to synthesize the feedback instead of using a tool that would synthesize the information autonomously. Important feedback could be ignored and overlooked, in addition to the time wasted.

Feedback screen of project with smiley face and positive consequence

Mentor screen in project with woman's face and text bubble

I designed three scenarios in which the learner would have to make a realistic decision on the most efficient communication tool to use. To make the situations more immersive and realistic, I incorporated storytelling elements and mirrored the real-world context.

Working with the SME, I designed the consequences of each scenario to highlight the results of each choice. For example, to drive home the inefficiencies of using email, I created an animation sequence that showed an inbox quickly filling up with emails. This realistic animation shows what it is like to be bombarded with email responses and how quickly a full email inbox becomes overwhelming.

Along the way, the learner would be able to ask the mentor character for help if they were unsure of what to do in a situation.

Visual Mockups

Once the SME approved the text-based storyboard, I designed the visual mockups for the project in Adobe XD. Adobe XD allowed for quick iteration and easy sharing to make improvements to the visual design of the project. I was quickly able to incorporate feedback from my peers into the slide designs.

One of my design goals for this project was to focus the learner’s attention on various animation scenes that would help illustrate the results of their choices. I accomplished this by keeping the overall project design clean and minimal and incorporating more color into the tool animations to make them the visual focus of the course.

My goal was to make the different Microsoft tools easily identifiable while sticking to the minimal and simplistic style of the overall project. I designed multiple iterations of each program interface until settling on using the main color of each program in the heading bar along with Microsoft’s default font throughout the project.

I continued to iterate each slide type based on the feedback I received, improving the various slide layouts, button colors, and hover states. I edited the cover photo, desk background, computer background, and profile pictures with Adobe Illustrator.

Visual Storyboard

Once I received approval for the visual design, I created the visual storyboard. The visual storyboard combined the text-based storyboard with the visual mock-ups. I also included programming notes indicating the text, graphics, and navigation that appeared on each screen.

Interactive Prototype

I created an interactive prototype for the project through the first scenario (along with each tool animation slide) using Articulate Storyline 360. Throughout this process, I received feedback from the SME and my peers as I continued to refine the animations and course design.

I used the interactive prototype to refine each slide layout and animation, making sure that the triggers and variables worked as designed.

I received instructive feedback from a test user to include a way for the learner to participate in each animation. To accomplish this, I added an interactive button to each animation slide, placed at a strategic moment, for the learner to select and perform the action they chose.

By creating the interactive prototype in this way, I was able to iterate on my designs before creating the entire project.

Full Development

As I had already designed each slide type in Storyline during the prototype stage, I had a solid platform on which to build the rest of the project. I began by recreating each of the remaining two scenarios using the blueprints from the prototype.

Creating the flashing email interactive button was a tough challenge that I solved by trial and error. Combining several different ideas, I solved this challenge by ending the base layer timeline at the moment the learner needed to interact with the slide. I then added a slide layer where the interactive button would flash continuously using variables and conditions. When the learner clicked on the button, the next slide would appear.

Making the animation scenes immediately recognizable as Office 365 programs within the overall minimalist project theme was a large part of the development process. However, this effort paid off because the animations allowed for the learner’s decisions to come to life. Making these scenes interactive gave the learner a way to interact and participate in their own decision-making.

As all the animations were created in Storyline, some of the difficulties that I dealt with were the complexity of each animation and keeping each timeline organized. The animation slides had many different elements that needed to be animated and matched up with sound effects.

I placed sound effects throughout the animations to make the consequences a full audiovisual experience. These sounds were especially important during the email consequence in the third scenario. Hearing the notification ding come faster and faster each time an email response appears really drives home the inefficiency of using email for feedback.

I grouped elements together and organized the timeline so that the static elements were at the bottom of the timeline and, as each element was introduced, they would stack on top of the previous element in the timeline. This system allowed me to easily build out the animations and quickly make adjustments to the timing of individual elements without disruption or getting confused.

Results and Takeaways

I learned a lot by going through the entire development process for this project. Working with the SME on the Action Map was the most helpful aspect of this project. It took time and multiple iterations to distill the most impactful situations and make sure that the Action Map was focused on the actions the learner needed to perform. However, the clarity and direction the Action Map provided was crucial to the success of the entire project.

If I were to do this project again, I would build out a few more common scenarios for learners to practice choosing efficient communication tools as each tool has its strengths and weaknesses depending on the situation.