{"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-07-30T07:25:34","modified_gmt":"2026-07-30T14:25:34","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-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 inert aria-labelledby=\"accordion-item-1\" data-wp-bind--inert=\"!state.isOpen\" 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\/\">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<\/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-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 inert aria-labelledby=\"accordion-item-2\" data-wp-bind--inert=\"!state.isOpen\" 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\/\">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<\/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-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 inert aria-labelledby=\"accordion-item-3\" data-wp-bind--inert=\"!state.isOpen\" 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<p class=\"wp-block-paragraph\"><em>Note: This is a static snapshot. An interactive feature will be added<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"673\" fetchpriority=\"low\" src=\"https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-29-at-3.11.46-PM-1024x673.png\" alt=\"\" class=\"wp-image-1379\" srcset=\"https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-29-at-3.11.46-PM-1024x673.png 1024w, https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-29-at-3.11.46-PM-300x197.png 300w, https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-29-at-3.11.46-PM-767x504.png 767w, https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/Screenshot-2026-07-29-at-3.11.46-PM.png 1388w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\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<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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":25,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1365\/revisions"}],"predecessor-version":[{"id":1418,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1365\/revisions\/1418"}],"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}]}}