Cyber Shield: Do you have what it takes to shield your online data?
Audience: Remote employees at a financial company.
Responsibilities: Instructional designer, eLearning development, Action mapping, Storyboarding, Mockups, Visual designer
Tools Used: MindMeister, Google Slides, Figma, Articulate Storyline 360
The Problem
Winland Inc. is a fictitious financial services organization based in Dallas, Texas, with 150,000 employees, 90,000 of whom work remotely. Too many of these workers are unsafely opening suspicious email links, being disconnected from the VPN, and using weak passwords.
Overview of the premise of the simulation at the fictitious financial company, Wilman Inc.
The Solution
Since this is a concept project, I researched cybersecurity risks employers could face. After analyzing performance problems, I found gaps in employees' ability to identify fraudulent emails and suspicious links, and in their skills to implement security measures remotely. Cybersecurity awareness training helps mitigate these concerns. In this specific training, learners get to practice making security decisions in a safe environment in order to make behavioral changes to work safely online.
Jameela, the Cybersecurity Manager of this company explains the problem of security breaches.
Process Overview
I used the ADDIE model to plan and develop the final product with several iterations and ongoing feedback. This included action mapping, designing the storyboard and visual mockups, developing an interactive prototype, and finally, the full development.
Action Mapping
I acted as the SME expert and researched peer-reviewed articles on cybersecurity risks for remote workers. Following proper cybersecurity procedures could decrease malware breaches by 10% within a year. I identified several actions that remote workers can take to mitigate security risks, but for this training, decided on three actions that would have the biggest impact on achieving that goal. Using Mindmeister, I added this goal and three high-priority actions: act on suspicious emails, follow digital security protocols, and use strong passwords. These observable actions emphasize behavioral change by focusing on what people need to do rather than just what they need to know.
Action map of the project showing the three actions to decrease cybersecurity breaches for remote employees.
Text-based Storyboard
Using feedback on the action map, I drafted the storyboard, which served as the project blueprint. In the storyboard, the three actions served as the scenarios, and subactions were the correct consequences that learners needed to determine. Each choice had immediate outcomes and storytelling elements like dialogue and actions made it clear why certain choices were right or wrong. An optional mentor, 'Cyber Shield,' can be accessed throughout each scenario to guide learners. Changes were made to improve understanding and redirect the learner to make a better choice. If the learner selected an incorrect choice, the story followed a direct negative consequence for their choice and gives them another opportunity for understanding.
Storyboard example from Scenario 2: Question 2- Choice A Consequence (Incorrect) tells the story of the consequence and redirects the learner to make a better choice.
Visual Mockups
After storyboarding, I used Google Slides to build a style guide, ensuring a consistent look for the project. To bring the visuals to life, I used Figma to design the different slides. A custom high-contrast color palette helped enhance the storytelling.
-
![]()
Style guide for the project created with Google Slides shows color scheme, text styles, text colors, button options, and mentor button options.
-
![]()
Visual mockups for the project created with Figma shows the title slide.
-
![]()
Visual mockups for the project created with Figma show the title slide, introduction slide, mentor slide, scenario slide, access to the mentor help screen, consequences screens, and conclusion slide.
-
![]()
Visual mockups of the question slide created with Figma.
Interactive Prototype
I used the high-fidelity mock-ups made in Figma as the building block for the prototype. I was able to recreate the layout directly in Articulate Storyline 360, adding interactivity and accessibility features. During this stage, I chunked content into manageable parts and applied animation for clickable components. This strategy would be applied to later scenarios.
Spending considerable time on the prototype ensured that the full development went more smoothly and looked cohesive.
Full Development
After collecting and applying feedback from the prototype, the full project takes learners through an interaction in a financial company where they make decisions based on cybersecurity.
A key aspect of the project was the message interactions between the learner and the office characters. I designed multiple layers so conversations appeared in sequence, making them easy to follow with hidden and normal states.
Results and Takeaway
This concept project provided me the opportunity to broaden my creativity, especially throughout the storyboarding and prototyping phase. Without the storyboarding aspect of the project, it would be difficult to visualize the entire consequence and keep the learning engaging. During the prototyping phase, keeping a consistent design and thinking of the best way to apply the phone conversations were important.
If I were to enhance this project further, I would add audio to create a more immersive experience. Incorporating sound effects for phone conversations or computer pop-ups would make the scenario feel even more realistic.
Overall, I appreciated the expert feedback and the opportunity to think critically about problem-solving.
What People Think
-
![]()
Robert Gutierrez: eLearning Developer and Designer
“Cyber Shield is an outstanding eLearning experience that seamlessly blends engaging graphic design with an interactive, gamified approach to learning.”
-
![]()
Amy Pluto: Instructional Designer
“The smooth flow, thoughtful details, and clean design keep the focus on learning, while realistic scenarios let learners make decisions and experience the consequences firsthand.”
-
![]()
Shekinah Victoria: eLearning and Game Content Developer
“She masterfully applies the Personalization Principle by using a conversational tone that makes the training feel natural and engaging.”
-
![]()
Davis Rideout: eLearning Developer and Designer
“It’s evident throughout her process and final work how masterfully she weaves together Mayer’s embodiment and signaling principles with thoughtful design layouts and intuitive user interactions, ensuring her work is both effective and engaging.”
All About Malaria Tab Interaction
-
Overview: This project is a public health tab interaction about malaria directed towards travelers who are going to high-risk areas. This helps travelers learn about malaria, an infectious disease, and ways to prevent a spread of the illness.
Audience: Travelers who are seeking information on malaria before going overseas.
Responsibilities: Instructional Designer, Storyboarding, Mockups, Visual Designer, eLearning Development.
Tools used: Figma, Articulate Storyline 360
-
Travelers might be overwhelmed by the amount of information presented about malaria, making it difficult to find specific information quickly. To address this problem, this tab interaction allows users to easily click on information that is relevant to them at their own leisure.
-
I applied core principles from ADDIE, SAM, and Backward Design in clarifying what success looked like for the learner. Using the Successive Approximation Model (SAM), I used a rapid design method to test ideas visually. Lastly, I used a backwards design method to determine content, then designing the learning path.
-
I applied my biomedical sciences background as a SME. Using the ‘Foundation for the Support of International Medical Training’ webpage about malaria, I created a storyboard that chunked each section into two paragraphs. I also included a link to the source for further information.
-
After the storyboarding, Figma was used for the style guide and mockup. The tab is transparent when not clicked and a deep red when clicked for contrast. An infographic of a virus inspired the color palette, with deep red and white text for the tab color, clarifying the content. A mockup of the base layer was created by altering the transparency of the background. The tab interaction placed in front of the background enhanced contrast and readability, particularly for users with visual impairments.
-
I used layers to add content and images in Articulate Storyline 360. Clicking a tab displays the corresponding content layer. Consistent alignment of content and images ensures a balanced layout and improves readability for users scanning the information.
Through iterations and feedback, I created a low-risk 'Activity' tab with immediate feedback. This tab included short travel scenarios with questions for learners to test their knowledge about malaria. It was programmed with variables and triggers to ensure learners answered 3 out of 7 randomized questions before returning to the base layer. If the user did not answer 3 questions correctly, it was randomized to other questions until they were answered. The user had the option to return to other tabs at any time, maintaining the low-risk accessibility.
Lastly, adding the text-to-speech accessibility feature was crucial for supporting various reading levels and enabling quick access on-the-go. Since the text is science-heavy, this feature helps ensure that everyone can benefit from the information.
-
The key takeaway was managing cognitive load with tab interaction to avoid overwhelming the learner. A simple, user-friendly, and accessible layout helped users navigate the information easily. This tab interaction benefited an avid traveler who expressed, “After using this interactive tool to prepare for my trip to Africa, I’ve become more informed about Malaria and the essential preventative measures I should take to protect my health. Some of which I had no idea about! The information is made simple for an average traveler like me and now I feel more confident about being safe abroad!”
-
Overview: This micromodule follows Amy Edmondson’s original concept of Psychological Safety and offers learners opportunities to recognize behaviors that foster psychological safety and apply strategies to strengthen communication and collaboration.
Audience: Leaders of healthcare teams.
Responsibilities: Instructional designer, eLearning development, Working with SME’s, Action mapping, Instructional Design, Mockups, Animation Editor, Visual Designer.
Tools Used: Animaker, MindMeister, Figma, Articulate Storyline 360
-
Managing conversations as a team lead can lead to uncertain situations. Leaders looking to address the needs of their team members need a guideline. This micromodule offers learners ways to recognize behaviors that foster psychological safety and apply strategies to strengthen communication and collaboration.
-
I applied core principles from ADDIE and Gagne's Nine Events of Instruction. Learners are introduced to the topic with a hook that grabs their attention, then the learning topics are introduced. The learning is from one snapshot of time and gives multiple opportunities through repeated practice through modeling and simulations. This in turn enhances retention and transfer of behavioral practices.
-
I gathered insight from Amy Edmonson’s site and Kiley Mulholland article titled, ‘Integrating Psychological Safety into Laboratory Operations’. Edmonson developed this original concept in the 1990’s which helped many industries to improve team initiatives. Mulholland implemented Psychological Safety to enhance her lab team. As a leader, she stated that the key takeaways are assessing the current need, identifying the areas of improvement, and evaluating and adjusting over time. For this project, the goal was to increase the quality of team communication that supports psychological safety within healthcare teams by inviting input from reserved team members and responding supportively to concerns and ideas. This training enables learners to adopt these behavioral changes by focusing on what they do, rather than what they know. I documented this goal and the high-priority actions in MindMeister and referenced them throughout the project.
-
The storyboard is inspired by my experience as a team lead and input from the SME’s article. The script features two narrators who explain the meaning of psychological safety based on Amy Edmondson’s work and introduces a healthcare team facing a crisis during a routine meeting. The healthcare team is made of Doctor Cooper, Nurse Cathy, Brittney, the X-Ray Technician, and Samantha, the manager. The story presents scenario-based examples from that meeting, modeling both low and high psychological safety dialogue. It includes two interactive scenes: a drag-and-drop activity and a multiple-choice question. At the end, the narrators recap key takeaways about psychological safety.
-
The project not only needed to be interactive, but user-friendly. I used Figma to create a professional style guide with custom darker color and white as font colors, a version of teal as accent color, and a light fuchsia to highlight importance. These colors represent many healthcare settings. Traditionally, blue represents calmness for learners and light fuchsia represents warmth. From there, I built out the scenes with the characters. I am working with mixed media, with the interactive scenes being photo images of the animated portions of the characters.
-
I knew that I wanted to break the monotony of heavy text content by using animations for non-interactive portions. I used photorealistic characters and found animated counterparts in Animaker. Then I created the explainer video in Animaker alongside the acting scenes of the healthcare team in crisis. In Articulate Storyline 360, I built the interactive drag and drop and the multiple choice scenes. The drag and drop was custom-made to have specific feedback that geared the learners to make the correct choice. Using video editing skills, I combined the two portions and added additional interactivity to create a mixed media project.
-
TBA