Cover image for UX Design Toolkit (TUX) for Learning Design

Coding Projects

UX Design Toolkit (TUX) for Learning Design

A UX toolkit providing reusable components, templates, and guidelines to ensure consistency and quality across online courses.

RoleToolkit Author, Facilitator, UX/LD IntegrationYear2024DurationOngoingTeamSolo
Learning DesignUX ToolkitHigher EducationCanvas LMSAI-Assisted
Collage of toolkit cards and a learning design workshop in progress

UX Design Toolkit (TUX) for Learning Design

Practical UX methods adapted for course and learning design

Estimated reading time: 3 minutes

Project brief

A UX-for-learning toolkit was needed to provide fast, repeatable, and accessible methods for course design. Success is defined by enabling learning designers and academics to consistently apply user-centred principles, improving the quality of educational experiences and streamlining the development process.

The problem

  • Inconsistent methods used across different course design projects.
  • Scattered artefacts and documentation leading to lost knowledge.
  • Tight schedules with academics leaving little time for deep UX research.
  • Weak decision trails making it hard to justify design choices.
  • Uneven application of accessibility standards.

The solution — TUX

  1. Curated methods for learning designAdapted UX activities mapped to common course problems.
  2. Ready-to-run assetsMethod cards, canvases, and facilitator scripts to use out-of-the-box.
  3. Time-boxed formats15, 30, and 60-minute variants for busy contributors.
  4. Evidence & decision trailsLightweight capture methods to link insights directly to design choices.
  5. Accessibility by defaultTemplates with readable typescale, high contrast, and printable black & white versions.

Design approach

Research

The process began with a brief literature scan and interviews with learning designers and academics to understand their current workflows and pain points.

Synthesis

Needs were mapped to established UX techniques, and common constraints (like time and resources) were defined to shape the workshop formats.

Prototyping & tests

Several pilot workshops were run to test and iterate on the templates, timings, and language, ensuring they were practical and easy to understand for the target audience.

The team — “Cheese Bags”

Alex dropped a meme in the team chat — a box of “Stay Fresh Cheese Bags” with the caption “Found something new to say when I leave a room.” That was it. Nobody planned it, nobody voted on it. It just became the sign-off, the vibe, the whole thing. Practical, a bit absurd, always fresh. Tim, Kelli, Alex and Rich — aka Cheese Bags.

Stay Fresh Cheese Bags meme — Found something new to say when I leave a room

From prompt to prototype (ChatGPT + GitHub)

Overview

As a coding partner, ChatGPT helped scaffold the initial toolkit website, which was then hosted on GitHub Pages. This allowed for rapid, vibe-driven development.

The challenge

  • Translating abstract "UX vibes" into concrete HTML, CSS, and JavaScript.
  • Navigating version control and deployment for the first time.
  • Keeping UX testing of the toolkit distinct from generic feedback on the website itself.
  • Integrating reputable methods and accessible tools into the content.

Process highlights

  • Opening Pandora's Chatbox: Structured HTML on the fly; tailored CSS to the university's brand palette; added JavaScript for search and a "scroll-to-top" button; received step-by-step deployment guidance.
  • GitHub, my frenemy: Followed beginner-friendly flows (initialise repository, commit changes, push to remote, deploy via GitHub Pages); learned to recover from mistakes late at night.
  • The toolkit takes shape (site structure): The site structure evolved to include: Home, Methodologies, Tools, Resources, and Contact, with a search.js file for functionality. Content was anchored in reputable sources like NN/g and IDF.
  • Branded beauty: Applied the university's blue, purple, and limestone palette to ensure readability, consistency, and accessibility.

Reflections on design process

Skipping wireframes in favour of a fast build-and-learn cycle proved effective. The layout of the homepage and profile cards evolved through iteration. The "break one thing, fix three" loop became a familiar challenge, often solved with terse prompts when tired.

The outcome

  • A live prototype site successfully stood up on GitHub Pages.
  • Structured guidance for educators was made available.
  • Integrated recommendations for external tools.
  • Demonstrated a powerful blend of human creativity and AI assistance.

