{"id":1365,"date":"2026-07-30T07:16:58","date_gmt":"2026-07-30T14:16:58","guid":{"rendered":"https:\/\/blogs.ubc.ca\/rankang\/?p=1365"},"modified":"2026-08-14T18:43:02","modified_gmt":"2026-08-15T01:43:02","slug":"visual-syllabus-learning-outcomes","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/rankang\/visual-syllabus-learning-outcomes\/","title":{"rendered":"Visual Syllabus &#8211; Learning Outcomes"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Learning Context<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Course-level learning outcomes (or objectives) are required components of a syllabus under <a href=\"https:\/\/senate.ubc.ca\/files\/Policy-20190207-V-130-Syllabus.pdf\">UBC Senate Policy V-130<\/a>. They outline what students are expected to achieve and demonstrate through assessment, providing the pedagogical rationale behind the course\u2019s modules, learning activities, and overall evaluation design.<\/p>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Design Challenge<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2014making them difficult to revise or update at the individual section level.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"352\" src=\"https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-5.53.44-AM-edited.png\" alt=\"\" class=\"wp-image-1393\" srcset=\"https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-5.53.44-AM-edited.png 718w, https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-5.53.44-AM-edited-300x147.png 300w\" sizes=\"auto, (max-width: 718px) 100vw, 718px\" \/><figcaption class=\"wp-element-caption\">Reference Course: ETEC 510 (Summer 2024)<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Design Objective <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Given these constraints, a question emerges: <strong>How can we help students see the explicit connection and alignment between static course learning outcomes and dynamic learning activities?<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Design Experiments <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For this design experiment, assessments are used as the main bridge to learning outcomes, representing the syllabus components students care about most.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-1&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading has-icon has-icon-right has-background\" style=\"background-color:#D1D5DB\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-1-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-1\" type=\"button\" class=\"wp-block-accordion-heading__toggle\" style=\"padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\"><span class=\"wp-block-accordion-heading__toggle-title\">Swimlane Matrix<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-1\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-1-panel\" role=\"region\" class=\"wp-block-accordion-panel has-background has-global-padding is-layout-constrained wp-container-core-accordion-panel-is-layout-30f0caf0 wp-block-accordion-panel-is-layout-constrained\" style=\"background-color:#D1D5DB;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Design Consideration<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vertical Outcome Focus:<\/strong> 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.<\/li>\n\n\n\n<li><strong>Interactive Matrix Highlighting:<\/strong> 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.<\/li>\n\n\n\n<li><strong>Connected View:<\/strong> Presents learning outcomes and assessments as an interconnected system rather than isolated tasks, keeping learning outcomes top-of-mind as students complete their work.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Example<\/h4>\n\n\n\n<iframe src=\"https:\/\/ranslearninglab.github.io\/claude_LO\/\" width=\"100%\" height=\"900\" style=\"border:none;\" loading=\"lazy\">\n<\/iframe>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/ranslearninglab.github.io\/claude_LO\/\" target=\"_blank\" rel=\"noopener\">Swimlane Matrix (Open in New Window)<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Best Suited For<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Goal-Oriented Learning:<\/strong> Helps students realize that understanding course learning outcomes is key to their overall academic success.<\/li>\n\n\n\n<li><strong>Clear Course Alignment:<\/strong> Best when assignments explicitly map to learning outcomes so students see how their work connects to big-picture goals.<\/li>\n\n\n\n<li><strong>Web-Native Delivery:<\/strong> Delivers optimal performance as an interactive, web-based learning experience (URL-based).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Limitations<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Courses with more than five assignments extend the horizontal axis, which can limit the user experience on smaller screens or mobile devices.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">How-to Guide<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/blogs.ubc.ca\/rankang\/ai-prompts-swimlane-matrix-learning-outcomes\/\" target=\"_blank\" rel=\"noopener\">AI Prompts \u2013 Swimlane Matrix Learning Outcomes<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-2&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading has-icon has-icon-right has-background\" style=\"background-color:#D1D5DB\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-2-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-2\" type=\"button\" class=\"wp-block-accordion-heading__toggle\" style=\"padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\"><span class=\"wp-block-accordion-heading__toggle-title\">Node Graph<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-2\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-2-panel\" role=\"region\" class=\"wp-block-accordion-panel has-background has-global-padding is-layout-constrained wp-container-core-accordion-panel-is-layout-30f0caf0 wp-block-accordion-panel-is-layout-constrained\" style=\"background-color:#D1D5DB;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Design Consideration<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual Network View:<\/strong> Shows learning outcomes and assignments as connected points, making relationships easy to understand at a glance.<\/li>\n\n\n\n<li><strong>Click to Highlight:<\/strong> Lights up matching connections when a student selects an outcome or assessment, showing exactly how they fit together.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Example<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note: This is a static snapshot. Click the button below to open the interactive version in full screen.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"621\" fetchpriority=\"low\" src=\"https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-6.17.03-AM-1024x621.png\" alt=\"\" class=\"wp-image-1397\" srcset=\"https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-6.17.03-AM-1024x621.png 1024w, https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-6.17.03-AM-300x182.png 300w, https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-6.17.03-AM-767x465.png 767w, https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-6.17.03-AM-1536x932.png 1536w, https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-30-at-6.17.03-AM.png 1876w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/ranslearninglab.github.io\/google_LO1\/\" target=\"_blank\" rel=\"noopener\">Node Graph (Open in New Window)<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Best Suited For<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Connected Course Maps:<\/strong> Best for courses where assignments directly support specific learning outcomes.<\/li>\n\n\n\n<li><strong>Visual Thinkers:<\/strong> Helps students who prefer seeing a direct, interconnected map over reading long, static text lists.<\/li>\n\n\n\n<li><strong>Web-Native Delivery:<\/strong> Delivers optimal performance as an interactive, web-based learning experience (URL-based).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Limitations<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>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.<\/li>\n\n\n\n<li>The moving flow animations and interactive features might feel crowded or overwhelming for some students (though the flow animations can be turned off).<\/li>\n\n\n\n<li>Interactive progressive disclosure requires careful technical implementation (e.g., screen reader).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">How-to Guide<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/blogs.ubc.ca\/rankang\/ai-prompts-node-graph-learning-outcomes\/\">AI Prompts &#8211; Node Graph Learning Outcomes<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-3&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading has-icon has-icon-right has-background\" style=\"background-color:#D1D5DB\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-3-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" id=\"accordion-item-3\" type=\"button\" class=\"wp-block-accordion-heading__toggle\" style=\"padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\"><span class=\"wp-block-accordion-heading__toggle-title\">Simple Matrix <\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-3\" data-wp-bind--hidden=\"state.isHidden\" data-wp-on--beforematch=\"actions.handleBeforeMatch\" id=\"accordion-item-3-panel\" role=\"region\" class=\"wp-block-accordion-panel has-background has-global-padding is-layout-constrained wp-container-core-accordion-panel-is-layout-30f0caf0 wp-block-accordion-panel-is-layout-constrained\" style=\"background-color:#D1D5DB;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n<p class=\"wp-block-paragraph\">The simple matrix presents how assignments and course learning outcomes are connected in a simple, clear grid layout. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Design Consideration<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Grid Alignment View:<\/strong> Displays assignments line-by-line next to outcome columns, giving students a clear table of how each assignment connects across the course.<\/li>\n\n\n\n<li><strong>Visual Markers:<\/strong> Uses colored dots in the grid to show which learning outcomes each assignment addresses at a glance.<\/li>\n\n\n\n<li><strong>Interactive View:<\/strong> Highlights matching rows and columns whenever a student clicks an assignment or learning outcome, making connections easy to see.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Example<\/h4>\n\n\n\n<iframe src=\"https:\/\/ranslearninglab.github.io\/lovable_LO\/\" width=\"100%\" height=\"900\" style=\"border:none;\" loading=\"lazy\">\n<\/iframe>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/ranslearninglab.github.io\/lovable_LO\/\" target=\"_blank\" rel=\"noopener\">Open in New Window (Simple Matrix)<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:17px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Best Suited For<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Comprehensive Tracking:<\/strong> Best for courses with many assignments, allowing students to see full course coverage in a single table without visual clutter.<\/li>\n\n\n\n<li><strong>Direct Alignment:<\/strong> Helps students quickly check which specific learning outcomes they are working on for any given assignment.<\/li>\n\n\n\n<li><strong>Web-Native Delivery:<\/strong> Delivers optimal performance as an interactive, web-based learning experience (URL-based).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Limitations<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keeps assignments front and center rather than learning outcomes, which may lead students to focus more on completing tasks than understanding big-picture goals.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">How-to Guide <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/blogs.ubc.ca\/rankang\/ai-prompts-simple-matrix-learning-outcomes\/\" target=\"_blank\" rel=\"noopener\">AI Prompts \u2013 Simple Matrix Learning Outcomes<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Start small.<\/strong> 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 <em>course schedule, learning outcomes<\/em>, or <em>assessments<\/em>. Visualizing even a small portion of your syllabus can make it more engaging, easier to navigate, and more meaningful for students.<\/li>\n\n\n\n<li><span style=\"white-space: normal\"><strong>Use the AI prompts as a starting point, not the final product.<\/strong> Select a design option that best fits your course and adapt it using the AI prompts provided in the <em>How-to Guide<\/em>. 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.<\/span><\/li>\n\n\n\n<li><strong>Take advantage of multiple AI tools.<\/strong> 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&#8217;t feel limited to a single platform\u2014experiment with multiple tools to determine which ones best support your workflow.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019s modules, learning activities, and overall evaluation design. Design Challenge Often positioned between the course description and the schedule, [&hellip;]<\/p>\n","protected":false},"author":101268,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[26,29],"class_list":["post-1365","post","type-post","status-publish","format-standard","hentry","category-blog-posts","tag-etec-581","tag-visual-syllabus"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/users\/101268"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/comments?post=1365"}],"version-history":[{"count":32,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1365\/revisions"}],"predecessor-version":[{"id":1622,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1365\/revisions\/1622"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/media?parent=1365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/categories?post=1365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/tags?post=1365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}