Co-authors and learning designers: Anjana Sridharan, Ridha Fardian, Glendon Gardner, David Yeats, Kat Fardian, Rachael McCallum, Yoji Tatsuta and Maryann D’Sa
At the heart of UTS’s Learning Design and Technology Unit in the Education Portfolio, innovation thrives through co-designed student-centred learning. Guided by our UTS Learning Design Quality Framework, we foster creativity, flexibility and practical solutions in a constantly evolving educational landscape.
Over the past year, we’ve expanded from designing postgraduate subjects to include high-enrolment undergraduate courses, which require sustainable solutions that academics can maintain independently. By focusing on incremental innovations, we create student- and staff-friendly designs that are scalable and enduring.
Small changes, big impact
Incremental innovations are the backbone of our daily work. They may not always be the most glamorous, but their cumulative impact on teaching and learning is often transformative.
One example is the adaptation of an H5P quiz for two Work Integrated Learning (WIL) subjects in the Bachelor of Sport and Exercise Science. To support students working off-site while managing assessments, we tweaked button labels and used the H5P resume function to create an interactive checklist that students can return to throughout the course. This helps them track progress and complete tasks while providing teaching staff with real-time data.
Bringing colour to the Canvas with HTML
Another example emerged from our SPECTRA project, where learning designers developed inclusive pages and content blocks to help academics foster a sense of belonging in their subject sites. One such design, crafted with HTML and inline CSS, uses a linear gradient background to visually highlight a key inclusivity statement in Canvas LMS. This enhancement has since been adapted for an alert callout box on assessment pages to provide guidance on permitted GenAI use.
Care for every learner
We sought advice from the Inclusive Practices team to inform the design of accessible accordion versions of text as alternatives to multimedia content in PDF format. This approach improves usability, supports sustainability and ensures easier updates. From the outset, we consider colour contrast across all look-and-feel designs, including text and hyperlinks.
We then streamlined Canvas pages using flexbox layouts to create interactive, accessible and responsive designs. These elements remain fully preserved in stacked columns in Edit and Save page views, making it easy for academics to update content. By modifying existing tools like Canvas LMS and H5P, we’ve been able to provide sustainable and accessible solutions that improve both the student experience and the efficiency of our academic partners.
Coding in Canvas LMS with GenAI
We’re continually exploring what’s possible within Canvas. By combining our team’s technical expertise with GenAI tools, we’re also creating responsive HTML designs that enrich learning without relying on external resources.
These custom HTML designs, made using inline CSS and Canvas font icons, support imageless icons and responsive layouts such as process flows. Because we don’t have access to custom CSS outside the Canvas API, GenAI helps us navigate these constraints to build sustainable, flexible templates.
A useful prompt template to try
Please create a layout/design using pure HTML with inline CSS only, specifically for use in Canvas LMS. The design must be fully viewable and editable in both Canvas page Edit mode and Save mode. Avoid using <style>, <head>, or <body> tags, and do not include external CSS or scripts. Ensure the layout uses only Canvas-supported HTML and styles, and is responsive where possible (e.g., using Flexbox). If applicable, use Canvas icon classes (e.g., icon-arrow-open-end) for visuals. Use accessible HTML structure, ARIA attributes where needed, and ensure text and colour choices meet WCAG 2.1 AA contrast requirements and do not rely on colour alone to convey meaning, to support users with colour vision deficiency.
Example
Design a 3-step process flow with arrows between steps, using Canvas icon fonts for arrows. The steps should be in boxes, and arrows in circles. Use only HTML and inline CSS that will render the same in both Canvas Edit and Save views.
Note on using GenAI
We experiment with tools like ChatGPT and Claude, which perform well for maintaining UI/UX. However, some working knowledge of HTML and CSS is often needed to refine colour choices, align with brand guidelines or enhance for accessibility. We always use filler content while prototyping to protect intellectual property, as our approved GenAI tool is our enterprise-secure licence of CoPilot.
One of our unit members, Lucian Sutevski, has designed the Canvas LMS Design Helper custom GPT in ChatGPT. It specialises in HTML and CSS for Canvas LMS, utilising CSS Grid and Flexbox.
The importance of incremental innovation
While we’ve made significant strides in our innovations, we’re not done yet. We’re constantly experimenting and refining our designs to better serve our students and academics. Here are some examples:
- A six-petal flower diagram is being refined for responsiveness while retaining its visual integrity
- A colour-coded circle diagram is prompting us to explore alternatives to colour alone for conveying meaning
- An interactive taxonomy visual combines image assets and accordions as an alternative to hotspot diagrams
These ongoing efforts reflect our commitment to continuous improvement. Each innovation – no matter how small – is an opportunity to make a lasting impact on learning design at UTS.