Lessons learned

  • Vibe-driven coding with clear prompts unleashes progress for non-developers.
  • Iteration is painful but powerful, especially with version control for diffs and rollbacks.
  • Clarity is crucial—separating UX testing from generic feedback is key.
  • GitHub is a universal toolkit that extends far beyond software teams.

Future directions

  • Conduct further qualitative research to validate and refine the toolkit's methods.
  • Collaborate with the UX group to map the toolkit's structure to a universal design process (Empathise, Define, Ideate, Prototype, Evaluate, Iterate, Share Outcomes).
  • Create short video walkthroughs for key methods.
  • Improve repository hygiene and documentation.
  • Collaborate with media and engineering teams for advanced features.
  • Advocate for broader adoption across the institution.

Toolkit composition

  • Method cards detailing when and how to use each technique.
  • Canvases for mapping learner jobs, journeys, risks, assumptions, and a decision trail.
  • Workshop run sheets with step-by-step instructions.
  • Completed examples to provide clear reference points.
  • A master slide deck for presenting methods and findings.
  • A facilitator checklist to ensure smooth session delivery.

Outcomes

  • A clearer, more consistent facilitation flow for workshops.
  • Reduced preparation time thanks to ready-to-use assets.
  • Reusable and transparent decision trails for better project documentation.
  • Positive feedback and requests for further sessions from participants.

Reflection & next steps

  • What worked: The ready-to-run assets and time-boxed formats were highly effective. The decision trail provided immediate value.
  • Constraints: Piloting was limited to willing participants; broader adoption requires more strategic advocacy.
  • Next steps: The next major step is to re-author the toolkit as a native Canvas LMS course to increase accessibility and integration. Short video explainers will be added for each method, and a governance model for versioning will be established.

Collaborative Toolkit Planning

Miro board for collaborative toolkit planning

View Full Size

Download Scoping Document

Resources

Phase 1 — GitHub Pages Prototype ↑

Phase 2 — Canvas LMS Development (Sep 2025–ongoing)

The toolkit evolves from a standalone prototype into an integrated institutional learning resource.

Taking TUX to Canvas

By September 2025, the GitHub Pages prototype had served its purpose: it proved the concept, surfaced real pain points through early user feedback, and gave the team a tangible artefact to rally around. But a standalone website — however polished — asked something of its audience that an institutional learning team couldn't reliably deliver: a link, a bookmark, a habit of going somewhere new. The decision was made to rebuild TUX as a native Canvas LMS course.

Canvas is where staff already live. Lectures are uploaded there, announcements go out through it, and professional development is increasingly delivered inside it. Moving TUX into Canvas meant the toolkit would appear in the same environment where learning designers and academics do their daily work — no new logins, no separate tab to remember, no friction at the point of need. The shift also addressed persistent accessibility concerns: Canvas's built-in accessibility checker, captioning tools, and screen-reader compatibility offered guarantees that a hand-rolled GitHub Pages site simply couldn't match. Finally, embedding TUX inside the institutional ecosystem opens the door to formal integration with onboarding pathways, quality frameworks, and professional learning catalogues — giving it a sustainability and reach the prototype could never have.

Five-step testing process

  1. PlanDefine the testing question, select the most appropriate UX method, and scope the session to the time and resources available. This is where you choose what you are actually trying to learn.
  2. RecruitIdentify who should participate and how many people are needed. This step covers writing recruitment briefs, coordinating with Students as Partners or staff panels, and confirming logistics ahead of the session.
  3. TestFacilitate the session using one of the toolkit methods — whether that is a think-aloud walkthrough, a card sort, a structured interview, or a rapid heuristic review. The focus is on observing and listening, not on defending design decisions.
  4. AnalyseMake sense of what emerged. Cluster findings, identify patterns, and connect insights back to the original design question. Lightweight synthesis tools from the toolkit help turn raw notes into actionable takeaways.
  5. DeliverShare findings in a format that suits the audience and drives action — whether that is a short slide deck, a populated decision trail canvas, or a verbal debrief with a course team. The aim is to close the loop and keep the evidence visible.

Process planning board

The Miro board below shows the structural planning work underpinning the five-step flow — including module mapping, content sequencing, and the minimum viable testing pathway.

Design thinking as the backbone

