As a next step, I chose to redesign a core element of the traditional syllabus into a visual format to see how specific content can be better represented.<\/p>\n\n\n\n
According to UBC Senate Policy V-130<\/a>, a course schedule<\/em> is one of the required elements that must be included in every syllabus at UBC.<\/p>\n\n\n\n\nd. A proposed course schedule including a list of topics;<\/p>\n<\/blockquote>\n\n\n\nA course schedule provides students a nice overview of topics, activities, and assignments by each week so they can see the whole course structure and plan their work. However, they are often designed as plain, crowded tables or long lists of text that are hard to read. To make it clearer, easier to read, and more engaging, I tried out a few design ideas using information from the ETEC 543 (Summer 2024) course syllabus. <\/p>\n\n\n\nExamples <\/h3>\n\n\n\nCourse Schedule from the ETEC 510 Syllabus (Summer 2024)<\/figcaption><\/figure>\n\n\n\nCourse Schedule from the ETEC 543 Syllabus (Summer 2024)<\/figcaption><\/figure>\n\n\n\nDesign Explorations<\/h3>\n\n\n\nHere is what I built by vibe coding across several AI tools, including Bolt.new, Claude Projects, Google AI Studio, and ChatGPT.<\/p>\n\n\n\n\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\/courseschedule\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Design Features <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Roadmap: <\/strong>Displays a clean, chronological roadmap style rather than the comparison table.<\/li>\n\n\n\n<li><strong>Legend:<\/strong> Provides a clear guide to colours and activity categories for quick interpretation.<\/li>\n\n\n\n<li><strong>Filter View:<\/strong> Allows students to view specific learning activities (e.g., readings, discussions, assessments), reducing information overload.<\/li>\n\n\n\n<li><strong>Module View: <\/strong>Adds visual cues for sequential topics so students can easily see the course structure and activities included in each module at a glance.<\/li>\n\n\n\n<li><strong>View Schedule By:<\/strong> Allows students to filter their view to focus only on what they need, reducing information overload.<\/li>\n\n\n\n<li><strong>Colour Coding<\/strong>: Uses blue colour to align with the UBC branding and different colour codings to distinguish activity types, making information easier to scan and navigate.<\/li>\n\n\n\n<li><strong>Interactive Navigation<\/strong>: Students can explore information on demand, keeping the interface clean while providing additional details when needed.<\/li>\n<\/ul>\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>Complex Course Schedule with Activities: <\/strong>When a course schedule includes a list of learning activities and assessments for each module.<\/li>\n\n\n\n<li><strong>Interactive Planning Needs:<\/strong> When students benefit from an interactive tool to manage tasks and assignments by schedule.<\/li>\n\n\n\n<li><strong>Web-Native Delivery: <\/strong>When the syllabus is delivered via an interactive web page (URL) rather than a static PDF.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike typical syllabi that present topics directly within the course schedule, the syllabus used for this design exploration places them in a separate section as part of the course introduction. To address this, I built a <strong>Topical Outline<\/strong> to provide a high-level snapshot of all course topics at a glance.<\/p>\n\n\n\n<iframe src=\"https:\/\/ranslearninglab.github.io\/courseschedule_bolt2\/\" 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\/courseschedule_bolt2\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When a course schedule focuses on overall topics rather than specific learning activities\u2014such as in ETEC 510\u2014the design can be adapted as follows:<\/p>\n\n\n\n<iframe src=\"https:\/\/ranslearninglab.github.io\/courseschedule_topics_ETEC510\/\" 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\/courseschedule_topics_ETEC510\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here’s a preview link to another design explorations in progress, mainly built on Google AI Studio. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/ai.studio\/apps\/fb334203-4718-4ced-a75f-82e78c2abf9e\">https:\/\/ai.studio\/apps\/fb334203-4718-4ced-a75f-82e78c2abf9e<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Intro As a next step, I chose to redesign a core element of the traditional syllabus into a visual format to see how specific content can be better represented. Why Course Schedule? According to UBC Senate Policy V-130, a course schedule is one of the required elements that must be included in every syllabus at […]<\/p>\n","protected":false},"author":101268,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[26],"class_list":["post-1273","post","type-post","status-publish","format-standard","hentry","category-blog-posts","tag-etec-581"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273","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=1273"}],"version-history":[{"count":15,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273\/revisions"}],"predecessor-version":[{"id":1298,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273\/revisions\/1298"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/media?parent=1273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/categories?post=1273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/tags?post=1273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nd. A proposed course schedule including a list of topics;<\/p>\n<\/blockquote>\n\n\n\nA course schedule provides students a nice overview of topics, activities, and assignments by each week so they can see the whole course structure and plan their work. However, they are often designed as plain, crowded tables or long lists of text that are hard to read. To make it clearer, easier to read, and more engaging, I tried out a few design ideas using information from the ETEC 543 (Summer 2024) course syllabus. <\/p>\n\n\n\nExamples <\/h3>\n\n\n\nCourse Schedule from the ETEC 510 Syllabus (Summer 2024)<\/figcaption><\/figure>\n\n\n\nCourse Schedule from the ETEC 543 Syllabus (Summer 2024)<\/figcaption><\/figure>\n\n\n\nDesign Explorations<\/h3>\n\n\n\nHere is what I built by vibe coding across several AI tools, including Bolt.new, Claude Projects, Google AI Studio, and ChatGPT.<\/p>\n\n\n\n\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\/courseschedule\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Design Features <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Roadmap: <\/strong>Displays a clean, chronological roadmap style rather than the comparison table.<\/li>\n\n\n\n<li><strong>Legend:<\/strong> Provides a clear guide to colours and activity categories for quick interpretation.<\/li>\n\n\n\n<li><strong>Filter View:<\/strong> Allows students to view specific learning activities (e.g., readings, discussions, assessments), reducing information overload.<\/li>\n\n\n\n<li><strong>Module View: <\/strong>Adds visual cues for sequential topics so students can easily see the course structure and activities included in each module at a glance.<\/li>\n\n\n\n<li><strong>View Schedule By:<\/strong> Allows students to filter their view to focus only on what they need, reducing information overload.<\/li>\n\n\n\n<li><strong>Colour Coding<\/strong>: Uses blue colour to align with the UBC branding and different colour codings to distinguish activity types, making information easier to scan and navigate.<\/li>\n\n\n\n<li><strong>Interactive Navigation<\/strong>: Students can explore information on demand, keeping the interface clean while providing additional details when needed.<\/li>\n<\/ul>\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>Complex Course Schedule with Activities: <\/strong>When a course schedule includes a list of learning activities and assessments for each module.<\/li>\n\n\n\n<li><strong>Interactive Planning Needs:<\/strong> When students benefit from an interactive tool to manage tasks and assignments by schedule.<\/li>\n\n\n\n<li><strong>Web-Native Delivery: <\/strong>When the syllabus is delivered via an interactive web page (URL) rather than a static PDF.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike typical syllabi that present topics directly within the course schedule, the syllabus used for this design exploration places them in a separate section as part of the course introduction. To address this, I built a <strong>Topical Outline<\/strong> to provide a high-level snapshot of all course topics at a glance.<\/p>\n\n\n\n<iframe src=\"https:\/\/ranslearninglab.github.io\/courseschedule_bolt2\/\" 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\/courseschedule_bolt2\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When a course schedule focuses on overall topics rather than specific learning activities\u2014such as in ETEC 510\u2014the design can be adapted as follows:<\/p>\n\n\n\n<iframe src=\"https:\/\/ranslearninglab.github.io\/courseschedule_topics_ETEC510\/\" 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\/courseschedule_topics_ETEC510\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here’s a preview link to another design explorations in progress, mainly built on Google AI Studio. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/ai.studio\/apps\/fb334203-4718-4ced-a75f-82e78c2abf9e\">https:\/\/ai.studio\/apps\/fb334203-4718-4ced-a75f-82e78c2abf9e<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Intro As a next step, I chose to redesign a core element of the traditional syllabus into a visual format to see how specific content can be better represented. Why Course Schedule? According to UBC Senate Policy V-130, a course schedule is one of the required elements that must be included in every syllabus at […]<\/p>\n","protected":false},"author":101268,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[26],"class_list":["post-1273","post","type-post","status-publish","format-standard","hentry","category-blog-posts","tag-etec-581"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273","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=1273"}],"version-history":[{"count":15,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273\/revisions"}],"predecessor-version":[{"id":1298,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273\/revisions\/1298"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/media?parent=1273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/categories?post=1273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/tags?post=1273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
d. A proposed course schedule including a list of topics;<\/p>\n<\/blockquote>\n\n\n\n
A course schedule provides students a nice overview of topics, activities, and assignments by each week so they can see the whole course structure and plan their work. However, they are often designed as plain, crowded tables or long lists of text that are hard to read. To make it clearer, easier to read, and more engaging, I tried out a few design ideas using information from the ETEC 543 (Summer 2024) course syllabus. <\/p>\n\n\n\n
Here is what I built by vibe coding across several AI tools, including Bolt.new, Claude Projects, Google AI Studio, and ChatGPT.<\/p>\n\n\n\n\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\/courseschedule\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Design Features <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Roadmap: <\/strong>Displays a clean, chronological roadmap style rather than the comparison table.<\/li>\n\n\n\n<li><strong>Legend:<\/strong> Provides a clear guide to colours and activity categories for quick interpretation.<\/li>\n\n\n\n<li><strong>Filter View:<\/strong> Allows students to view specific learning activities (e.g., readings, discussions, assessments), reducing information overload.<\/li>\n\n\n\n<li><strong>Module View: <\/strong>Adds visual cues for sequential topics so students can easily see the course structure and activities included in each module at a glance.<\/li>\n\n\n\n<li><strong>View Schedule By:<\/strong> Allows students to filter their view to focus only on what they need, reducing information overload.<\/li>\n\n\n\n<li><strong>Colour Coding<\/strong>: Uses blue colour to align with the UBC branding and different colour codings to distinguish activity types, making information easier to scan and navigate.<\/li>\n\n\n\n<li><strong>Interactive Navigation<\/strong>: Students can explore information on demand, keeping the interface clean while providing additional details when needed.<\/li>\n<\/ul>\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>Complex Course Schedule with Activities: <\/strong>When a course schedule includes a list of learning activities and assessments for each module.<\/li>\n\n\n\n<li><strong>Interactive Planning Needs:<\/strong> When students benefit from an interactive tool to manage tasks and assignments by schedule.<\/li>\n\n\n\n<li><strong>Web-Native Delivery: <\/strong>When the syllabus is delivered via an interactive web page (URL) rather than a static PDF.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike typical syllabi that present topics directly within the course schedule, the syllabus used for this design exploration places them in a separate section as part of the course introduction. To address this, I built a <strong>Topical Outline<\/strong> to provide a high-level snapshot of all course topics at a glance.<\/p>\n\n\n\n<iframe src=\"https:\/\/ranslearninglab.github.io\/courseschedule_bolt2\/\" 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\/courseschedule_bolt2\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When a course schedule focuses on overall topics rather than specific learning activities\u2014such as in ETEC 510\u2014the design can be adapted as follows:<\/p>\n\n\n\n<iframe src=\"https:\/\/ranslearninglab.github.io\/courseschedule_topics_ETEC510\/\" 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\/courseschedule_topics_ETEC510\/\" target=\"_blank\" rel=\"noopener\">Open in New Window<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here’s a preview link to another design explorations in progress, mainly built on Google AI Studio. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/ai.studio\/apps\/fb334203-4718-4ced-a75f-82e78c2abf9e\">https:\/\/ai.studio\/apps\/fb334203-4718-4ced-a75f-82e78c2abf9e<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Intro As a next step, I chose to redesign a core element of the traditional syllabus into a visual format to see how specific content can be better represented. Why Course Schedule? According to UBC Senate Policy V-130, a course schedule is one of the required elements that must be included in every syllabus at […]<\/p>\n","protected":false},"author":101268,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[26],"class_list":["post-1273","post","type-post","status-publish","format-standard","hentry","category-blog-posts","tag-etec-581"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273","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=1273"}],"version-history":[{"count":15,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273\/revisions"}],"predecessor-version":[{"id":1298,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/posts\/1273\/revisions\/1298"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/media?parent=1273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/categories?post=1273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/rankang\/wp-json\/wp\/v2\/tags?post=1273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/image-3.png\")
![\"\"](\"https:\/\/blogs.ubc.ca\/rankang\/files\/2026\/07\/image-4-822x1024.png\")