Overview
In this case study, I will demonstrate two types of visual syllabus examples: a widely used document format and an interactive web-based format. I will walk you through how I used AI to transform selected syllabus elements to make them more engaging and interactive. I will also share some of the challenges I encountered and key takeaways that may help guide a more practical and effective application of AI in visual syllabus design.
Design Challenges
The ETEC 510 syllabus, taught by Dr. Jamilee Baroud (Summer 2024), was used for this case study. Overall, the syllabus is well structured and provides essential course information in accordance with UBC syllabus requirements, including the course description, learning objectives, course schedule, assessments, and course policies. It also uses appropriate headings and formatting to support readability and navigation.
However, it remains a traditional, static syllabus that relies primarily on text with limited visual elements. Some elements could be further enhanced through visual and interactive design to help students navigate the information more effectively, identify key information, and engage with content that is critical to their success.
Design Objective
This case study explores three questions:
- How can AI tools be used to transform a traditional course syllabus into a visual syllabus that enhances readability, understanding, and student engagement?
- What visual syllabus formats are recommended for different needs?
- What workflow can support the practical and effective use of AI tools in visual syllabus design?
Design Examples
Below are the two visual syllabus design examples created for this case study.
Design Consideration
Course Orientation & Navigation
- Added an infographic teaser to provide a high-level visual overview of the course and its description.
- Added a calendar view to give students a quick snapshot of the course structure, timeline, and workload.
- Enhanced the course schedule with improved table formatting to make weekly modules, topics, and activities easier to scan and navigate.
Assessment & Learning Alignment
- Added a pie chart to visually summarize the assessment structure and distribution.
- Added a learning outcomes–assignment matrix to illustrate how each assignment connects to the course learning outcomes, helping students understand the purpose and alignment of their assessments.
Readings & Essential Course Information
- Added a data summary of the readings to provide an analytical overview of the reading workload and content.
- Organized course policies by category and incorporated infographics to highlight critical information, helping students identify and engage with important policies rather than overlooking them.
Best Suited When
- You want to retain the approved syllabus content and structure with minimal changes while enhancing selected elements through visual design.
- Accessibility and flexibility are priorities, as a traditional document is easy to view, download, save, print, and share across different devices and platforms.
- You want to minimize design and development effort while still improving the visual presentation of key course information.
Limitations
- Interactive features are limited, compared with a web-based visual syllabus.
- More complex visualizations or interactive elements may require additional design tools or development effort.
How-to Guide
1. Select elements to visualize
Identify syllabus elements that could be clearer or more engaging when presented visually.
2. Explore designs with AI tools
Use multiple AI tools and prompts to generate and refine design options.
In this case study, I used Gemini Notebook to create the course description teaser, course policies, revised schedule table, and assessment pie chart. I prompted Bolt.new, Claude, and ChatGPT to create the calendar view, learning outcomes–assignment matrix, and reading resources summary. See the following posts for a more detailed walkthrough:
- How To Visualize Your Syllabus with Gemini Notebook
- Visual Syllabus – Course Schedule
- Visual Syllabus – Learning Outcomes
- Visual Syllabus – Readings
3. Add visuals to the syllabus
Export the visuals as image files and place them in the appropriate sections based on the content flow.
4. Save and share
Save the final syllabus in a preferred format, such as Word or Google Docs.
Design Consideration
Navigation & Course Orientation
- Placed key information, such as the course description and learning objectives, on the home page for quick access.
- Organized major content areas into separate pages to simplify navigation and reduce cognitive overload.
- Added a top navigation menu and search bar for easy navigation and quick access to information.
Learning Outcomes & Assessment
- Added a dynamic learning outcomes–assessment node graph to visualize the connections between learning outcomes and assessments.
Course Schedule & Readings
- Added interactive topical and calendar views of the course schedule to help students explore the course timeline and structure.
- Added an interactive reading list overview that allows students to browse resources by category and identify different perspectives.
Course Policies
- Reorganized course policies by category and added keywords to make key topics easier to identify.
- Added keyword search to help students quickly locate relevant policies.
Student Welcome & Engagement
- Added an animated GIF of the instructor’s portrait to the home page as a welcoming element and to create a more personal first impression.
Best Suited When
- Interactivity is a priority and dynamic features support your course goals and students’ learning needs.
- You have flexibility to go beyond the approved syllabus content by adding, revising, or reorganizing information.
- You are open to experimenting with new formats and delivery formats to enhance the learning experience.
- You want a syllabus that can evolve over time, allowing you to update information and use it as an active communication and engagement tool rather than a static document.
Limitations
- Internet access is required to access the live syllabus site or web page.
- Some interactive features may need to be limited or adapted to ensure accessibility.
- Too many interactive elements may feel overwhelming for some students.
- A learning curve may be required to design, develop, and maintain a web-hosted site.
How-to Guide
Option 1
1. Select elements to visualize
Identify syllabus elements that could be clearer or more engaging when presented visually.
2. Explore designs with AI tools
Use multiple AI tools and prompts to generate and refine design options.
In this case study, I used Gemini Notebook to create the course description teaser and assessment pie chart. I prompted Bolt.new, Claude, and ChatGPT to create the interactive course schedule, learning outcomes–assignment matrix, reading resources summary, and course policies keyword search. See the following posts for a more detailed walkthrough:
- How To Visualize Your Syllabus with Gemini Notebook
- Visual Syllabus – Course Schedule
- Visual Syllabus – Learning Outcomes
- Visual Syllabus – Readings
3. Add visuals to the syllabus site
Add the visuals or embed the designs into the web-hosted site. Google Sites is highly recommended for its ease of use.
4. Publish and share
Publish your site and share the link.
Option 2
- Create slides with AI by uploading your current syllabus. Gamma.app is highly recommended for its ease of use and high-quality designs.
- Use the slides as site content by adding relevant slides to the appropriate sections of your site.
- Optionally, add AI-generated interactive features to enhance navigation and engagement.
Key Takeaways
I recommend not trying to visualize the entire syllabus at once, especially on the first attempt. AI may take the design in a different direction than you originally envisioned, adding auto-generated text and images that do not always align with your course goals or instructor needs. Instead, take a segmented approach. First, critically review your syllabus and identify one or two sections that would benefit most from visual enhancement. Then, experiment with multiple AI tools and iterations to explore and refine different design options.
From this case study, I found that human review and modification were essential, regardless of which visual syllabus format was chosen. AI-generated designs required adjustments to ensure that the final products aligned with the course content, instructor needs, and intended student experience. Nevertheless, AI tools can significantly reduce the time and effort required for instructors to transform a traditional syllabus into a more effective and engaging format.
Another important consideration is about AI-generated text. I found that AI often adds new text or automatically paraphrases the source content, which can subtly change the original meaning or introduce assumptions. Even when prompted to use only the provided content, this instruction could be lost through multiple rounds of design iterations. Carefully review all AI-generated text and compare it against the original syllabus content before finalizing the design.
Finally, for recommended AI tools by purpose, check out this post: Recommended AI Tools by Purpose