top of page
Get to know me

Best Practices for Online Education

In this modular eLearning experience, pre-service teachers explore best practices for effective online instruction through interactive lessons, videos, and collaborative activities. Developed for the University of Instructional Technology and Education, the training shifts focus from technical Canvas use to evidence-based pedagogical strategies. The course emphasizes learner-centered design, accessibility, and Universal Design for Learning (UDL), preparing future educators to adapt their teaching for remote environments.

 

 Audience: Undergraduate Secondary Education students at the Urban Institute for Teacher Education (University of Utah)

​

Tools Used: Articulate Storyline 360, Articulate Rise, Genially, Google Docs, Google Sheets, Google Slides, Google Forms, Canva Pro, Canvas

As a lifelong learner, I view each project as an opportunity to grow. Reflecting on lessons learned helps me continuously strengthen my skills as an instructional designer. Below are the key takeaways from this project.

Reflection

This project was an invaluable opportunity to put theory into practice, work through real-world design challenges, and deepen my skills as an instructional designer. Looking back, several key lessons stand out:

​

Start with the Learner, Not the Content

Early interviews reminded us that learners come with prior experiences, misconceptions, and unique needs—especially in the context of online learning shaped by COVID. Designing from a place of empathy and inquiry, rather than assumption, allowed us to develop a course that felt relevant and real to them. That foundation of learner-centered design guided every decision we made.

​

Accessibility Must Be Intentional and Baked In

Accessibility wasn’t just a checklist item—it was something we thought about from day one. By building transcripts, alternative assessments, and accessible Google Docs into the development workflow, we ensured that all learners had equitable access to learning. It reinforced for me that accessibility is not just a compliance issue; it’s a pedagogical and ethical priority.

​

Modularity and Flexibility Support Both Learners and Stakeholders

The ever-changing nature of the stakeholder's existing course taught me the importance of designing modular, plug-and-play components. Building advanced modules that could be added or removed without disrupting the course structure gave the project long-term flexibility. At the same time, giving learners choices in their deep-dive topics supported motivation, autonomy, and differentiation—key principles of adult learning and UDL.

​

Visual and Structural Design Matter—A Lot

Our use of HTML/CSS to format Canvas pages wasn’t just cosmetic. Clean visual hierarchy, consistent layouts, and clear learning objectives improved cognitive processing and helped learners navigate the course more confidently. This reinforced the idea that instructional design isn’t just about what you teach, but how you present it.

​

Instructor Support Is Critical for Sustainability

Building a robust Instructor Guide helped me appreciate the instructional ecosystem beyond the learner interface. Good design doesn't end at the learner—it extends to the facilitators who implement the course. By including rubrics, best practices, and technical support, we created a product that’s sustainable, scalable, and easy to adopt.

​

Feedback Isn’t Just for Learners

Our user testing phase was one of the most enlightening parts of the project. Even small pieces of feedback (e.g., unclear instructions or confusing navigation) had a significant impact on learner experience. It reminded me that iterative design and user testing are essential to creating effective, usable learning environments.

​

Final Takeaway

This capstone helped me grow not just as a designer, but as a strategic thinker, collaborator, and advocate for learners. I left the project with a deeper understanding of what it means to build meaningful, accessible, and flexible learning experiences—and how to partner with stakeholders to make those experiences sustainable.

Problem and Solution

The Problem:

The University of Instructional Technology and Education (UITE) had an existing Canvas course meant to prepare pre-service teachers for online instruction. However, it focused primarily on the technical aspects of using Canvas—not on how to teach effectively in an online environment. This created a major instructional gap, as many pre-service teachers assumed they could transfer in-person teaching strategies directly to remote settings without adaptation.

 

The Solution:
We were tasked with developing an asynchronous, modular learning experience that would build a foundational understanding of online teaching best practices—with room for deeper exploration. We redesigned a portion of the course to emphasize pedagogical strategies, using learner-centered design grounded in adult learning theory, Universal Design for Learning (UDL), and multimedia learning principles.

Analysis

To understand our learners’ needs, we conducted user interviews and surfaced six key themes:

