01 November 2006

Interface Design Case Study - Sakai LMS

Recently I was asked to design a new Interface for the popular open-source community and learning management system, Sakai. Herein I include some of the challenges, take a look at the before and after screenshots, and provide an update on progress and current usage of the final product the "Amistad" skin.

In June, I had the opportunity to work on a project for CARET (the Centre for Advanced Research in Educational Technologies), to design a more user-friendly and inviting interface for the Sakai system in use at the University. Sakai is a collaboration and learning management system used by many to "support teaching and learning, ad hoc group collaboration, support for portfolios and research collaboration."

As an ongoing open source project, there are continual improvements being made and functionalities being added. In June of 2006, CARET was interested in making improvements to the usability and user interface.


  • The instructions were to create an interface that wasn't drastically different from the current (maintained familiarity for current users and held to a generally minimal aesthetic) but was more friendly, inviting and usable. The client described the current design as too boxy and technical and were looking for a "rounder" more "humanities friendly" design.
  • The time and resources alloted for this project allowed for a strictly superficial facelift. changes were made only to the CSS and imagery and only existing CSS classes where effected.


  • CSS and web standards: Due to excellent work and planning on the part of the Sakai developers, the interface/template system is built on web standards and pure css. Unlike other interfaces I have worked on, in Sakai, the skin CSS was a beauty: It was clean, standards compliant and the classes were consistent and well described with comments throughout. This made all the difference, and indeed, was the reason I was able to create a new skin in a week.


  • I discovered that only some (a mniority) of the image files used for the interface were available within the technical jurisdiction of the template. This meant, that many of the images I wanted to improve were inaccessible system files. Any changes would have to be overall changes made to the system - not skinnable. That was a shame. For example, I discovered that the usability of the file storage system was extremely confusing, and could be drastically improved by just redesigning the folder icons so I created alternatives but they couldn't be implemented with the skin.


The resulting skin, which I called "Amistad" was subsequently included as a default option with the following Sakai installations. It was also picked up and customized by other institutions.
The detailed work log provides more process information and the resulting 'Amistad' skin is available for download online.