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 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.

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

My Moodle menu

Settings menu

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

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:

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

Feedback from around UCL

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:

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!