​

  1. Perceived differences between online and in-person teaching

  2. Need for organization and clarity

  3. Difficulty fostering authentic engagement online

  4. Concerns around assessment quality and cheating

  5. Significance of educational technology

  6. Desire for accessible course designs

 

We used empathy maps and a heat map to prioritize these concerns. This process helped us put ourselves in the learners’ shoes and make design choices that directly addressed their lived experiences.

​

We also analyzed:

  • The existing course to identify redundant content

  • The program’s previous courses to avoid overlap and ensure scaffolding

 

For example:

  • Since students already had exposure to educational technology, we paired that topic with engagement, rather than making it a standalone module.

  • We wove accessibility and organization together, based on the insight that clear structure supports inclusivity.​

 

We then completed a gaps assessment and created an instructional flowchart to visually map the desired learning outcomes to specific instructional activities—ensuring all elements had purpose and alignment.

empathy map.png

This empathy map was created during the project to gain greater visibility into learner's needs, experiences, and perspectives. It organizes users input into four quadrants—what they say, think, do, and feel—highlighting themes such as accessibility, engagement, use of educational technology, and assessment challenges.

gaps assessment.png

Snippet of a learning gaps analysis chart, showing modules broken down by key learning items, learner goals, and current skill levels. Highlighted sections include learning items for the Engagement and Educational Technology lessons.

Design

We designed:

  • A 3-week Fundamentals module with three lessons: Accessibility, Assessments, and Engagement & EdTech.

  • Three 2-week Advanced modules, offering deeper dives into the same topics. Students would choose one based on interest, supporting learner autonomy and motivation.

 

Each lesson was built to be:

  • Modular (to allow easy integration and reuse)

  • Scaffolded (to support gradual knowledge-building)

  • Choice-driven (to encourage ownership of learning)​

content and strategy.png

Instructional blueprint mapping learning objectives to content topics, along with the supporting instructional strategies. This example emphasizes discovery-based learning, encouraging students to actively explore content and construct their own understanding—an approach that promotes critical thinking and deeper retention. It also highlights collaborative learning through structured discussions that build shared knowledge and perspective.

How We Applied Instructional Design Frameworks:​​

​

  • Mayer’s Multimedia Learning Principles:
    Instructional content was developed using video, animation, and infographics with intentional design choices like:

    • Segmenting and pre-training to reduce cognitive load

    • Modality and coherence to keep materials concise and engaging

    • Embedded quizzes within videos (created in Articulate Storyline) to encourage active learning and reinforce understanding in real-time

​​

  • ​Adult Learning Theory: We emphasized relevance by connecting each activity to undergraduate teachers’ real-world experiences. For example, the final project involved adapting a real lesson plan from their student teaching into an online format, making the learning authentic and applied.​​

​

  • Universal Design for Learning (UDL):
    To address variability in learner needs:

    • We provided multiple means of representation (videos, text, visuals)

    • Multiple means of engagement (discussion, escape rooms, collaborative and independent choices)

    • Multiple means of action and expression, particularly in the final projects and case studies where learners could choose formats and focus areas

​​

  • Collaborative and Discovery-Based Learning:
    Weekly discussions encouraged peer reflection and sharing of ideas. Advanced modules offered open-ended "challenge" activities and case studies, allowing learners to explore subtopics like the digital divide in more depth and from multiple angles.

Development

Our development process prioritized accessibility, engagement, and long-term usability—not just for learners, but also for instructors facilitating the course. We used a range of tools and strategies to build a rich, inclusive learning environment grounded in evidence-based instructional design.​​​​​​

Prototyping for Iteration and Consistency:

 

To guide development and ensure user-centered design, we created both low- and high-fidelity prototypes. A paper-based prototype helped us quickly visualize and test the structure of our Articulate 360 interactions before investing time in production. We also built a high-fidelity prototype directly in Canvas, establishing a polished layout that served as a reusable template for each lesson. This allowed for consistency across modules and streamlined development. We conducted user testing on our prototypes to gather early feedback on usability, accessibility, and clarity—enabling us to refine the learning experience before full-scale production.

​​

​

Tools & Technologies Used:

