Managing headache: scenario-driven learning experience

Audience

  • Office-based workers suffering from headache


Roles

  • Instructional design
  • E-learning development
  • Needs analysis
  • Storyboard / script
  • Visual design
  • Animation
  • Audio production


Tools & technologies used

  • Adobe XD
  • Articulate Storyline 360
  • Vyond
  • Adobe Photoshop
  • Adobe Illustrator
  • Audacity
  • JavaScript
  • Mindmeister

Overview

It is estimated that 25 million working and school days are lost every year in the UK due to migraine alone. An estimated 157 billion workdays are lost in the U.S. each year due to migraine. Healthcare and lost productivity costs caused by migraine could be as high as $36 billion annually in the U.S.

Even though 50 to 75% of adults aged 18-65 years are estimated to have had headache in the last year, headache sufferers often do not follow the most effective course of action to lesser the impact of the disease on their professional and personal life. This also applies to employees of large companies who are currently not guided and supported by their employer on how to successfully manage headaches, which results in increased headache and migraine-related absences.

This learning experience is a demo course for office workers of large corporations. The main objective it aims to achieve is reducing the rate of headache-related work absences.

I decided to create a scenario-based experience, which allows learners to make decisions on how to manage a painful disabling headache on a typical, busy day of life of an office-based worker in a large corporation.

Process summary

I initiated this project by teaming up with a headache Subject Matter Expert to create an action map for the experience. This informed and shaped the text-based storyboard, which I wrote subsequently. The next step brought me to creating visual mock-ups, which I designed in Adobe XD. I then used the mock-ups to develop a functional two screen interactive prototype of the experience in Storyline 360. In the second-last stage, I kept tweaking the interactive prototype until I was 100% satisfied with the result and proceeded to building the whole experience. Finally, I have thoroughly checked the output for any bugs and errors.

Action map

I used the action mapping framework established by Cathy Moore (https://blog.cathy-moore.com/). This approach focusses on identifying observable actions and factors affecting the problem which the e-learning experience aims to solve. I worked closely with the Subject Matter Expert to develop an action map of problems and obstacles a headache sufferer may encounter in the workplace setting, as well as listing the choices they face and the consequences of these choices. We then proceeded to narrow down and prioritize the actions to include in the learning scenario. We classified the actions of the greatest importance as those of identifying the individual person’s headache / migraine triggers and actively avoiding them, either by making personal lifestyle choices or communicating their particular needs to the employer.

action map

Text-based storyboard

When the action map has been completed, I moved to creating a text-based storyboard. I decided to include animated Vyond videos with audio narration to start and end the course, in order to enhance the narrative. I consciously used this approach as it follows Richard Mayer’s  modality principle stating that humans learn best from visuals and spoken words than from visuals and printed words.

I built the scenario mechanism around presenting three choices for each decision (one correct and two incorrect) and showing the ensuing consequences. When a learner chooses a wrong action, they are presented with real-life consequences. Through a ‘Try again’ button they are brought back to the decision screen. The decisions and choices have been agreed with the SME and stemmed from the pain points and actions identified on the action map, reflecting the lifestyle choices affecting headaches and highlighting the importance of openly communicating with the employer on the subject of the illness.

I introduced a ‘mentor’ character providing relevant advice to learner on each screen. I decided to call the character Professor Ed Ache, a playful pun on ‘headache’, to inject fun elements into the scenario, and increase learner’s engagement.

Another humorous part I added to the instructions  screen at the beginning, shows Prof Ed Ache forgetting where he left his glasses and then putting them on. The rationale behind it was to show a mentor who is knowledgeable but also approachable.

The lines I wrote for Professor are quite casual, as I deliberately steered away from the typical clinical language often used by medical professionals. This is in line with Mayer’s personalization principle which states that people learn better when words used in multimedia  training are in conversational style rather than formal style.

Text storyboard screenshot

Visual mockups

Once the text-based storyboard has been approved by the SME, I moved on to designing visual mockups in Adobe XD (for Storyline content) and in Vyond (for animated videos).

I created a coherent colour scheme, choosing a calm spectrum of colours, including several hues of blue and an accent complementary muted red:

colour scheme

For style and branding consistency I opted to use the characters created in Vyond in the ‘choice’ and ‘consequence’ screens in Storyline. I developed a context-matching style guide in Vyond and created a prototype video scene with the main character, Laura.

I exported screenshots from Vyond and edited in Photoshop to achieve the blurred effect for the ‘mentor advice’ screens, before importing them into Storyline.

Professor Ed Ache’s icon is a stock vector image which I selected to match the style of Vyond visuals, and modified in Adobe Illustrator.

Interactive prototype

Decsion screen prototype screenshot

Once the visual mockups have been completed, I switched to Articulate Storyline 360 to create an interactive prototype, a fully functional set of slides consisting of a decision screen, one choice and one consequence.

I have thoroughly tested the prototype and asked a volunteer to help me  test the end user experience and provide feedback. The feedback I received suggested moving the decision text slightly down the screen, which I subsequently implemented.

Full development

From there I developed the full package, using Articulate Storyline 360 to create the whole package and Vyond to record fully animated videos for the beginning and the end of the experience. I implemented several techniques which I learnt from editing videos, such as using frequent cuts at the most appropriate times and varying the perspective of the camera. I acquired professional audio narration from a voice-over artist and used Audacity to edit the audio files and normalize them, before importing into Vyond.

I also decided to use an instrumental piece of music at the start and at the end of the experience to introduce a relaxed atmosphere, conducive to learning, particularly for learners who experience headache.

In Storyline, I implemented a custom JavaScript code which greets the user with ‘Good morning’, ‘Good afternoon’ or ‘Good evening’ depending on the local time on their device.

The effect of user’s actions on Laura’s headache is reflected visually providing ongoing feedback. Current state of Laura’s headache is indicated by the expression on her face (from tense with pain to fully relaxed) in the bottom-left corner, as well as the number of lightning bolts next to it.

I utilised Storyline variables and triggers to track the user’s incorrect choices and modify the decision screen accordingly.

Follow-up & reflection

I enjoyed developing the animated scenes in Vyond and felt that my skills in using the full functionality of the software have improved, by experimenting with the available features, trying out various cinematographic techniques and considering how they can enhance the experience.

The development process yet again confirmed to me the importance of constantly iterating the prototypes until I am 100% happy with the result. As time-consuming as it was, it has led to a very well thought through and polished final product.

The next step would be to evaluate the experience with a larger group of users and gather their feedback. Also, when the package is rolled out on a larger scale, it would be helpful to conduct a thorough evaluation to gauge the experience’s impact, comparing, for example, the pre- and post- rates of headache absences.

If I had access to a worker suffering from headache, I would also ask for their input to guide the future development of similar experiences.