hello, and welcome to my portfolio

Anti-Smoking Interaction

What's a Vegan?

Call Center Scenario

What is Phishing?

Gagne's 9 Events Workshop

Formal vs. Informal Learning Job Aid

Link to Project: Anti-Smoking Interaction

Tools Used: Storyline 3, Illustrator CC, Animate CC

Medium: eLearning

Client: ELH Challenge #172 (Personal Project)

Client Story: The client tasked me with creating an eLearning interaction using only black and white. On top of this, they wanted the user to play an active role in the course to enhance learning and transfer.

Development Process:
To fulfull the client's requirements, I began thinking of a concept. I brainstormed themes associated with the colors white, black, and gray, until eventually landing on the idea of smoking. Smoke. Tar. Black lungs. Yes, I concluded that this color palette would work nicely for an anti-smoking interaction.

With the concept in mind, I drafted a storyboard. I decided to use high-resolution photographs as background images, along with a clean, minimal landing page. It was also an easy choice to do away with the traditional next buttons in favor of something more engaging...in this case, a burning cigarette.

As current smokers with intentions to quit are the target audience, I designed the instruction in a way that facilitates quitting. While reading information about the negative health effects of smoking, the user continues clicking the burning cigarette to proceed to the next slide. Once the learner is finished with the informational slides, however, they must use drag-and-drop interaction to extinguish the cigarette, throw the cigarette away, and then throw away the entire pack. By physically dragging the cigarettes into the trash can on the screen, the learner is strengthening the association between cigarettes and trash in real life as well.

With a strong concept and storyboard, I began developing the assets in Adobe Illustrator. I created the cigarette with its accompanying smoke, then animated it in Adobe Animate to create the desired effect. After that, I designed a simplistic cigarette box that the user would have to throw away.

Once I had my assets saved and ready, I developed the course itself using Storyline 3. Since the focus of this interaction was on the visual design, interactivity, and transfer, I pulled some cold, hard facts from cdc.gov. If you'd like to see the finished product, please visit this link and experience the interaction for yourself.

Link to Project: What's a Vegan?

Tools Used: Storyline 3, Construct 3, Illustrator CC, Animate CC

Medium: eLearning / Gamification

Target Audience: First-year college students in Nutrition & Dietetics program

Client: Introduction to Nutrition Professor (Personal Project)

Client Story: The client needed a fun, highly visual interaction to introduce their first-year students to the differences between a vegan and a vegetarian or omnivore.

Development Process:
I understood at the outset of this project that it would be my most technical undertaking to date. As the client was looking for something 'fun,' I saw this as the perfect opportunity to implement a gamified experience. With a clear learning objective (students will be able to differentiate between vegan and non-vegan food items), I developed an HTML5 learning game using the Construct 3 game creator. It requires the learner to catch falling food items: they get a point for each vegan item that they catch, and it is game over if they catch any animal products. This end-goal learning game provides accurate assessment of the objective, but it also measures the learning in a way that is fun and much more interactive than a multiple choice test.

While I began by developing the visual assets myself, I decided to take advantage of my subscription to freepik.com and use/modify some pre-existing digital artwork. After finding a suitable background image for the course, I animated the windmill using Adobe Animate to make it slightly more interesting visually. While designing and storyboarding the full experience, I decided to use a character to introduce the course and invite the learner to help. To further situate the game, the character asks the learner to help her shop for a vegan dinner party that she is hosting. This adds additional context to the experience and further immerses the learner.

