Digital Education team blog
  • We support Staff and Students using technology to enhance education at UCL.

    Here you'll find updates on institutional developments, projects we're involved in, updates on educational technology, events, case studies and personal experiences (or views!).

  • Subscribe to the Digital Education blog

  • Meta

  • Tags

  • A A A

    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!