For Phase 2, the team adopted the five-stage Design Thinking model — Empathise, Define, Ideate, Prototype, and Test & Evaluate — as the backbone of the Canvas course structure. The choice was deliberate. Design Thinking is well documented, visually intuitive, and widely taught, which means novice practitioners can orient themselves within a familiar map even when the specific UX methods are new to them. Rather than inventing a proprietary process, TUX maps its activities to stages most learning designers can already name. Each Canvas module anchors a cluster of methods to a stage of the model, giving users a clear answer to the question: "When do I use this?" The framework was also selected because it is non-linear in practice — it invites return visits and iteration — which mirrors the reality of course design work, where teams often revisit earlier stages as new evidence surfaces.

1Empathise
2Define
3Ideate
4Prototype
5Test & Evaluate

Scope & structure decisions

  • Course Essentials was selected as the home for the TUX Canvas course — a dedicated section within the institution's Canvas environment designed specifically for professional learning and staff resources, making it a natural fit.
  • The scope was intentionally scaled back from the Phase 1 prototype. Rather than attempting to document every possible UX method, the team agreed to focus on a curated set of high-value, high-feasibility techniques suited to the constraints of learning design work.
  • Where strong external resources already exist — particularly from Nielsen Norman Group (NN/g) and the Interaction Design Foundation (IDF) — the course links out rather than attempting to replicate or paraphrase established guidance. This keeps the content focused and avoids unnecessary maintenance burden.
  • Track changes were deliberately disabled in the shared Word documents. The decision prioritised readability over revision history, with version control handled through file naming conventions and SharePoint version history instead.

Ethics & consent

Because TUX involves gathering feedback from participants — including students — the team sought clarity on the ethics obligations early. A Quality Assurance exemption from the university's Human Research Ethics process was confirmed, meaning the testing activity sits within normal quality improvement practice rather than formal research. In place of a heavy legal consent form, the team designed a simple checkbox acknowledgement that participants complete at the start of each testing session. The checkbox confirms informed participation without creating bureaucratic friction that would discourage staff and students from volunteering. This streamlined approach reflects a broader principle the team is building into the toolkit itself: ethics should be visible and genuine, but never so cumbersome that it becomes a barrier to running tests in the first place.

Recruiting student testers

Student testers are being recruited through the Students as Partners (SaP) programme, coordinated by Anthea D'Aloia. SaP provides access to the Student Leaders Network — a pool of more than 560 engaged students who have opted in to contribute to university improvement initiatives. The agreed process is straightforward: staff from the TUX team provide the requirements and session brief; the SaP team promotes the opportunity through the Network; staff then train and onboard any students who agree to participate. One question remains open: remuneration. Options under discussion include applying for small project grants or providing gift vouchers, but no final model has been confirmed. Resolving this will be a priority before the first formal testing round.

Students as Partners pathway: Staff provide requirements → SaP promotes via Student Leaders Network (560+ members) → Staff trains participants → Testing runs.

What's in a name?

The question of what to call the resource ran longer than expected. "Guide" was the early front-runner — it is familiar, modest, and accurately describes a document that points people toward methods. But the team kept returning to "Toolkit." A toolkit implies something physical, something you carry with you and reach for when you need it. It suggests completeness without being encyclopaedic, and it positions the user as someone who does things, not just reads them. The naming debate also shaped a broader convention that now runs across the course documents: action-oriented language. Page titles, module headings, and navigation labels are written as things you do or decide, not things you consume. The word "Toolkit" won because it felt solid — and the naming convention that came out of that debate made the rest of the content more purposeful.

Phase 2 outcomes so far

  • A working Canvas LMS prototype has been established in the university sandpit environment, with the course structure, module scaffolding, and initial pages in place.
  • A sustainable team collaboration model is running — combining SharePoint co-authoring with Canvas sandpit testing and regular synchronous check-ins.
  • Content allocation across the nine core pages has been agreed and assigned, giving each team member clear ownership of their contribution.
  • The ethics pathway has been clarified: QA exemption confirmed, checkbox consent designed, and the approach documented so future testing rounds can proceed without delay.

Interested in the UX for Learning Design Toolkit?

Happy to walk through the toolkit, workshop formats, and facilitation notes.

Contact me