Theming Moodle for Integration & Usability

Alex WalkerCity of Glasgow College

The City of Glasgow College

• Colleges in Scotland merging into regional super-colleges.

• City of Glasgow College formed in 2011, when three Glasgow city centre colleges merged.

The City of Glasgow College

Bb8.0

m1.9.8

m1.9.8

469628

CoursesSta! Accounts

672363

CoursesSta! Accounts

609157

CoursesSta! Accounts

The City of Glasgow College

m2.4.0

3,93216,102

CoursesActive Users

Our Strategy

• Moodle as our main student portal.

• Custom developments that add functionality to Moodle.

• Other services that sit alongside Moodle.

Our Strategy

Moodle Mahara

Video Repository

Voting System

Private File Sharing

Enrolment Database

Exam View

‘Print Room’

Badges

Advertising

Video Repository

• A place to store videos we can’t put on YouTube.

• Guest lectures, videos made by our TV students, etc.

• Delivered in HTML 5, or Flash for older browsers. Works on iPhone.

• Not yet a Moodle repository.

Video Repository

• A place to store videos we can’t put on YouTube.

• Guest lectures, videos made by our TV students, etc.

• Delivered in HTML 5, or Flash for older browsers. Works on iPhone.

• Not yet a Moodle repository.

Exam View

• Allows students to see their results from within Moodle.

• Developed in 2010 with JISC funding.

• Released to the community.

Exam View

• Allows students to see their results from within Moodle.

• Developed in 2010 with JISC funding.

• Released to the community.

Voting System

• Students can vote in executive elections.

• Clicking a link in our Moodle navigation block takes them to the voting system.

• Students can only vote once, but votes are stored anonymously.

Voting System

• Students can vote in executive elections.

• Clicking a link in our Moodle navigation block takes them to the voting system.

• Students can only vote once, but votes are stored anonymously.

The Challenges

• Lots of systems that look di!erent and work in di!erent ways.

• Di!erent URLS for sta! to remember.

• Trying to raise awareness of di!erent services we o!er.

Our Approach

• Come up with a department ‘look and feel’ to apply to all our sites.

• Think about the building blocks that make up the web applications.

• Improve consistency by re-using blocks and layout techniques.

Our Visual Style

• Our college had a design team.

• They came up with the MyCity logo, and gave us a ‘department colour’.

• I built a prototype Moodle theme, and got feedback from my team.

• It has slowly evolved ever since.

Our Visual Style

• Our college had a design team.

• They came up with the MyCity logo, and gave us a ‘department colour’.

• I built a prototype Moodle theme, and got feedback from my team.

• It has slowly evolved ever since.

Our Visual Style

Our Visual Style

Our Visual Style

Our Visual Style

Our Visual Style

• Looked at the existing college Moodles.

• Looked at what other colleges were doing with Moodle.

• Looked at how popular websites were laying out their site.

Our Visual Style

Why Facebook

• Facebook has about 1 billion users.

• What percentage of your sta! and students are Facebook users?

• Facebook employ some very talented user interface designers.

• Constantly add features to their site, but keep a neat, intuitive interface.

Our Visual Style

Our Visual Style

Our Visual Style

Our Visual Style

• We wanted to have the same style on all our links / buttons / tables etc.

• Started writing our own re-usable CSS library.

• Contained rules for buttons, multi-column page layouts with sidebars, and made tables look pretty.

Our Visual Style

Our Visual Style

• In mid-2012, replaced our own CSS library with the Twitter Boostrap.

• Provides buttons, image styles, navigation tools, noti"cations and a lot more.

Our Visual Style

Our Visual Style

Our Visual Style

Our Visual Style

Our Visual Style

Navigation

• Two navigation devices on our sites.

• Dashboard for navigation of the current site or service.

• Black Bar for moving between college services.

Dashboard

• Top of dashboard contains the name and avatar of the logged-in user.

• Top menu link is always ‘Home’.

• Bottom menu link is always ‘Log out’.

• Trying to display the user’s Moodle avatar in all our other systems.

Navigation

Navigation

Navigation

Dashboard

• We don’t use Moodle’s Navigation block.

• Two blocks replace it: My Courses, and Dashboard.

Black Bar

• Displayed at the top of all our services.

• Links to the college website, Learning Technologies services and other departments in the college.

• Old, simple menu being replaced by new drop-down ‘mega menu’

Navigation

Navigation

Navigation

Navigation

Navigation

Navigation

Navigation

The ‘Mega Menu’

• A relatively new interface tool for displaying links in a well-ordered hierarchy.

• Lets us put more content within easy reach of the user.

• Currently on our Moodle, will be rolled out to other services soon.

Navigation

Navigation

The ‘Mega Menu’

• A relatively new interface tool for displaying links in a well-ordered hierarchy.

• Lets us put more content within easy reach of the user.

• Currently on our Moodle, will be rolled out to other services soon.

Navigation

Navigation

Navigation

‘Smart Features’

• Give the user visual feedback when something needs attention.

• Dashboard and icon bar light up when you have unread messages.

‘Smart Features’

‘Smart Features’

Custom Course Format

• Moodle 2 o!ers several course formats, and you can write your own.

• Examples are ‘Topics’, ‘Weeks’, ‘Social’, ‘Grid’...

• We custom-wrote a modi"ed version of ‘Topics’ called ‘City’.

Custom Course Format

Measuring Performance

• Analytics and Heatmaps are used to measure the performance of our Moodle.

• Provide useful statistics for how we can improve our services.

• Browser / OS / device statistics help us target future developments.

Measuring Performance

• Piwik used for analytics.

• It’s on open-source alternative to Google Analytics you host in-house.

• Custom variable tracking allows you to track extra things.

Measuring Performance

Measuring Performance

Measuring Performance

Measuring Performance

Measuring Performance

• ClickHeat used to track page clicks.

• Lets us know which page elements are well used and which aren’t.

• We can remove things that aren’t well used, to make better use of the space.

Measuring Performance

Measuring Performance

Measuring Performance

Questions

Alex WalkerCity of Glasgow College