Theming Moodle forIntegration & Usability            Alex Walker      City of Glasgow College
The City of Glasgow College • Colleges in Scotland merging into  regional super-colleges. • City of Glasgow College formed...
The City of Glasgow College     Bb      8.0                          m                         1.9.8                      ...
The City of Glasgow College                m                2.4.0        3,932 Courses       16,102 Active Users
Our Strategy• Moodle as our main student portal.• Custom developments that add functionality to Moodle.• Other services th...
Our Strategy Moodle               MaharaExam View                 Video Repository‘Print Room’                  Voting Sys...
Video Repository• A place to store videos we can’t put on YouTube.• Guest lectures, videos made by our TV students, etc.• ...
Video Repository• A place to store videos we can’t put on YouTube.• Guest lectures, videos made by our TV students, etc.• ...
Exam View• Allows students to see their results from within Moodle.• Developed in 2010 with JISC funding.• Released to the...
Exam View• Allows students to see their results from within Moodle.• Developed in 2010 with JISC funding.• Released to the...
Voting System• Students can vote in executive elections.• Clicking a link in our Moodle navigation block takes them to the...
Voting System• Students can vote in executive elections.• Clicking a link in our Moodle navigation block takes them to the...
The Challenges• Lots of systems that look di!erent and work in di!erent ways.• Di!erent URLS for sta! to remember.• Trying...
Our Approach• Come up with a department ‘look and feel’ to apply to all our sites.• Think about the building blocks that m...
Our Visual Style• Our college had a design team.• They came up with the MyCity logo, and gave us a ‘department colour’.• I...
Our Visual Style• Our college had a design team.• They came up with the MyCity logo, and gave us a ‘department colour’.• I...
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 a...
Our Visual Style
Why Facebook• Facebook has about 1 billion users.• What percentage of your sta! and students are Facebook users?• Facebook...
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-us...
Our Visual Style
Our Visual Style• In mid-2012, replaced our own CSS library with the Twitter Boostrap.• Provides buttons, image styles, na...
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 ...
Dashboard• Top of dashboard contains the name and avatar of the logged-in user.• Top menu link is always ‘Home’.• Bottom m...
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 oth...
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 conte...
Navigation
Navigation
The ‘Mega Menu’• A relatively new interface tool for displaying links in a well-ordered hierarchy.• Lets us put more conte...
Navigation
Navigation
Navigation
‘Smart Features’• Give the user visual feedback when something needs attention.• Dashboard and icon bar light up when you ...
‘Smart Features’
‘Smart Features’
Custom Course Format• Moodle 2 o!ers several course formats, and you can write your own.• Examples are ‘Topics’, ‘Weeks’, ...
Custom Course Format
Measuring Performance• Analytics and Heatmaps are used to measure the performance of our Moodle.• Provide useful statistic...
Measuring Performance• Piwik used for analytics.• It’s on open-source alternative to Google Analytics you host in-house.• ...
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...
Measuring Performance
Measuring Performance
Measuring Performance
Questions      Alex WalkerCity of Glasgow College
Upcoming SlideShare
Loading in...5
×

Theming moodle for integration and usability

1,653

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,653
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Theming moodle for integration and usability

  1. 1. Theming Moodle forIntegration & Usability Alex Walker City of Glasgow College
  2. 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. 3. The City of Glasgow College Bb 8.0 m 1.9.8 m 1.9.8469 Courses 672 Courses 609 Courses628 Sta! Accounts 363 Sta! Accounts 157 Sta! Accounts
  4. 4. The City of Glasgow College m 2.4.0 3,932 Courses 16,102 Active Users
  5. 5. Our Strategy• Moodle as our main student portal.• Custom developments that add functionality to Moodle.• Other services that sit alongside Moodle.
  6. 6. Our Strategy Moodle MaharaExam View Video Repository‘Print Room’ Voting System Badges Private File SharingAdvertising Enrolment Database
  7. 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. 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. 9. Exam View• Allows students to see their results from within Moodle.• Developed in 2010 with JISC funding.• Released to the community.
  10. 10. Exam View• Allows students to see their results from within Moodle.• Developed in 2010 with JISC funding.• Released to the community.
  11. 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. 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. 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. 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. 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. 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. 17. Our Visual Style
  18. 18. Our Visual Style
  19. 19. Our Visual Style
  20. 20. Our Visual Style
  21. 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. 22. Our Visual Style
  23. 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. 24. Our Visual Style
  25. 25. Our Visual Style
  26. 26. Our Visual Style
  27. 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. 28. Our Visual Style
  29. 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. 30. Our Visual Style
  31. 31. Our Visual Style
  32. 32. Our Visual Style
  33. 33. Our Visual Style
  34. 34. Our Visual Style
  35. 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. 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. 37. Navigation
  38. 38. Navigation
  39. 39. Navigation
  40. 40. Dashboard• We don’t use Moodle’s Navigation block.• Two blocks replace it: My Courses, and Dashboard.
  41. 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. 42. Navigation
  43. 43. Navigation
  44. 44. Navigation
  45. 45. Navigation
  46. 46. Navigation
  47. 47. Navigation
  48. 48. Navigation
  49. 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. 50. Navigation
  51. 51. Navigation
  52. 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. 53. Navigation
  54. 54. Navigation
  55. 55. Navigation
  56. 56. ‘Smart Features’• Give the user visual feedback when something needs attention.• Dashboard and icon bar light up when you have unread messages.
  57. 57. ‘Smart Features’
  58. 58. ‘Smart Features’
  59. 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. 60. Custom Course Format
  61. 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. 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. 63. Measuring Performance
  64. 64. Measuring Performance
  65. 65. Measuring Performance
  66. 66. Measuring Performance
  67. 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. 68. Measuring Performance
  69. 69. Measuring Performance
  70. 70. Measuring Performance
  71. 71. Questions Alex WalkerCity of Glasgow College
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×