Street Smarts
This scenario-based learning experience equips young adults, particularly those in Black communities, with practical knowledge about their rights in real-world situations after high school. Through interactive character-driven scenarios, learners navigate classroom, law enforcement, and other everyday legal encounters.
Audience: young adults who are transitioning into post-high school environments and need practical knowledge about their legal rights
Responsibilities: Instructional design (action mapping, storyboarding, mockups, prototype, full build), visual design, eLearning development
Tools Used: Articulate Storyline, Vyond, FreePik, Microsoft Powerpoint, Adobe Illustrator, Google Docs
The Problem and Solution
Many young adults—particularly those in Black communities—lack a clear understanding of their rights in the classroom, workplace, interactions with law enforcement, and other critical spaces. Without this knowledge, they may make uninformed decisions that lead to negative consequences in their personal and professional lives.
Street Smarts: Navigating Your Rights is a seven-module course designed to prepare high school graduates for real-world situations they may encounter as they transition into adulthood. Each module connects real-life scenarios to landmark Supreme Court cases, empowering young adults to confidently assert their rights in various environments. The course also raises awareness of systemic challenges that impact their rights and explores practical strategies for overcoming them.
In the long term, Street Smarts aims to combat misinformation and disinformation that often mislead young adults in moments of conflict or adversity. By fostering critical thinking skills, the course equips learners to distinguish fact from fiction and make informed, empowered decisions.
My process
To bring this project to life, I leaned on the structure of the ADDIE model. For the analysis phase, I met with subject matter expert (SME) to gather information and create an outline that would serve as the foundation for the text-based storyboard as I entered the design phase.
Once I created the storyboard, I focused on the visual design by creating the wireframes and mockups. When the wireframe was finalized, I moved into the development phase by creating a prototype to showcase the interaction of the eLearning. From there, I was able to dive in and develop the project in its entirety.
Module Mapping
Text Based Storyboard
The text-based storyboard played a crucial role as the foundation for the project’s development.
I began by identifying the challenges students face when questioning authority and researching key court cases that set important legal precedents for the intended audience. This research shaped the Think It, Learn It, Share It framework, guiding users through the module .The storyboard underwent multiple rounds of faculty feedback to refine its structure and ensure a smooth user experience.
To further support engagement, I designed the Council Decision Meter, which tracks the learner’s progress as they make informed decisions throughout the module.
Council Decision Meter
Learn It Slides
Before building Street Smarts, I carefully mapped out the module structure to ensure a logical flow that guides learners through understanding their rights in the classroom. Using the Think It, Learn It, Share It framework, I designed the experience to progressively deepen comprehension, moving from reflection to knowledge acquisition and finally to application.
Developing the learning objectives was a key part of this process. I crafted objectives that were clear, measurable, and student-centered, ensuring they aligned with the module's purpose. The objectives focus on distinguishing between protected and unprotected speech, analyzing real-world scenarios, and applying legal principles to advocate effectively. Mapping the module around these objectives provided a structured foundation for engagement and skill-building.
Slide from text based storyboard
Visual Mockup
After finalizing the storyboard, I transitioned to visual design. Using PowerPoint, I developed a mood board, style guide, and wireframes. I incorporated a bold yet professional color scheme that aligns with the theme of Street Smart and selected a font that reinforces the module’s tone.
Next, I created wireframes to structure key slide types, including title screens, mentor guidance, decision points, and consequences. This step helped establish a clear layout before refining the visuals in high-fidelity mockups. Seeing the design take shape was a pivotal moment, bringing the project to life.
Introduction Slide
Interactive Prototype
I developed an interactive prototype to gather feedback on the functionality of Street Smarts before moving into full development. This phase was particularly exciting because it brought the story to life through engaging animations in Vyond. The prototype included key elements such as the title slide, introduction, decision-making moment, and a sample question with corresponding consequences for correct and incorrect choices.
In Vyond, I carefully crafted each scene, ensuring that character movements and expressions aligned with the tone of the story. This required precise timing and layering multiple animated sequences to be seamlessly integrated into Articulate Storyline.
Within Storyline, I refined the design and placement of interactive elements, including prompt textboxes, dialogue boxes, and customized button prompts. I also incorporated hover states and fade transitions to create a smooth and immersive user experience.
To enhance visual cohesion, I used Adobe Photoshop and Illustrator to refine sourced images from Freepik and Vyond. For example, the office decor in the student council conference room was sourced from Freepik, while the characters and animations were designed in Vyond. I adjusted and refined these elements in Photoshop before integrating them into Articulate Storyline, ensuring a polished and cohesive visual experience.
Example of creating a scene in Vyond
Full Development
Favorite Features:
Engaging Animations: Developing Street Smarts in Vyond allows learners to be fully immersed in the student council experience, making them feel like active participants in the story. The dynamic character movements and changing expressions keep learners engaged and reinforce their curiosity throughout the module.
Zoom Regions: Strategically placed zoom effects highlight key moments in the storyline, drawing attention to important discussions, decisions, or legal concepts. This technique ensures that learners remain focused on critical details while maintaining a smooth narrative flow.
Style Guide
Wireframes
Example of creating a scene in Articulate Storyline
