This scenario-based e-learning concept project was developed for faculty members at a community college. The goal was to increase student retention in online classes offered by the college.
Audience: Community College Faculty
Responsibilities: Instructional Design, e-Learning Development, Visual Design, Mockups
Tools Used: Articulate Storyline, MindMeister, Inkscape, Figma, Canva, Google Docs
My conceptual client, Sunflower Community College, is a community college in the United States which offers classes for students in a variety of settings: in-person, hybrid, synchronous online and asynchronous online.
An issue repeatedly coming to the attention of the Dean of Academic Affairs was the need for faculty to better support students in asynchronous online classes. In these classes, students often felt isolated and disengaged, and ended up dropping classes mid-semester. This was leading to the college not meeting its academic goals and also enduring financial strain.
After identifying the problem, I analyzed whether the problem stemmed from a lack of knowledge or skill. I found that the problem was largely due to a lack of skill. Faculty were well-aware of the need to provide support to online students, but they did not have enough practice to be able to build the skills. With this in mind, I proposed a scenario-based e-learning solution. This would allow faculty to practice supporting students in a risk-free environment and memorable manner.
For this conceptual project, I acted as the Subject-Matter Expert (SME). Drawing upon my experience of teaching at a community college, I utilized Cathy Moore’s Action Mapping techniques and thought of actionable ways that faculty could connect with students and help them feel less isolated. I began with a clear goal ("increase online student retention 20% by next year as faculty consistently support online students"), and focused on observable behaviors, which could then transfer into the scenario-based learning. I then identified which of these actions would have a larger impact while also being simple to implement.
Having collected actionable items through my action map, I then began the process of writing the text-based storyboard. I kept my storyboard simple, with the first few slides establishing the scenario, introducing the mentor, and adding a gamification element, while the later slides included several questions with possible correct and distractor responses. The purpose of the storyboard was to write all text that would appear within the scenario. The storyboard went through several edits and revisions. Since this was a conceptual project, I chose to revise the storyboard after letting it sit for a few days, returning to it with fresh eyes, with the intent to minimize and simplify to make the experience as user-friendly as possible.
Once I had the text-based storyboard, the visual design phase began. I created a logo in Canva for my conceptual client (which later did not end up being in the final product), then created a moodboard and style guide in Figma. I wanted the style guide to reflect the logo, while also conveying warmth and positivity. The style guide included colors, fonts, buttons, and my mentor character.
To develop the mentor character, I found a character pack similar to the style I was looking for, and used Inkscape to manipulate the colors and background to match the style. I also found other characters to represent students. I found two different character packs that I liked, though they were slightly different in style from one another. I manipulated one character within Figma to better reflect the style I was going for.
Style Guide with conceptual logo
Moodboard with collected elements
Next, I created wireframes within Figma. The purpose was to place elements in place and to think about the layout of each slide. These wireframes were simple, black-and-white slides, with shapes representing characters and text. Eventually, the layout changed on some of the slides in the final product, but this step helped me get a feel for placement and led to improved revisions.
Wireframe for Scenario Introduction Slide
Wireframe for Question Slide
With the wireframes in place, the visual storyboarding began. At this stage, I created visually accurate mockups in Figma for most of the slides. This is the step where I enjoyed paying attention to details to make the project come to life. The backgrounds, the color combinations, and the facial expressions of the characters were central in this stage of development. I am most proud of the way my mentor character, Dr. Sana, and my main character, Kendra, turned out. These two characters show a variety of facial expressions throughout the experience, and I was able to create the expressions I needed.
The e-learning scenario was developed in Articulate Storyline 360. The final product includes a mentor character who offers assistance to learners as needed, questions and answer choices, and an element of gamification. Instead of getting the information up-front, learners may choose whether they need the assistance or not. Gamification is included through the building of the student’s regalia, to keep learners engaged and excited as their success aligns with the student’s triumphs.
During the development of the final product, I utilized states, layers, variables, and triggers in Storyline. I used layers primarily for feedback slides, which included a greyed-out version of the question slide under the feedback. (I created custom feedback slides rather than using the existing templates in Storyline.) I also used variables and references to personalize and include the learner’s name in several places during the experience. Additionally, I used animations on question slides and to build the graduation regalia. I further utilized variables to ensure learners were redirected to question slides with minimum distractions after giving an incorrect answer.
Final Product Slide Introducing Mentor Button
Final Product Slide Introducing Gamification
Though this was a conceptual project, I shared it with teachers, professors, and leaders in the educational world for feedback. The response was resoundingly excited and positive:
"This is excellent! I am so impressed with your skills. I love the way it’s personalized all the way through—even at the end! This is creative, timely, and really gets at some of the most common issues in teaching online."
-Kim Miller-Davis, Director, Teaching and Learning Initiatives and Special Projects, Center for Excellence in Teaching and Learning, San Jacinto College
"Oh my goodness! I love it! You hit the right tone with professors (still being accountable to students and rigor in the course, while also leading with your heart, etc.)."
-Kimberly DeLauro, Dean Liberal Arts, San Jacinto College
I thoroughly enjoyed creating this project, every step of the way. I am confident that learners will find value in it and be better able to provide support to online students when they need it.