9 minute read
REVOLUTION NOT EVOLUTION
Stuart Lamour presents a case study on transforming a global university’s online learning system through UX.
As a researcher, designer, or developer working with NDAs and user-sensitive data, I don’t get to share projects often enough. I’m really proud of the work done on UCL (University College London) Moodle and wanted to share some of it.
What did we make?
A custom Moodle theme to support UCL’s online learning systems using UCL’s Design system.
As part of the theme, we developed Landing and Login pages, the Dashboard page, the Site header and footer, made improvements to the Timeline block, Messages, Notifications, My courses page, Course search, Course pages, in course search, breadcrumbs, fake blocks for the Quiz, Book, Lesson activities, and so much more…
Additionally, we built 4 custom blocks for Feedback, Pickup where you left off, News, and Alerts, along with a local plugin for transferring grades from UCL Moodle to the UCL SITS. All in the space of a year! To paraphrase M&S - this isn’t just Moodle used by UCL. This is UCL Moodle.
In this article, I’ll focus in detail on the starting points of the user journey, the landing and login pages, and the user dashboard with the custom blocks.
The Landing & Login pages
UCL had a clear business case for providing single sign-on, standard login, and guest access across their Moodle instances, so removing the landing page and redirecting to SSO was not an option.
UCL had a standard Learning Management Systems (LMS) or Learning Experience Platform (LXP) landing page with a carousel, featured links, news items, a bar of links, and all those industry-standard elements.
For their initial theme for the Moodle update in 2023, they maintained this content and feature parity.
UX Research - starting with User Needs
On joining, I set about what any UX professional would do: involving the product users in the process.
We quickly found that the majority of users, from staff to learners, just wanted to sign in and complete the task they came on UCL Moodle to do.
The time, codes, and effort UCL spent maintaining the set of default industry-standard features of an e-learning landing page didn’t actually fulfill any business or organisational goals and added no value for the end users.
This was quite eye-opening for the UCL team at the time, took a huge change in mindset and some challenging internal conversations on that battle for content real estate that happens in any organisation.
We asked real users what they thought of the landing page’s elements and had stakeholders observe or watch recordings of each session.
Watching real people use your website and hearing your users honestly tell you what they think is a great way to move away from internal politics and focus on what truly matters: understanding user needs and achieving business goals.
Landing & Login Pages Today
The page focuses on user needs, getting people where they need as quickly as possible, with space for guides and information when people need that extra help, without all the distracting clutter.
UCL Moodle Dashboard
Once you are logged in, what do you see?
When I joined the project in February 2003, UCL already had designs and content for the new dashboard they had been developing.
I began by testing these designs with UCL users. It became obvious that while looking glossy, the content and designs did not meet their requirements.
As with the landing page, UX research allowed UCL to understand their user needs and top tasks, have internal discussions around pivoting, and provide a solid guide to the functional and content requirements UCL actually needed to provide. Once logged in learners and staff overwhelmingly wanted to get to their courses.
Pick up where you left off block
Why build a custom block?
We quickly found issues when testing the Moodle core ‘Recently accessed courses’ block with users. The block only showed live courses you were enrolled in, which was not useful for staff who regularly edit courses before they go live or who have category editor access and may not be enrolled in the course.
Additionally the ‘Recently accessed courses’ block was missing data we wanted to show, proved very difficult to customise to fit UCL’s Design system, felt slow to load, and suffered from a number of accessibility and usability issues.
Starting with user needs
For the new block, as with all development, I started with strategy, scope, and structure to create a clickable Minimal Viable Product (MVP) in HTML for a new block.
These MVP prototypes may not look pretty, but are essential to let you test with users and ensure you are building the right content and functionality, before investing too much time. Prototyping in this way enables you to quickly learn, and iterate in a modern agile way.
I built the ‘Pick up where you left off’ block in PHP and mustache templates using bootstrap’s built-in functionality so we wouldn’t require additional javascript. We wanted it to be as lean and as fast to load as possible, using the mantra “performance is a feature”.
The ‘Pick up where you left off’ block shows you which courses you last visited, your progress, and metadata about the course category and if the course is hidden.
The activities tab shows which activities you last viewed, to save having to find them in a course again, which is fantastically time-saving if you’re working on something as a learner or editor.
The majority of users on UCL Moodle today use the pickup block as their first click in UCL Moodle, and the smaller percentage looking for courses they haven’t visited recently use the View All Your Courses link or the My Courses link in the header.
Alongside surveys and one-to-one interviews, we use Microsoft Clarity to see data on this and other elements of UCL Moodle and observe how people use the site.
Feedback block
When testing UCL’s initial designs, we found users were unable to locate their feedback or marks, an issue UCL was already aware of.
I built a feedback block, again in PHP, mustache templates, and bootstrap markup, which shows you the most recent activities (currently assignment, Turnitin, and quiz) for which you’ve received feedback. It also includes links to view all your grades and the custom feedback report.
The block only shows if you have feedback, so it doesn’t get in the way for staff who don’t get feedback. As a nice touch, it shows your name, so you know it’s definitely for you!
One interesting finding was that in the first version of the Feedback block, we output the marks for each activity on the page (e.g., 73/100) to save you having to click through. Learners use their laptops in public spaces, and having the marks displayed when you log in was not viewed positively. People were really uneasy about this and told us they preferred to click through to see their marks.
We surveyed users after launching the Feedback block and asked again about how they found their feedback. Overwhelmingly, people commented that they could now find their feedback—it’s easy—it’s just there when I log in, on the front page, etc.
Timeline Block
The Moodle core Timeline block shows upcoming deadlines for courses you are enrolled on.
For UCL Moodle, the new theme has a light touch custom SCSS stylesheet to normalise the block, make it look more like a timeline, and brand it to look UCL. It also removes some of the data users didn’t find useful and highlights the data they did.
Putting it all together
Everything is a block
Under the hood, the UCL theme uses custom layouts, replacing Moodle’s off-canvas drawer elements (which proved problematic for users) with responsive multi-column block regions that copy UCL’s Design system and main website layout.
Creating these configurable content regions is a highly efficient way to rapidly add or remove content and reorder it while testing with users without having to change PHP and mustache templates each time.
This content region design also enables UCL Moodle to grow as more content is needed and create ad hoc content as HTML blocks, such as adverts for user testing recruitment, student surveys, or guides for new features.
Achieving DRY (Don’t Repeat Yourself) code through a design System
Moodle uses Bootstrap as its framework.
We wanted to enable all our plugins to work without any unnecessary javascript or CSS, so we implemented UCL’s Design system in the UCL Moodle theme using Bootstrap’s scss files which let you set the default for every element from colour and typography to box shadow and border radius, almost entirely using the bootstrap variables file which everything else inherits from on compilation.
For UCL, this means that every time you create a plugin, it looks and feels like UCL out of the box without you having to write any custom CSS or Javascript or worry about branding or accessibility.
This change in practice and mindset to work with the system rather than writing WET (Write every time) code creates a huge advantage for designers and developers. Plugins can be designed based on UCL bootstrap components. Developers can write standard bootstrap markup in mustache templates and inherit the design systems’ built-in accessibility and branding, a huge s aving of time and effort.
This isn’t just a Moodle used by UCL, this is UCL Moodle. User-centered design, Design System led, lean, fast, maintainable, born accessible, and easily extendable.
Stuart Lamour is a highly experienced project lead in UX research, design, and development and has worked on projects for The BBC, GOV.UK, MoMa, The British Museum, The National Portrait Gallery, The NHS and The Ministry of Defence.
