X Close

Digital Education team blog


Ideas and reflections from UCL's Digital Education team


Making Moodle Beautiful – Part 2

By Matt Jenner, on 15 March 2012

Following on from a previous post we have been working hard to deliver a Moodle that’s designed for everyone and looks functional, modern and reflects UCL’s style and quality. We think we’re quite close so here’s a little more detail on what’s coming, and what our pilot users are using right now and giving us feedback on.

Functional design

Following on from mapping the functionality of Moodle and comparing it against many other Moodle’s from across the world we came up with some prototype designs from our designer – Huw Jones from Photographic and Illustrative Services, ISD – a group of people at UCL who can do print, web, illustrative design and photography. This design was then implemented into Moodle. A lot of [on-going] tweaking later, we have something we’re proud to show.

New homepage

The new homepage for UCL Moodle

The homepage is very important, we want a simple route for UCL people to log in but we also have a space for Guests, important news and making Moodle more of a showcase of research or local imagery and promotion of interesting areas within Moodle for users (such as courses on academic writing, induction courses, staff development and more).

Note the Help & Support button – this slides out and provides information for people who are unable to log in or looking for support.

Once logged in – My Home

Each person is taken to an areas entitled My Home – this is a personalised and custom space containing your courses enrolled in and some useful blocks on the right side, details below.

My Home - a personal space

This area contains a few things, most notable are the three navigation buttons on the left side. Help, My Moodle and Settings are used all across Moodle and are essential for getting around, changing things and getting support.

In addition this area has:
  • My courses – a list of all the courses you are enrolled on (staff or student);
  • Search courses – find more courses to browse or enrol on;
  • Logged in user – your details (you may want to update them if they’re incorrect or add a profile image);
  • Calendar – retrieves all important dates across all your courses, such as assignment deadlines, Moodle examinations or scheduler appointments – they’re all displayed here;
  • Private files (not shown) – store temporary files on Moodle such as assignment drafts or important documents – like a USB key in the cloud (but limited to 30Mb for now);
  • Latest news (not shown) – important news and announcements from the Learning Technology Support Service about Moodle and related services;
  • Messages (not shown) – private messages from friends, colleagues and other people at UCL.

Looking at a course

The Student Moodle Inductions course in new Moodle

My Moodle menu

My Moodle is used to get you around the site, navigate to My Home, your profile and if you like, other courses.

Settings menu

The Settings menu is used to edit the place you're in, such as courses, your profile or a resource/activity

Going fixed – reducing wide screen courses

One change most will notice is that Moodle is now fixed in size, this means that it will always be the same width and doesn’t just stretch to the size of your monitor. This was a difficult decision to make, because it means some courses don’t display wide images or content as well as they used to. The reason why we did this was primarily based on accessibility; not everyone has a widescreen monitor and so while what you have made might look OK for you, it may look terrible, or worse, illegible on other computers. By having a fixed-width which accommodates to a maximum width specification it means Moodle will look as expected on most sized screens. The BBC and Facebook, for example, both do this, it’s fairly standard web design. There’s lots of ways we can quickly fix up courses which may look a little skinny from this change and more details will emerge over the coming months.  We’re also looking at a user-based width expansion button – but this is still in the early stages.

A few notable comments

Making Moodle look ‘beautiful’ is hard work, firstly everyone uses it differently, which is great, but it means we need a platform which can accommodate all this creativity. While this is the kind of challenge we enjoy, it means that the end results always scale differently in people’s opinions. The response we have had already is ‘much cleaner’, ‘really easy to visualise my future course developments’ and even ‘looks like facebook’ – which we’re not sure is a good thing. We’ve also already had the  ‘urgh, sicky green’ – which is a fair comment and that green colour may change to something different.

Towards Part 3, and beyond

Changes are still taking place, so this is not the final design. We’re also working with a few Moodle quirks which are working themselves out. Stay tuned, or get in touch with your feedback on moodle2@ucl.ac.uk

Part 3 coming soon-ish