​

  • Articulate Storyline: We developed interactive instructional videos with embedded formative assessments, giving learners immediate feedback. This supported Mayer’s principles of multimedia learning (e.g., segmenting, modality, and feedback) and encouraged active engagement with content.

​​

  • Articulate Rise: Rise was used to create step-by-step, mobile-friendly learning experiences, particularly useful for exploring complex ideas in a low-barrier format. These activities supported scaffolding and gave learners control over the pace of learning.

​​

  • Genially: We built a gamified escape room activity to support the engagement lesson, incorporating elements of discovery-based learning. This design encouraged experimentation and problem-solving—key adult learning motivators.

​​

  • Canvas (custom HTML/CSS): To improve clarity and readability, we used custom HTML and CSS to format Canvas pages. This allowed us to create a more structured visual layout, making navigation intuitive and reducing cognitive load—especially important for online learners working independently.

​​

  • Padlet: We integrated external collaboration tools, such as Padlet, into discussions to allow for more dynamic and visual interaction. This supported collaborative learning and added variety to traditional text-based discussion formats.

​

  • Google Suite: We used Google Slides, Sheets, Docs, and Forms to create a wide range of course materials. These tools ensured easy access for all learners, supported collaborative work, and allowed for organized information sharing. Every material developed in tools like Storyline, Rise, or Genially was also available in a Google Doc format to maximize accessibility and ensure compatibility with screen readers.​​​

 

​

Accessibility by Design:

 

We were committed to ensuring every learner could access, navigate, and benefit from the course content. Our strategies included:

  • Captions and transcripts for all media

  • Alternative assessments that met the same learning objectives in flexible formats

  • Accessible Google Docs accompanying every activity and content page—these could be referenced for screen reader compatibility, used offline, or submitted in lieu of online participation

​

low fidelity prototype.png

Paper-based low-fidelity prototype showing an early concept for an embedded assessment in Articulate Storyline 360. In this example, learners practice assessment planning. Low-fidelity prototypes like this help visualize structure and flow, allowing for quick feedback and iteration before development begins.

canvas page example.png

An example of our custom-designed Canvas instructional page for this fully asynchronous course. The page is visually organized using custom HTML and CSS to reduce cognitive load. It includes a clear header, a highlighted introductory message, and a section outlining learning objectives. An embedded Articulate Storyline video appears in the center with a collapsible menu and transcript tab. Below the video, resources such as slides and transcripts are provided, followed by sections labeled 'What’s Next' and 'To Do'—each color-coded for clarity. The structured layout supports accessibility, self-paced navigation, and helps learners stay oriented within the course.

instructor guide.png

The Instructor Guide created in Google Docs, featuring a clickable table of contents on the left and clean, readable formatting. The guide offers detailed instructions, best practices, and resources to support instructors in facilitating the course effectively.

​​Instructor Support: The Instructor Guide

 

To ensure successful implementation, we developed a comprehensive Instructor Guide to accompany the module. It included:

  • Pedagogical best practices for teaching each lesson

  • Grading rubrics aligned to assessments

  • Technical instructions (e.g., how to embed HTML, create a Padlet, or modify Storyline content)

  • Tips for managing discussions, providing feedback, and adapting activities

 

This guide empowers instructors to deliver the module with confidence, adapt it to their own teaching style, and troubleshoot issues without needing additional support—making the project more scalable and sustainable for the stakeholder.

Implementation & Evaluation

Prior to handing off the project to our stakeholder, we conducted usability testing with representative users prior to final delivery. Key feedback included:

​

  • What worked well:

    • Visual layout and color blocking supported navigation

    • Clear learning goals on each page helped learners stay focused

    • Assessments were described as “fun” and “realistic”

    • Learners appreciated the final project’s real-world relevance

​​

  • Improvements needed:

    • Refined unclear instructions

    • Streamlined directions in challenge and case study sections

    • Enhanced accessibility elements for screen readers and keyboard navigation

 

We made improvements based on the constructive feedback and then handed it off to our stakeholder. Our project was positively received and will officially be piloted in Spring 2026.

Connect with me on Linkedin

  • LinkedIn
bottom of page