Problem

Solution

My Process

VISUAL MOCKUP

To kick off the project, I met with the Youth Coordinator (SME) to align on goals and analyze key issues—such as frequent questions, common suspension reasons, and staff workload. Using the ADDIE model, I created an action map to guide the storyboard design for the e-learning module.

Once the storyboard was approved, I designed high-fidelity mock-ups and developed an interactive prototype. After final approval, I built out the full e-learning course.

Finally, I gathered feedback from peers and instructional design professionals to refine the module, ensuring a smooth, engaging, and consistent onboarding experience.

Action Map

Audience: Newly enrolled clients in the MJE Youth Program

Responsibilities: Instructional Design, eLearning Development, Visual Design, Storyboarding, Action Mapping, Prototyping

Tools Used: Articulate Storyline 360, Adobe Illustrator, Figma, Vyond(Video creating), MindMeister, Google Docs, Freepik

The MJE youth program experiences a high volume of new participants enrolling on a rolling basis, especially during the busy season, with up to 60+ youth joining the program. Currently, youth staff—particularly the Youth Coordinator—must repeatedly deliver live orientations to explain the program’s rules, expectations, and logistics. This creates a significant workload and reduces time available for other critical tasks.

Additionally, due to inconsistent communication and varying levels of youth understanding, many participants are unclear about key program policies, such as attendance expectations, code of conduct, and compensation details. This lack of clarity has led to penalties, suspensions, and frustration, which negatively impacts both youth engagement and the overall program experience.

After meeting as a team to discuss the ongoing challenges, we conducted a thorough analysis of the most frequently asked questions from youth participants, the most common reasons for warnings and suspensions.

Although youth are asked to sign a paper-based code of conduct upon enrollment, this passive approach has proven insufficient. Many youth either do not read it carefully or fail to retain the information, which leads to repeated violations of clearly stated rules. Staff are frequently interrupted to re-explain policies individually, which creates inefficiencies and detracts from program delivery and engagement.

To address this, the team proposed the creation of an engaging, interactive e-learning onboarding module. This self-paced online training will deliver consistent, youth-friendly explanations of all critical program expectations, logistics, and behavioral guidelines.This solution aims to reduce staff workload, prevent misunderstandings, and help youth start the program feeling prepared, informed, and confident.

Text Based-Storyboard

Full Development

Result and Takeaways

Once the action map was complete, the next critical step was designing the flow of the eLearning experience through a text-based storyboard. This served as the blueprint for the overall development of the project.

I began by visualizing the journey of a new youth client on their first day in the program. The user would follow the same weekly experience, beginning with selecting the correct address and ending with successfully receiving their paycheck. This narrative helped shape the choices and detailed consequences for each high-priority action identified in the action map.

Throughout the process, I collaborated closely with my Subject Matter Expert (SME) to ensure that each decision point and outcome accurately reflected real-world scenarios. The storyboard underwent multiple rounds of review and feedback from both professional instructional designers and the SME.

This was my favorite part of the process—iterating based on professional input and seeing how the story resonated with others. Collaborating with experts offered fresh perspectives and helped ensure consistency, functionality, and a strong narrative flow in bringing the eLearning experience to life.

After several iterations of the storyboard, the focus shifted to visual design.

I used Adobe Illustrator and Figma to create a mood board and style guide. I incorporated MJE’s signature purple color into the palette.

Next, I designed wireframes to establish the layout and structure of various slide types—including title screens, mentor guidance, questions, and consequence scenarios. These wireframes provided a clear framework that guided the transition into high-fidelity mockups.

Throughout this process, I regularly checked in with the Subject Matter Expert (SME) to ensure the visual design was youth-friendly, clear, and engaging. Their feedback helped ensure that the look and feel of the eLearning experience resonated with the target audience.

Interactive prototype

I developed an interactive prototype that brought the story to life—this was the most exciting part for me because I could finally see the story in action.

In Vyond, I carefully crafted each scene, adjusting character movements and expressions to match the tone and emotions of the story. I paid close attention to timing and built multiple scenes in Vyond that were later transferred onto a single slide in Articulate Storyline 360.

Once in Storyline, I focused on the visual layout and user interaction—designing and placing prompt and dialogue boxes, customizing button prompts based on scene-specific dialogue, adding hover states to the buttons, and using fade transitions to create a smooth, immersive experience.

To make the learning both fun and educational for the youth audience, I also created an interactive drag-and-drop matching game to help users remember their work schedule. Additionally, I included a feature where users could enter their own workdays to calculate their final pay—this was probably the most exciting feature in the entire module!

After collecting feedback and applying several iterations to the prototype, I moved on to full development of the project. Guided by the feedback, I built the final product in Articulate Storyline, carefully assembling all content and multimedia assets to create a cohesive and engaging learning experience.

• First-Person User Perspective: The module places users directly into realistic scenarios from the program. From choosing a bus route, picking an appropriate outfit, to selecting a sign-in time, users experience a day in the program as if they were really there. This immersive perspective helps them better anticipate real-life situations they may face.

• Gamified Quiz Elements: To keep the learning experience engaging and fun, I designed interactive drag-and-drop games. These activities help users retain key information—like their work schedule—while reinforcing knowledge through play.

• Workday Pay Calculator: Youth participants can enter their own workdays to estimate their final pay. This hands-on feature is both exciting and educational, encouraging ownership and personal connection to the learning content.

The Subject Matter Experts (SMEs), primarily the youth coordinators, reflected that the project significantly reduced their workload. After completing the learning module, youth participants are instructed to take a screenshot of the final page to verify their progress. The module effectively streamlines the onboarding process, ensuring participants receive consistent information and minimizing the need for coordinators to repeatedly answer the same questions. Additionally, the warning/suspension rate has decreased, as youth now have a clearer understanding of program expectations and policies.

Takeaways:

• Following a streamlined process is essential to ensure efficiency and clarity.

• Avoid focusing too much on minor details early on—establish a strong structure first.

• Once the foundation is in place, continue to improve the project step by step.

I consulted with the Youth Coordinator and Youth Department Director as my subject matter experts (SMEs). Together, we created an action map that outlined the most common mistakes made by newly enrolled youth and the most frequently asked questions. During this process, we also reviewed key program restrictions and policies, which informed the design of realistic consequence-based interactions.

This analysis helped us clarify the learning goal: to reduce the warning and suspension rate by 50%, and significantly decrease staff workload related to answering repetitive questions.

From there, the SMEs identified four high-priority action areas to focus the eLearning on: 1. General Information (Daily Routine) 2. Pay 3. Policy 4. Office Facilities

These topics became the foundation of the onboarding module, ensuring clarity and relevance for all new youth participants.