Literacy in Mathematics eLearning
Math educators have an opportunity to boost literacy skills and confidence in this scenario-based eLearning!
This concept project was developed to highlight the importance of literacy and provide strategies for incorporating literacy into math instruction.
Audience: Middle and high school mathematics teachers
Responsibilities: Instructional Design, eLearning Development, Visual Design, Action Mapping, and Storyboarding
Tools Used: Articulate Storyline 360, Adobe Photoshop, Figma, MindMeister, Google Docs
The Problem
The client in this concept project is a fictitious school district that needs to increase the number of proficiency scores on end-of-year math exams for middle and high school students. In particular, the school district targeted literacy skills across all subjects as the primary strategy to improve student learning and scores. The main issue is that many math teachers have needed more literacy training. The school district realized they would need to provide a training solution that could reach middle and high school teachers across the district while providing an opportunity to learn and practice some skills to build teacher confidence in a low-stakes environment.
The Solution
I proposed a two-fold approach. The first part of training would consist of an in-person workshop to train teachers to incorporate the strategies into lessons and implement them in the classroom. This promotes direct interaction and feedback so that teachers can participate in discussions, ask questions in real-time, and receive personalized feedback from the trainer, leading to deeper understanding and better implementation of the strategies.
The second part of the training includes a scenario-based eLearning that would allow teachers to practice their new skills. This allows for flexibility and accessibility. Teachers can access the e-learning anytime, anywhere, at their own pace, making it convenient for busy schedules and can reach users across the entire school district.
As a certified middle and high school math teacher, having attended a Reading Apprenticeship workshop, I served as the subject matter expert for this project.
My Process
The ADDIE model provided a clear and concise roadmap for the eLearning development process. During the Analysis phase, recognizing the learners (math teachers in this case) and their needs became the driving force behind my Design and Development process. Using the process outlined in Cathy Moore’s Map It helped me hone in on simple strategies that math teachers could easily incorporate into lessons. From there, I developed the storyboard. With feedback and iterations, the final storyboard helped me visualize how my scenario-based eLearning would come together. I moved through mockups, a prototype, and the final product.
Action Map
Literacy is an all-encompassing subject of its own. I began using a mind map program to brainstorm, identify, and document many literacy skills. However, working with math teachers and understanding their time constraints, I knew it was important not to overwhelm teachers with many strategies. While the mind map helped me organize my thought process, I wanted to select skills strategically. I looked more closely at the mind map, and with some guided feedback, I identified actionable and observable steps that math teachers could use. This became the action map from which my scenario-based eLearning developed. Skills such as using a read-aloud, connecting to content with stories, and using open-ended questions allow users to make decisions while receiving immediate feedback, which is paramount to building teacher confidence. These observable actions provide tangible evidence of what the user is learning and how well they are implementing the strategies.
The action map
Text-based Storyboard
Teachers, like their students, need to connect to the learning meaningfully. Thus, as I wrote the storyboard, I wanted to ensure that it met the needs of what math teachers are accustomed to in the world of education. That meant relying on some sound instructional models used by educators, such as Gagne's 9 Events in Learning. Using familiar instructional practices, such as providing guidance (through a mentor character), eliciting performance (practice), and providing feedback, would allow teachers to worry less about how they were learning and focus more on learning the new material.
Once the actionable objectives were decided upon, I used each to create interactive scenarios that would include correct and incorrect consequences. Serving as the SME, I drew upon real-world situations where all teachers could find themselves and used those to create the scenarios. When learning experiences mimic real-world consequences, learners are better prepared to apply their knowledge and skills in authentic situations. Through this scenario-based eLearning, they will have already experienced the potential outcomes of their actions, thus giving them the confidence and understanding needed to navigate real-world challenges effectively.
As I wrote the storyboard script, I began visualizing various characters, their frustrations, and concerns. This helped me understand how I wanted the user to feel as they progressed through the scenarios. One of the things that was most beneficial to writing the storyboard was each round of feedback and adjustments allowed me to envision and dial into the outcome.
Visual Mockups
With the storyboard complete, I used Figma for the visual design. I began by creating a mood board that could inspire the look and feel of my project. The visual design was the most intimidating aspect of the project, but drawing on other sites helped me choose a color scheme and an overall plan. After looking at and reflecting on many sites and images, I decided upon a simple aesthetic for my project. It would create a better learning experience for the harried and overloaded teacher.
My curations tended towards photorealistic images. Since I wanted learners to feel they could end up in some of these situations, photo images would create a better immersion experience than vector illustrations. During this time, I found a particular photo of a teacher who looked overwhelmed but in a good-natured way. This photo inspired me to add some humorous bits with some of the images into the project and add a bit of fun to the learning experience.
A bit of inspiration
From that point, I moved into wireframes and mockups. I reviewed several mockup iterations to decide upon final layouts, colors, fonts, text boxes, button sizes, and photos. Creating the mockups in Figma allowed me to jump from one slide to another, checking for spacing, padding, and overall flow consistency. I also shared my Figma slides with the wider ID community so they could provide feedback on the overall design or individual slides. The use of feedback and revisions resulted in a thorough development of mockups, which made prototyping quicker.
A collection for the moodboard to design the aesthetic
The process with wireframes to guide the overall design
A high-fidelity mockup
Interactive Prototype
After receiving feedback on my storyboard and mockups, I used the prototype feature in Figma to bring some interactive elements to life. It was nice to experiment with this feature in Figma, and it helped me test some of the interactive buttons before I moved into the initial prototype within Articulate Storyline 360.
In the Articulate Storyline prototype, I included slides for the introduction, a scenario with a lead into the first question, the choices and consequences, and an introduction to the mentor character. When I began, my prototype had images on one side of the slide and static screens and text boxes on the other. As I sought feedback, my peers suggested having text boxes flow in versus "just appearing" to provide a bit more visual stimulus for the user. This also allows the learner to take in the scene (background image) before the content is shown, which helps with immersion and cognitive load. Through the feedback and iterative process, I went through another spelling and grammar check, adjusted the timing of slides for better flow, adjusted the text boxes flying onto the screen to establish consistency to grab the user's attention and enhance engagement, and paid attention to spacing and padding to ensure visual coherence.
Once the prototype was approved, I moved quickly through the full development of the project.
Using Figma to prototype
Full Development
Developing the remaining scenarios and slides within Articulate Storyline went smoothly. I felt confident in my skills working with variables, triggers, states, and layers. I spent more time editing background and character images in Photoshop than creating the slides within Articulate Storyline. I needed to ensure that I included diverse characters to enhance relatability. Once I identified and edited my final images, the rest of the project feedback and iteration process went quickly.