Learning Context
Course-level learning outcomes (or objectives) are required components of a syllabus under UBC Senate Policy V-130. They outline what students are expected to achieve and demonstrate through assessment, providing the pedagogical rationale behind the course’s modules, learning activities, and overall evaluation design.
Design Challenge
Often positioned between the course description and the schedule, course learning outcomes are typically presented as a long list of bullet points. Because these outcomes are formally approved at the department or Senate level, they must remain consistent across different course offerings—making them difficult to revise or update at the individual section level.
Design Objective
Given these constraints, a question emerges: How can we help students see the explicit connection and alignment between static course learning outcomes and dynamic learning activities?
Design Experiments
For this design experiment, assessments are used as the main bridge to learning outcomes, representing the syllabus components students care about most.
Using generative AI tools, such as Bolt.new, Lovable, Claude, ChatGPT, and Google AI Studio, three distinct design concepts were developed to help students visualize how each learning outcome connects and aligns with specific course assessments:
The swimlane matrix transforms a traditional list of learning outcomes into an interactive experience. Rather than skimming through a long wall of bullet points, students can actively engage by clicking on outcomes and assessments to navigate between them, exploring how learning outcomes and assessments closely align.
Design Consideration
- Vertical Outcome Focus: Displays learning outcomes in a familiar vertical list so students stay focused on learning outcomes, with assessments placed along the bottom to encourage careful reading instead of passive skimming.
- Interactive Matrix Highlighting: Shows the full course layout by default, then highlights matching blocks when a student clicks any learning outcome or assessment so connections are easy to see.
- Connected View: Presents learning outcomes and assessments as an interconnected system rather than isolated tasks, keeping learning outcomes top-of-mind as students complete their work.
Example
Best Suited For
- Goal-Oriented Learning: Helps students realize that understanding course learning outcomes is key to their overall academic success.
- Clear Course Alignment: Best when assignments explicitly map to learning outcomes so students see how their work connects to big-picture goals.
- Web-Native Delivery: Delivers optimal performance as an interactive, web-based learning experience (URL-based).
Limitations
- Courses with more than five assignments extend the horizontal axis, which can limit the user experience on smaller screens or mobile devices.
How-to Guide
The Node Graph presents learning outcomes and assessments in an interactive network view, helping students visualize how each learning outcome connects to specific course assessments.
Design Consideration
- Visual Network View: Shows learning outcomes and assignments as connected points, making relationships easy to understand at a glance.
- Click to Highlight: Lights up matching connections when a student selects an outcome or assessment, showing exactly how they fit together.
Example
Note: This is a static snapshot. Click the button below to open the interactive version in full screen.
Best Suited For
- Connected Course Maps: Best for courses where assignments directly support specific learning outcomes.
- Visual Thinkers: Helps students who prefer seeing a direct, interconnected map over reading long, static text lists.
- Web-Native Delivery: Delivers optimal performance as an interactive, web-based learning experience (URL-based).
Limitations
- Courses with a high number of outcomes or assignments can create a crowded graph, making it harder to read on smaller screens or mobile devices.
- The moving flow animations and interactive features might feel crowded or overwhelming for some students (though the flow animations can be turned off).
- Interactive progressive disclosure requires careful technical implementation (e.g., screen reader).
How-to Guide
The simple matrix presents how assignments and course learning outcomes are connected in a simple, clear grid layout.
Design Consideration
- Grid Alignment View: Displays assignments line-by-line next to outcome columns, giving students a clear table of how each assignment connects across the course.
- Visual Markers: Uses colored dots in the grid to show which learning outcomes each assignment addresses at a glance.
- Interactive View: Highlights matching rows and columns whenever a student clicks an assignment or learning outcome, making connections easy to see.
Example
Best Suited For
- Comprehensive Tracking: Best for courses with many assignments, allowing students to see full course coverage in a single table without visual clutter.
- Direct Alignment: Helps students quickly check which specific learning outcomes they are working on for any given assignment.
- Web-Native Delivery: Delivers optimal performance as an interactive, web-based learning experience (URL-based).
Limitations
- Keeps assignments front and center rather than learning outcomes, which may lead students to focus more on completing tasks than understanding big-picture goals.
How-to Guide
Key Takeaways
- Start small. Transforming an entire traditional syllabus into a visual syllabus can be time-consuming and overwhelming. Rather than redesigning the entire document, begin with one or two high-impact sections, such as the course schedule, learning outcomes, or assessments. Visualizing even a small portion of your syllabus can make it more engaging, easier to navigate, and more meaningful for students.
- Use the AI prompts as a starting point, not the final product. Select a design option that best fits your course and adapt it using the AI prompts provided in the How-to Guide. Keep in mind that effective prompting is an iterative process. Expect to refine your prompts through multiple rounds of conversation with the AI. Depending on the level of customization you want, this process may take an hour or more. The more context and feedback you provide, the more closely the output will align with your instructional goals and design vision.
- Take advantage of multiple AI tools. Many AI platforms have usage limits, token restrictions, or premium features. While UBC faculty have access to Microsoft Copilot, you may also choose to use tools such as Claude or ChatGPT, depending on your preferences and available subscriptions. Consider starting your design process in one platform and then continuing in another by sharing the previous conversation or generated output. This approach can help you manage usage limits, reduce costs, and benefit from the different strengths of each AI tool. Don’t feel limited to a single platform—experiment with multiple tools to determine which ones best support your workflow.