Canvas learning experience: journeys for design round 1
Trigger: Dominik, 7 November 2026, after seeing an unstyled slide reader (Times New Roman, raw headings, "View original slide 1" links) inside the sandpit: "not sure we should have ugly pages like this ever". He asked for the whole Canvas experience to be thought through for everyone who arrives there, with three UX candidates and three separate visual-style candidates, scored and improved in hill-climb rounds, in a gallery he and Ella can share.
Today there are two homes that grew separately (screenshots in current/):
- Sandpit course 7284: course-first site (serif, warm paper, Oxford blue),
course catalogue, materials library, pathways, and 62 slide readers that
carry no styling at all (
current/sandpit-reader.png). - Canvas course 299916 and the public site: event-first resource library (pink and navy, Barlow-like sans), tabs Events / Training / Other resources / Calendar / Training team, one page per event with its materials.
The design round must produce one coherent experience. It may reorganise both. It must not lose any existing capability listed under "Keep" below.
Audiences and aims
| # | Who | Aim, in their words |
|---|---|---|
| A1 | Attendee coming back | "I can get the slides, recording and notes from the session I was at, without hunting." |
| A2 | Explorer / prospective learner | "I can see what the Centre teaches and what is coming up, decide what suits me, and book it." |
| A3 | Team lead, researcher, manager | "I can tell whether the Centre can help my team or project, and how to start." |
| A4 | Trainer (Centre staff, guest presenter) | "I can find my session's page, share one link with participants, and see that my materials are there." |
| A5 | Site maintainers (Dominik, Ella) | "I can tell where every kind of thing lives, add a new event without breaking anything, and see what is missing." |
| A6 | Anyone, after a session | "I can tell the Centre what worked and what I need, in under a minute." |
Situations
| Situation | What just happened | Wants or fears |
|---|---|---|
| Canvas arrival | Clicked the course in Canvas; site sits inside a Canvas page frame (Canvas left nav and header around it, about 900-1100 px wide on a laptop) | Recognise where they are; reach their thing in two steps |
| Shared link | Trainer pasted one event link in Teams or email | Land on that session's materials directly; not a homepage |
| Remembered word | Remembers "agents" or "MondAI October" | Search finds it while typing |
| Phone | Opening a link on the bus | Readable slides and text, no horizontal scroll |
| Choosing | Line manager suggested "some AI training" | Compare by level, length, format; know how to book |
| Booking | Picked a session | Booking happens on the University's training booking page (SharePoint, external); the site must hand off clearly |
| Project enquiry | Draft funding proposal | Know what consulting covers and who to contact |
| After a session | Trainer asks for feedback | Quick, optional, anonymous by default |
| Maintaining | New MondAI roundup recorded | Add one record; see it appear in the right places |
| Failure | A large slide reader opens in Canvas with scripts blocked; a material is not yet available | Still read the text; be told what happened and what to do |
Journeys (each has a right-when)
J1 Revisit a session (A1). Canvas arrival -> find the session (recent list or search) -> session page shows all its materials together -> open slides -> read comfortably, move slide to slide, jump to recording. Right when: the slide reader shows a designed, readable deck with the session title, slide position, previous/next, and a route to recording and notes.
J2 Read slides as a reader, not a dump (A1). Opens a converted slide deck
(text plus extracted images, samples/slide-reader/). Sees one slide or a
scrollable sequence with slide numbers, images sized sensibly, a contents
list of slide titles, and "View original slide" as a quiet secondary action.
Right when: the deck reads like a designed publication on desktop, inside the
Canvas frame and on a phone, with no default browser typography anywhere.
J3 Choose and book (A2). Home -> "Training" or "What's on" -> filter by area, level or format -> course page with who it is for, length, level, trainers, past materials -> "Book a place" hands off to the booking page (external link, labelled as such) or "Request this for your team". Right when: a newcomer can tell level and length from the list and reach the booking hand-off in three steps.
J4 Find by a remembered word (A1, A2). Type in the search field -> live suggestions (title, type, date) -> open -> Back returns to results. Right when: results appear while typing and Back restores the query.
J5 Ask for help (A3). Home -> "Work with us" / consulting -> kinds of help (identify opportunities, research project, team workflow, bespoke training) -> contact or request form hand-off. Right when: a team lead understands the offer and has one clear contact step.
J6 Share a session (A4). Trainer opens their session page -> "Copy link" -> participant opens the link and lands on that session, inside or outside Canvas. Right when: the copied link opens the same session page, not the home.
J7 Give feedback (A6). From a session page or the reader -> "Give feedback" -> either a short form (rating + one question) or a conversational feedback assistant -> confirmation. Right when: feedback is sent in under a minute and the person is told where it goes and that it is anonymous unless they add their name. Constraint: the site has no server. A feedback assistant or form must be an embedded external service (for example an Oxford Microsoft Form, or a hosted assistant approved for Oxford data). Designs show the slot, its states and the privacy line; they do not imply a working backend.
J8 Maintain (A5). Maintainer wants to add a MondAI roundup -> knows from the site's own structure where it goes (collection, event record, materials) -> after publication it appears in What's on / archive / search / trainer page. Right when: the information architecture has a small, nameable set of things (Event, Course, Material, Collection, Trainer) that map one-to-one to records. Designs may include a light "about this site / how it is organised" surface; no editing on the site itself.
J9 Something fails (all). Material unavailable, reader scripts blocked, recording host blocked by Canvas, no search results. Right when: each state names what happened and offers text, another route or contact.
Keep (existing capabilities; do not lose)
Live search with dropdown while typing and Back restoring the query; event pages holding recording, presentations, notes, links together; calendar of dated events with month-only entries separate; trainer filtering and Training team profiles; course catalogue with level, duration and format; pathways as optional suggestions (never prerequisites); copy event link; full screen / open in new window from Canvas; PDF one-slide-at-a-time viewer; device memory off by default; keyboard and phone use; booking via the University training page.
Hard constraints for every candidate
- Runs inside a Canvas page iframe and also as the public site. No server, no sign-in, no learner identity. Booking and feedback are external hand-offs.
- Canvas entry file is limited (about 450 KB after compression): no web fonts bundled as data, no heavy frameworks in the real build. Mockups may load Google Fonts and Lucide from a CDN, but the design must stay buildable with system or one self-hosted font family.
- Each reader is a separate file. Large readers can be delivered with scripts disabled, so readers must look designed with CSS alone; scripts only enhance.
- Oxford identity: Oxford blue (#002147) is the anchor colour. University and Centre logos top-left (use text placeholders in mockups).
- Public-approved content only (
content-pack.json,samples/). Do not invent courses, events, people, dates or quotes. - British spelling. Accessible contrast (WCAG AA), visible focus, keyboard paths, no horizontal scroll at 390 px.
Surfaces and states every candidate must cover
UX candidates (structure; greyscale wireframe fidelity, clickable): S1 Home (Canvas arrival) · S2 Session/event page · S3 Slide reader · S4 Training catalogue + course page with booking hand-off · S5 Search with live results and the no-results state · S6 Work with us / consulting · S7 Feedback entry and confirmation · S8 Trainer view or trainer page with copy link · S9 How the site is organised (maintainer orientation) · States: empty search, material unavailable, scripts-disabled reader, phone.
Visual candidates (style; high fidelity, fixed neutral layout so only style differs): Home hero and list · Session page with materials · Slide reader (the BETT sample, desktop and phone) · Course card and booking button · Search dropdown · Feedback panel · Error/unavailable message · Type scale, colour tokens, buttons, tags for material kinds (recording, slides, reading, PDF, interactive).
What this round does not settle
Which visual candidate wins; whether the course catalogue and event library merge into one list or remain two tabs; which feedback service is used; the build plan and migration of the 62 slide readers and 23 event records.