Process and Methods

Problem

The Alliance Foundation is a fictional organization representing nonprofits working with people suffering from food insecurity, chronic mental illness, and related concerns. New staff frequently discourage clients from getting help by offending or embarrassing them during intake discussions. Concerns include failures to:

Solution

I analyzed the most common mistakes and most serious client responses. Studies show that simulations are more effective than passive learning at teaching these skills. Therefore, I created a scenario-based online learning solution that trains new hires for first meetings with clients.

Process

For this project, I worked with a subject matter expert (SME) who is a veteran of social service agencies working with chronically mentally ill clients. After assessing typical challenges for new caseworkers, I developed an Action Map with the SME. I also wrote a text-based storyboard with a complete script. To imitate the process of working with multiple stakeholders, I shared the Action Map with the SME and others for review and feedback. After integrating feedback and receiving approval, I built visual mockups and a functional prototype. After another round of review and approval, I developed the full project seen here.

A process note: this project followed a plan developed by an eLearning expert, but I am flexible and can adapt to any process or environment.

Action Mapping

Action mapping is a process developed by Cathy Moore ensuring that the:

This Action Map went through a few iterations as the scope of the project narrowed,  providing the material for two projects. I put the end goal of this project in the center, with various branches showing scenarios that might lead to an unsuccessful first meeting, a range of choices in each scenario, and an explanation for each option. This ensures that every scenario and decision orients to the main goal and also demonstrates its impact to stakeholders. 

As a proof of concept this Action Map is of a limited scope, and an implementation could easily involve a more complex range of interactions. 






Text-Based Storyboard

The completed Action Map showed which actions, choices, and consequences I would include in the course. With this information, I proceeded to write the text-based storyboard, which includes a full script along with descriptions of the various visual and audio design elements. This allowed the SME and other stakeholders to see what I would include in the project. It also helped to flesh out the storytelling aspects of this project, which improves learner retention. Once stakeholders approved, I developed the visuals. 





Visual Mockups

In creating the visual design of this project, I drew from a handful of sources. Most social service websites pay little attention to design, so I sought out examples from wellness and food websites to get a feel for how these reflected the colors and values of those sectors. Inspired by these examples, I chose a light green color scheme and used food images for color accents. Based on feedback, I later added pink to the color scheme.

To produce the mockups, I used Figma Design to streamline the process of sharing and receiving feedback. This also allowed me to develop the custom theme and template with a tool better-suited to design than Storyline. After completing the mockups and receiving approval, I moved these designs into Storyline to build the interactivity. 




Custom Artwork

To best portray the characters’ emotions through body language and immerse the learner, I animated this project. I found that programs like Vyond lack characters representing social service clients and were also not within the budget of the project. Instead, I found free characters that provided building blocks I could customize. After selecting two characters that came close to the look I wanted, I tailored their look in Figma Design to the specifics of this project.

From there, I posed characters using Figma for different scenes. I responded to early comments about the monochrome color palette by changing the color of the mentor character’s clothes and creating a custom argyle pattern to subtly tie her style back to the dominant greens. I chose to leave the client in darker colors that, while not clashing with the palette, would demonstrate how he is an outsider at the Alliance Foundation. Finally, I created a number of different mouths to animate the speaking characters.

I had additional needs for which I could not find appropriate images, so I produced the food and the desk calendar using Figma Design. Since Figma lacks a tool to adjust the perspective angle of a shape, I exported the calendar grid to Photoshop in order to match the perspective.




Custom Animation

Though it caused some glitches, I used Storyline to animate the characters and it ultimately worked. The primary advantage to this approach was cost—the Articulate Storyline license fee was already paid so animating within the program was effectively free. Other benefits included avoiding problems with importing media and greater control over timing.

I used a variety of features to animate the characters in Storyline including distinct images for the individual characters and Storyline’s native animation tools for the motion of the helper button and the food image flying in from offscreen. I conceived of the animation early in the process, before I knew how I would accomplish it, so it was gratifying to bring those ideas to fruition.




Interactive Prototype

Next, I imported the designs to Articulate Storyline 360, and began to program sections of the project so that stakeholders could try them out before I committed to building the entire project. The project came to life during this phase and stakeholders gave me the go-ahead to continue. I had a clear plan and all the needed elements to put things together, so this portion moved quickly. 

Full Development

The rest of the project proceeded smoothly except for a few instances where I had to work around small bugs. Between the animations, static visuals, audio, and interactions, the project had a number of moving parts so these minor frustrations were to be expected.

The visual representation of the project below looks more complex than what a user might experience because some of the animation effects required additional slides as a workaround. However, I was happy with the result of these efforts.

Because “people skills” like the ones taught in this project are sometimes frustrating to learn, I added bits of whimsy in the animation and audio to make the experience more enjoyable for the user. And since there is nuance to these choices, I ensured that the helper character explained the correct choice clearly but without totally giving it away. For these same reasons, I wanted to make sure that the learner could try as many times as they needed to get the correct answer and progress.









Follow-up

This project was well-received by the SME and other stakeholders. User feedback frequently noted the calming color scheme, animation, and overall effectiveness of the design choices.

I gained valuable experience communicating with SMEs, demonstrating and justifying my choices, and iterating my designs to please clients and work efficiently and effectively. I want to build trust with clients and frequent good communication is a powerful tool to that end.

This project gave me many opportunities to further develop my technical skills in Instructional Design, eLearning, Visual Design, Figma, and Articulate Storyline. One major change I would consider if I were to undertake this project again would be to move my animation work to Adobe Character Animator, which has a limited free version and can make use of imported and customized animations. I might also consider an AI imaging tool like Midjourney. While I am grateful for the opportunity to have learned more about the tools available in Storyline and this method did offer me a greater degree of control over aspects of the animation, there are some glitches in the program that need to be addressed before I would easily choose it again for this purpose.