X Close

Digital Education team blog

Home

Ideas and reflections from UCL's Digital Education team

Menu

Making Moodle Beautiful – Part 1

By Matt Jenner, on 13 February 2012

Update 15/3/12

Second part now also on the blog – Making Moodle Beautiful – Part 2


We’re not shocked to hear that UCL Moodle isn’t the prettiest of websites. Our philosophy may be more about function than form but it would be too expectant for us to presume everyone thinks this way. So, coming with the June 2012 upgrade of Moodle we’re also working on making Moodle beautiful. There’s a lot of background work in making this happen, so if you’re interested in this please do read on. If you’re expecting to see what we came up with, I’m sorry but you’ll have to wait a few more weeks while the ‘computer-magic-stuff’ happens. We shall be sure to post here again with an update.

Background

Some components of Moodle are over 10 years old. This is a long time for anyone, let alone in terms of web development. UCL has had Moodle for many years, officially since 2006 and as the primary online learning and teaching environment since 2008. Throughout that time it’s still changed in appearance a bit:

Moodle in 2006

Moodle in 2006

Moodle in 2007

Moodle in 2007

Moodle in 2007-2009

Moodle in 2007-2009

Moodle in 2010 - 2012

Moodle in 2010 - 2012

So we can see that there’s been a steady movement towards beauty, but we’re not quite there, yet.

Feedback from around UCL

"Moodle could REALLY use a GUI facelift! It's awful!" - Student's don't hold back with their thoughts

Student's don't hold back with their thoughts

We rarely ask if people think Moodle looks good, we’re painfully aware that some don’t like the look and others are put off even using it partly due to visual appeal. This is disparaging, we want a system which everyone at UCL wants to use so if this is important to our users, then it’s important to us too. Feedback from the 2010-11 ISD student survey highlighted serveral key comments about Moodle’s aesthetics.

Opportunity knocks

When we planned the upgrade of Moodle in June 2012 it was decided to also refresh how Moodle looks. While this is not the main focus by any length, it was important to address and this was the perfect time to do it. We enlisted local graphic designer, Huw Jones from ISD and an external Moodle developer to begin our design work. Before they set about designing Moodle we want to create a functional specification to ensure no functionality is lost or disrupted during this process.

What do other Moodle’s look like?

Moodle is a configurable system so the first part was to investigate what other universities and organisations do with their Moodle. In total we found 66 homepages to take some inspiration from, the video below is a compilation of all these homepages:

A small group looked at each homepage and decided what we did (or did not) like to try and emulate small parts of the design into our Moodle. All were publicly available and so we hope we’re not breaking any rules by posting it on YouTube (excluding comments!).

 Functional design

From looking at what’s new in Moodle 2, we also felt compelled to re-consider some long-standing gripes with Moodle. The main ones being mobile access (more info in a mobile preview here) and the navigation. Moodle is an important system for many people, so it’s got to function correctly as a priority, looking beautiful is just a bonus. The three images below show some of the tasks employed to create the functional specification for our next iteration of Moodle:

Homepage - technical design

Adding all the elements of function needed on the Moodle homepage

The header and footer are on every single Moodle page. They needed to be branded and functional.

MyHome is a new space in Moodle which brings a much more personalised experience

Design phase

Once the technical bits (i.e. the buttons, boxes, icons and other visual components)  are specified our designer Huw had to go off and work his magic. It’s sadly at this point we must leave the blog post as his work is still in progress. We can confirm what we have already is looking very good and the effort was well worth it.

Next step

User feedback – we shall be in touch. If you want to give your views then you’re encouraged to sign up to the Moodle User Group, more information here:

http://www.ucl.ac.uk/isd/moodle2/getinvolved

Or keep an eye out on this blog, more is on the way!

6 Responses to “Making Moodle Beautiful – Part 1”

  • 1
    Aslam Sharif wrote on 14 February 2012:

    This is really nice and so needed, looking forward to see result.

  • 2
    17 seconds of pretty Moodle homepages | Moodle News wrote on 22 February 2012:

    […] Read about the UCL’s site redesign initiative: http://blogs.ucl.ac.uk/ltss/2012/02/13/making-moodle-beautiful-part-1/ […]

  • 3
    Initiatief UCL voor nieuwe verbetering Moodle lay-out | Moodlefacts.nl wrote on 23 February 2012:

    […] februari 23, 2012 De University College of London is een initiatief gestart om de look-and-feel van Moodle te verbeteren en terecht. Qua uitstraling scoort Moodle niet hoog, het gaat om functionaliteit is de filosofie van Moodle. Ook terecht, het gaat om leren en welke functionaliteit kan je inzetten om het online leren te faciliteren. Maar omdat het oog ook wat wil, is de UCL gaan brainstormen. Zie ook het verslag op hun blog. […]

  • 4
    Matt Whyndham wrote on 9 March 2012:

    >so it’s got to function correctly as a priority, looking beautiful is just a bonus.

    Hmm. I’m a bit of a modernist in this matter. Beauty should be because of the function, not an added layer. Given that this is a User Interface, rather than an entertainment, if a pixel is not communicating something about the function, then it isn’t beautiful. OK, you can make non-functional pixels look pretty, but that’s just sugar on a bitter cake.

  • 5
    Matt Jenner wrote on 15 March 2012:

    Matt – I agree. We have to work with Moodle’s quirky behaviour in many respects and how it functions/looks is one of many.

    I’m just about to add a post now for Part 2 of the theme developments. I look forward to the response of yourself and our community. All this hard work will eventually end us at Part 3 – the theme we go for in June 2012.

  • 6
    Winnie wrote on 2 June 2012:

    Delighted to view this website works well in this little iPhone , anything I wish to accomplish will be practical. Thank you for keeping it down currently while using most recent.

Leave a Reply