College of Management Moodle

Challange

Designing a custom Moodle experience to replace the existing, generic theme.

Before

After

Concept

Cooperating with a team of professors from the college's business department, along with the college's computing department the vision was to create a road-like design for courses, with a dashboard feel and a clean design. Ideas were also made based on competitors research and focus groups held with students and professors.
Student UI
Professor UI
An infographic devision between reading and submission assignments for each subject in a course
An "add subject" button as part of the natural flow
A navigation toolbar which scrolls to the wanted subject within a course. Comes-in handy for courses with lots of subjects
A horizontal, scrollable display of subject assingments. Featuring a general and assignment-specific progress bars representing the precentage of students who had finished the assingment, allowing the professor to keep track of the class's progression
Subject description with a settings drop-down menu button, to allow professor to edit, duplicate, hide and delete subject
Course description with an edit button for the professor to introduce the course to the students and explain a bit on what it's about
An infographic devision between reading and submission assignments for each subject in a course
Indication for the end of the course
A navigation toolbar which scrolls to the wanted subject within a course. Comes-in handy for courses with lots of subjects
A horizontal, scrollable display of subject assingments. Featuring a progress bar representing the precentage of tasks finished by the student, and time-to-dead-line progress bars for each assignment, to give the student a visual idea of how much time he has left to complete each task
Subject description
Course description
Initially the idea, as suggested by the college's teams, was to create a fully vertical design. The final design which I suggested incorporated a vertical display of subjects, with a horizontal display of assignments for better use of screen space. For some fuller design presentations see my Invision mock-ups:

Iconography

Custom-made icons for the Moodle system

Assingment Icons

Achievements Icons

Sizzzle