Our new Moodle theme

We entered our hosting agreement for Moodle in late summer 2010 and initially asked our hosting partner, ULCC, for a neutral 1.9 theme as our intention was to give the Moodle user interface a more substantial re-working in the run-up to going live for the 2011/12 academic year.

In February 2011 we published a high level design brief and, after a competive pitch process, we chose Manchester-based digital design agency, magneticNorth, to be our Moodle design partner.

magneticNorth have an impressive track record of producing creative and engaging designs such as the BBC’s Desert Island Discs and Doctor Who video explorer websites. Our design brief to them was deceptively simple: to produce an attractive, clean and easy-to-use design for Moodle that had a family resemblance to MMU’s website. Oh, and it had to work with courses that were already active and be sufficiently familiar not to undermine the confidence of the hundreds of academic colleagues who had already been trained on our original theme. And it had to be done with Moodle 1.9, as we’d decided to play it safe and wait until others had flushed the bugs our of Moodle 2. And it had to be demonstrated to the Vice-Chancellor and Directorate on July 4!

magneticNorth designers worked through the design process with a small steering group from MMU and expert input from ULCC, gradually turning wireframes into functional and then technical specifications and then into a Moodle theme through consultation, prototyping and review.

Wireframe for My Areas page

Working within the constraints of Moodle 1.9 and in an effort to promote familiarity for our established users, we opted for a 3-column course page design that grouped navigation on the left, weekly content in the middle and aggregated information on the right. In parallel to the design and branding exercise, prototyping continued on the “magic block” for presenting users with the output of our Moodle mega-mashup, and markup for targeting CSS for this aggregated content was agreed.

Wireframe for a Moodle course area

magneticNorth’s proposal for a simple, fixed-width design that incorporated MMU’s house font of SerifaShopBold was accepted by the steering group and senior colleagues:

Screen design for My areas page Screen design for Moodle course area page

With these screen design signed off, work could then begin on the CSS, images and theme modifications necessary to deliver this look as a custom Moodle 1.9 theme. MMU purchased the SerifaShopBold web font and ULCC provided a copy of our existing Moodle courses in a test environment that enabled the new theme to be deployed and reviewed.

Work progressed extremely quickly and magneticNorth soon had a theme on the ULCC test server for review on a range of devices owned or borrowed by MMU’s Learning and Research Technologies team, the Centre for Learning and Teaching and faculty E-Learning Support Officers.

Cross-device cross-browser testing

On July 4, the design was well received by the Vice-Chancellor and Directorate colleagues and go-ahead was given for deploying to the production Moodle when final acceptance tests had been passed.

The new design went live at the Moodle User Community meeting on July 13 and was marked with cake covered with an edible screen shot!

Moodle edible screen shot cake

Having done such extensive testing we were surprised when colleagues reported that middle column content failed to display in edit mode in Internet Explorer on the production server. A detailed comparison of the theme files on the test and production sites revealed them to be identical and much head-scratching ensued. We eventually realised that MMU’s standard browser was configured to use compatibility view for intranet sites and to auto-detect intranet sites, which meant that IE browsed all *.mmu.ac.uk websites in compatibility view. We hadn’t picked this up in testing as we’d be browsing a site on the *.ulcc.ac.uk domain. Fixes have now been deployed and moodle.mmu.ac.uk is now proudly wearing its new design – big thanks to our partners at magneticNorth and ULCC and to our Moodle testers across MMU who’ve worked so hard to make this design a success.

Our new Moodle theme