Learning Context
According to UBC Senate Policy V-130, a course schedule is a required component of the syllabus. It outlines the sequence of course topics and other scheduled course elements, helping students understand the course structure and plan their learning.
Design Challenge
However, course schedules are often presented as dense tables or text-heavy lists. This makes it difficult for students to quickly identify key tasks, see connections across the course, and effectively plan their workload.
Design Objective
How can course schedule be presented in a way that is easy to scan, visually engaging, and supports students in planning their workload?
The goal was to transform the course schedule from a static table into an interactive visual overview that helps students quickly understand the course sequence and structure, anticipate upcoming milestones, and plan their learning more effectively.
Design Experiments
Using multiple generative AI tools, including Bolt.new, Claude, ChatGPT, and Google AI Studio, design experiments explored different approaches to creating interactive and visually engaging course schedule formats:
The linear flowchart design encourages students to shift from passive receivers to active users by moving from simple scanning to exploring, clicking, scrolling, and filtering.
Design Consideration
- Topical Outline: Presents sequential topics with visual cues to help students quickly see the course structure.
- Sequential Flowchart: Provides a clear chronological roadmap rather than the comparison table.
- Filter View: Allows students to view specific learning activities (e.g., readings, discussions, assessments), reducing information overload.
- View Schedule By: Enables students to customize the schedule view based on their needs.
- Interactive Navigation: Allows students to explore additional details on demand while keeping the interface clean.
Example
Best Suited For
- Complex Course Schedules: Ideal when a course schedule includes dense, multi-layered information (such as learning activities, readings, and assessments) that needs to be organized cleanly.
- Web-Native Delivery: Delivers optimal performance as an interactive, web-based learning experience (URL-based).
Limitations
- May become lengthy when presenting detailed course information.
- Less intuitive for learners who are familiar with calendar-based scheduling.
The weekly timeline design presents course structures and assignments in a horizontal calendar format, providing students with an intuitive, at-a-glance overview of the course.
Design Consideration
- Weekly Calendar View: Displays each module and its corresponding assignments week by week, making the overall course progression easy to grasp.
- View Schedule By: Enables students to customize their view by topic or assignment type to focus on specific needs.
- Interactive Navigation: Allows students to explore detailed information on demand while keeping the primary interface clean and uncluttered.
Example
Best Suited For
- High-Level Visual Summaries: Provides a clear, bird’s-eye view of course structures, deadlines, and assignments via a calendar interface.
- Workload Planning: Helps students anticipate weekly time commitments and organize their schedules accordingly.
- Active Engagement: Prevents students from skimming past critical details by requiring intentional interaction to reveal in-depth content.
- Web-Native Delivery: Delivers optimal performance as an interactive, web-based learning experience (URL-based).
Limitations
- Information hidden behind interactions may be overlooked if visual affordances (cues to click) are not immediately clear.
- Interactive progressive disclosure requires careful technical implementation (e.g., screen reader).
The swimlane matrix design displays course structures, topics, and assignments in a clear grid format, doubling as an interactive progress checklist that encourages students to take an active role in planning their learning.
Design Consideration
- Matrix View: Organizes modules, topics, and assignments in a grid layout, making the overall course progression visible at a glance.
- Interactive Progress Checklist: Moves beyond passive information delivery by allowing students to actively track and check off completed tasks.
- Overall Course Progress Tracker: Provides real-time visual feedback on completion status as students check off items, helping them quickly gauge where they stand in the course.
Example
Best Suited For
- Structured Course Mapping: Ideal for courses with clearly defined weekly topics, readings, and deliverables.
- Self-Directed Progress Tracking: Benefits students who thrive on active task management by allowing them to check off completed items and plan upcoming workloads.
- Web-Native Delivery: Delivers optimal performance as an interactive, web-based learning experience (URL-based).
Limitations
- Displaying the full course structure upfront without filtering can feel overwhelming to some learners.
- Interactive elements—such as dynamic progress tracking—do not translate well to static PDF formats.