The document discusses the theming of Moodle at the City of Glasgow College to improve integration and usability. The college formed in 2011 through a merger of three Glasgow city colleges. It uses Moodle as its main student portal and has customized developments and services that integrate with Moodle. This includes a video repository, exam results viewer, voting system, and enrollment database. The college developed a consistent visual style across its sites based on feedback. This included navigation improvements like mega menus and indicators for new items. Performance is measured through analytics and heatmaps to improve the services.

1. Theming Moodle for
Integration & Usability
Alex Walker
City of Glasgow College

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

3. The City of Glasgow College
Bb
8.0
m
1.9.8
m
1.9.8
469 Courses 672 Courses 609 Courses
628 Sta! Accounts 363 Sta! Accounts 157 Sta! Accounts

4. The City of Glasgow College
m
2.4.0
3,932 Courses
16,102 Active Users

5. Our Strategy
• Moodle as our main student portal.
• Custom developments that add
functionality to Moodle.
• Other services that sit alongside
Moodle.

6. Our Strategy
Moodle Mahara
Exam View
Video Repository
‘Print Room’
Voting System
Badges
Private File Sharing
Advertising
Enrolment Database

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

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

9. Exam View
• Allows students to see their results
from within Moodle.
• Developed in 2010 with JISC
funding.
• Released to the community.

10. Exam View
• Allows students to see their results
from within Moodle.
• Developed in 2010 with JISC
funding.
• Released to the community.

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

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

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

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

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

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

17. Our Visual Style

18. Our Visual Style

19. Our Visual Style

20. Our Visual Style

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

22. Our Visual Style

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

24. Our Visual Style

25. Our Visual Style

26. Our Visual Style

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

28. Our Visual Style

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

30. Our Visual Style

31. Our Visual Style

32. Our Visual Style

33. Our Visual Style

34. Our Visual Style

35. Navigation
• Two navigation devices on our sites.
• Dashboard for navigation of the
current site or service.
• Black Bar for moving between
college services.

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

37. Navigation

38. Navigation

39. Navigation

40. Dashboard
• We don’t use
Moodle’s Navigation
block.
• Two blocks replace
it: My Courses, and
Dashboard.

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

42. Navigation

43. Navigation

44. Navigation

45. Navigation

46. Navigation

47. Navigation

48. Navigation

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

50. Navigation

51. Navigation

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

53. Navigation

54. Navigation

55. Navigation

56. ‘Smart Features’
• Give the user visual feedback when
something needs attention.
• Dashboard and icon bar light up
when you have unread messages.

57. ‘Smart Features’

58. ‘Smart Features’

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

60. Custom Course Format

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

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

63. Measuring Performance

64. Measuring Performance

65. Measuring Performance

66. Measuring Performance

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

68. Measuring Performance

69. Measuring Performance

70. Measuring Performance

71. Questions
Alex Walker
City of Glasgow College