Nurse Navigator
I designed this scenario-based eLearning concept project for newly-hired nurses. Within the learning experiences, nurses are able to practice upholding medical compliance and applying de-escalation skills using the A.I.D.E.T. framework of communication.
Overview
Audience: Newly-hired nurses
Responsibilities: Instructional Design, eLearning Development, Visual Design, Storyboarding, Action Mapping, Prototyping
Tools Used: Articulate Storyline 360, Adobe Animate, Adobe Illustrator, Adobe XD, Canva, MindMeister, and Google Suite.
The Problem
Eden Memorial Hospital (a fictitious client to maintain confidentiality) noticed that their new nurses were receiving poor performance ratings from stakeholders. This led to costly consequences, including lawsuits filed for malpractice and lost customer faith.
After analyzing the performance problem, I confirmed that the nurses lacked the skill and knowledge required to provide proficient bedside-manner and medical care. I proposed a scenario-based eLearning experience where the nurses could practice speaking to upset patients and de-escalating the situation.
The Solution
Our goal was to improve patient satisfaction and reduce the financial impacts of the problem by providing new hires with a risk-free environment to make choices and see consequences. This helps the learner connect their choices with the real-world consequences. I also proposed incorporating a gamified “mood meter” that reveals the patients emotional well-being. Finally, I suggested presenting customer satisfaction surveys based on the learners’ choices; this mirrors the reports that nurses would see on the job. The client accepted my proposal and we proceeded with the project.
Process
Action Mapping
I consulted with a number of experienced nurse as my subject matter experts (SME's) to develop the action map and establish the overall goal for this project. We decided to measure progress by monitoring the customer satisfaction survey data. We then pinpointed the actions required to help nurses de-escalate tense scenarios and reduce patient complaints.
Text-Based Storyboard
Once the action map was completed and approved, I began working on a text-based storyboard that incorporates these key actions into a cohesive narrative. I framed the scenario as a nurses first day on the job, and I consulted with the SME to ensure each element was grounded in reality.
Although there are several possible situations that may require de-escalation, I chose a patient being angry over delayed care, customer service, and failure to uphold medical compliance. Question prompts appear featuring correct choices and realistic distractors as the learner goes through the scenario. I incorporated a mentor to provide assistance and simulate the guidance of a veteran, charge nurse.
Selecting an incorrect choice would require the learner to either try again immediately or lead them through an extended sequence where they must clock out and a customer satisfaction report appears, providing feedback. This approach highlights a variety of realistic outcomes, including a newspaper headline of malpractice from the hospital and a lawsuit- a worst case outcome for hospitals.
Visual Mockups
Once the text-based storyboard was revised and approved, I began creating visual mockups for the scenario using Adobe XD and Shutter Stock. With character sets and backdrops from shutterstock.com, I experimented with visual elements and layouts in order to settle on something that felt polished and easy on the eye.
I created and maintained a consistent visual style for each element, down to the background, detailed signage, and characters. I also created a custom color palette based on my title slide’s background illustration and got to work on editing each asset to match the color scheme using Adobe Illustrator, a vector editing software.
Another priority was to maintain a linear narrative, which meant sourcing and editing three different hospital settings to have realistic movements from clocking in, the main hospital wing, and a patient room. Lastly, I designed the prompt boxes, buttons, and font to reinforce the goal of de-escalation, which led to the minimalist prompts and subtly rounded corners.
Satisfied with the look and feel of my mockups, I developed a visual storyboard to combine the visual mockups and text-based script. Then, it was time to recreate everything in Articulate Storyline 360 to further refine the elements and implement interactivity.
Visual Storyboard
The visual storyboard allowed me to combine my visual mockups created in Adobe XD and Illustrator with the text-based storyboard to have all elements conveniently organized in one place. Here, I defined the programming for each slide and prepared to develop the interactive prototype.
Interactive Prototype
I used Articulate Storyline 360 to create an interactive prototype using the visual mockups and storyboard to establish the scenarios programming. The prototype consisted of the title screen, scenario introduction, mentor introduction, and multiple scenarios
I incorporated smooth transitions and crisp animations for each prompt and slide element to maintain narrative immersion. I also prototyped custom animating of the mood meter moving and ambulance speeding by to assimilate Articulate 360 motion paths and Adobe Animate.
The prototype also included the first implementation of the mood meter that was used to visually gauge the patient's reactions to the learner’s choices.
I circled back to my SME's and colleagues to determine the content and visuals were accessible and appealing. The reception was positive and I made minor adjustments to tighten the transition times and to add audio to bring a buzzing hospital to life. I moved on to the full development once I was content.
Full Development
Features
The full development of the scenario in Articulate Storyline 360 was smooth and efficient now that all elements had been created and the programming framework for each consequence was established.
Custom Visuals:
I sourced each visual asset from an image repository and Shutterstock and edited them using Adobe XD to maintain a polished look. This included resizing, editing layers, recoloring individual elements, and adding fine detail customization.
Custom Animations:
I achieved the ambulance animation sequence by importing the customized ambulance vector and setting it along a motion path. I was also able to do this within Adobe XD. I also sourced a heart monitor graphic and audio from Canva. These animations jumpstart the nurse's shift .
Prescriptive Feedback:
For each question, the learner can access a mentor named Nurse Naomi to provide suggestions for their responses. This mentor helps steer the learner toward the correct behavior while providing explanations for why that choice is effective. I created the custom mentor button using Articulate 360 to incorporate the mentor cleanly into each question prompt.
Patient Satisfaction Reports:
In addition to the mood meter, customer satisfaction reports are earned and presented at the end of the experience. The learner is initially shown a five-star rating scale followed by a detailed response from the patient. There are two different reports a learner can see depending on choices selected. Each detailed review provides clues for the learner to help answer the question correctly if they got it wrong.
Scenario Branching - Clocking Out:
I achieved this feature through creating layers within Articulate Storyline 3. For example, one of the incorrect choices in Question 2 leads the learner to Question 2.5 where the situation has escalated significantly and they have one last chance to de-escalate. Correctly answering this question allows the learner to re-try Question 2, while incorrectly answering this question causes the learner to "clock out" and see a newspaper headline about a nurse/patient altercation. I created a newspaper to show for this outcome to simulate the disastrous media attention of hospital incidents while patients are under care.
Gamification - Patient Mood Meter:
I incorporated the anger meter as light gamification to help boost learner engagement and contextualize the emotion of the passenger’s dialogue. Seeing the meter increase or decrease alongside choices provides immediate feedback while building toward the customer satisfaction reports. I made the decision to have the meter decrease with correct choices in order to parallel the intended de-escalation of the patient's anger.
Results
Since its release, numerous users have gone through the whole learning experience. I’ve got great feedback from users on the visual design, the storytelling and the instructional design. They especially appreciate the opportunity to get a final overview with personalized feedback about their choices.
This featured project provided me with the opportunity to work with SME's, collaborate with peers, integrate feedback, and learn new programs and tools. I have grown significantly as an instructional designer and eLearning developer, but most importantly, pushing myself creatively and methodically brought me great joy.
I'd like to do the same for your organization.