Once the module was planned and storyboarded, I developed it in Storyline 3. I imported the HTML5 game into the course as a web object, then used JavaScript to modify the Storyline output files so that the game could communicate with the course (ZSolt Olah's advanced storyline tutorial helped with this step). Without putting the course and the game in communication with each other, the learner would never be able to make it to the next slide after collecting all of the vegan items.

Finally, it was important to me that the learner had control over the experience. If some students already know a decent amount about what veganism is, they likely do not want to sit through dialogue boxes about what a vegan can and cannot eat. To address this, I used an interaction that has many different food items on display. The learner can click on a food item to learn more, and they are free to continue to the game whenever they feel ready. Overall, this results in an experience that is highly contextualized and pleasant for the learner. To complete the course, the learner must show that they have mastered the content by collecting 25 vegan food items in a row without failure. Try it for yourself here.

Link to Project: Call Center Scenario

Tools Used: Storyline 3, Illustrator CC

Medium: eLearning

Target Audience: Instructional Systems Masters Students

Client: Class Project

Client Story:
I designed this experience for my peers so that they could practice conducting a needs assessment and implementing appropriate solutions for a fictitious call center organization.

Development Process:
For this project, I wanted the learners to have complete freedom over how they conduct the needs assessment. However, I did not want them to begin implementing solutions before having a full grasp of the problem, so I required the learner complete at least 80% of the analysis before continuing to implementation. I used numeric variables to raise the analysis completion every time an analysis slide was viewed, and I was sure to use a True/False variable to measure whether or not the slide had been viewed before (without this, the learner would be able to view the same slide 8 times in a row to raise the analysis completion to 80%).

After completing the analysis, the learner should have an idea of where the pain points are in the call center organization. The "Implementation" section of the course unlocks after the analysis is at least 80% complete, and the learner can use their judgment to implement the appropriate solutions. Some are effective, others are not; the learner's attention to the analysis will determine how accurately they can implement solutions. Once again, I used numeric variables to track the issue resolution rate. Once the issue resolution rate rises to 90%, the fictitious call center is happy and the course is complete.

For course naviagation and progress tracking, I decided to develop a slide-up menu driven entirely by Storyline motion paths. This keeps the UI clean and it houses all important information in one place. Overall, this course provides a low-cost, low-risk way to practice performance analysis techniques, and I was able hone my advanced variable and motion path skills in the process.

Link to Part 1: What is Phishing?

Link to Part 2: Identify a Phishing Email

Tools Used: Storyline 3, Illustrator CC

Medium: Microlearning / eLearning

Target Audience: Internal employees and external clients of Nurse Next Door

Client: Nurse Next Door

Client Story:
This client came to me when his company's employees and clients were undergoing a high volume of phishing attempts. He asked me to develop a training that would help his employees identify these attempts and forward them to the company's security team. Furthermore, he wanted these modules to be micro and mobile friendly: 5-7 minutes long each so that the learners could access them on the go.

Development Process:
For the first module, I wanted to teach the learner what phishing is, the various forms it can take, and how it works. The second module focuses on the particulars of how to identify a phishing email. To develop the content and storyboards, I consulted online resources, educational videos, and a cybersecurity course that the client wanted to model. To grab the learner's attention in the intro course, I introduced a shady character that is, in fact, a phisher. He shares his practices with the learner so that they can learn how serious phishing is and how to avoid it.

The second module was much more technical. I took full advantage of text variables to grab the learner's name and email address. Then, when it came time to simulate a phishing email, I addressed the email directly to the learner to enhance the real-world context and facilitate transfer. I also used text variables and conditions to reinforce the learner's knowledge of the security team email address. To elicit practice and repition, I had the learner having manually forward the phishing attempt to the correct email address. To see this in action, experience the module for yourself.

Link to Instructional Program: Gagne's 9 Events Instructional Program

Link to Design Document: Gagne's 9 Events Design Document

Tools Used: Adobe inDesign, Illustrator CC

Medium: Face-to-Face, Instructor-led Training

Target Audience: Instructional Systems Masters Students

Client: Class Project

Client Story: I developed this workshop to help my peers apply Gagne's 9 Events to an instructional program or lesson plan that they have already created.

Development Process:
As this would be a face-to-face workshop, I wanted to design it so that any facilitator would be able to pick it up and lead the program. To communicate the program's purpose and background, I developed a detailed design document. This document outlines the instructional goal, learning objectives, learner analysis, course content, and more. Even though it took longer to complete this document and conduct these analyses than it would have been to jump right into the development, it ensures that the program will be effective; better yet, it makes this information available to any other designers or instructors that decide to pick up the program.

Once the design document was complete, I turned to inDesign to create the facilitator and student materials. Instead of creating the materials in Word, I gave it a clean, modern feel with font choice and text placement. This resulted in a facilitator guide, job aid, graphic organizer, and exit assessment that were all easy-to-read and attention grabbing.

Finally, I conducted a formative evaluation in a small-group setting with a sample from my target population. I observed while a PhD student facilitated, and it helped me ensure that the pacing was correct and that the program was effective. All attendees were able to improve their instructional programs and learn more about Gagne's 9 events due to the workshop.

Link to Project: Formal vs. Informal Job Aid

Tools Used: Storyline 3

Medium: Job Aid / eLearning

Target Audience: Instructional Systems Masters Students

Client: Personal Project

Client Story: My classmates were having trouble differentiating between formal and informal learning; I designed this job aid to demonstrate that formal vs. informal learning is not black and white, but that it lies on a continuum.

Development Process:
I wanted to take advantage of Storyline's states and layers to develop a single-page application that would emphasize the differences between formal and informal learning. To show that formal vs. informal lies on a continuum, I decided to use a slider that the learner could drag. As the slider moves from informal to formal, the text changes to reflect the degree of formality. Try it out for yourself.