JMSU Freshers 2026 Minisite
Solo design & front-end build · Liverpool John Moores Students' Union
Full circle. I studied at Liverpool John Moores University, then came back and single handedly redesigned and built the Students' Union's entire Freshers presence, the same Freshers I once walked into as a new student. Concept, design system, front end, copy, accessibility and launch, all mine.
The site runs on a book a flight metaphor. Freshers is framed as a journey you take off on with the Union. The hero is a departure lounge with a live flip countdown, the schedule is a departures board, tickets are boarding passes, and the help section is a Feeling lost wayfinding panel. One long scroll takes you from arrival to you are all set, built strictly to the Union's brand palette and display typeface with hand illustrated, scouse voiced brand stickers throughout.
It was built inside Union Cloud, a locked down student union CMS rather than a free hosting environment. No external stylesheet, so all the CSS is inline in a content block. The editor strips block content out of links, so interactive cards had to be re engineered as divs with inline text links. Wrapper IDs are auto generated, so every positioning hook had to hang off markup I did not author, using jQuery only with no build step. Making something that looks and behaves bespoke within all of that was the real work.
- A sticky flight status nav with a live mini countdown and JavaScript scroll spy.
- An animated departures board of every event across two weeks, genre tagged, each row a live ticket link to the Union's ticketing platform.
- A pixel built boarding pass component, main plus tear off stub, barcode and seat detail, with a baggage included freebies strip.
- The four elected officers as cabin crew in porthole frames, with a flypast banner and drifting clouds.
- An interactive, keyboard accessible LJMU bucket list with a live progress counter and a cleared for take off completion state.
- An embedded official Spotify playlist, a nightlife partner section and a four way contact grid.
Every animation is transform and opacity only and respects reduced motion preferences. I found and fixed four WCAG AA contrast failures, the brand blue was only 2.66 to 1 on white, so I introduced a darker text blue at around 5.7 to 1 for light backgrounds while keeping the brand blue on dark. Global focus outlines, ARIA roles and states on interactive components, a live region on the checklist counter, and a Core Web Vitals pass.
