E-mail
Background
As part of the 3akai project and the overall UX initiative, the Sakai Foundation, University of Cambridge and Georgia Tech recently engaged a User Experience Design Consultancy in the UK to take the next step and apply a visual design to the wireframes produced by Nathan Pearson. The Sakai Foundation signed the contract, with Georgia Tech and Cambridge providing additional funding. This is really an extension of the UX Improvement Project that Stockholm University and Indiana University recently contributed to as well.
The design consultancy, Flow Interactive, was chosen because they had worked with Cambridge previously, were close to Cambridge which would facilitate implementation and had access to a designer who we really liked.
Project
The goal of the project was to provide a visual design that would create a compelling "out-of-the-box" experience for the generic Sakai and be flexible in terms of applying local branding. This goal was to create something for the 3akai R&D effort, not necessarily be the final design for 3.0 which we knew would require community input. We hoped, though, to create something strong enough that it could form a very solid foundation for 3.0.
As a first step we had a meeting in London to review our ideas about what the visual design should convey about Sakai and to review other applications that we liked and didn't like. Participants in the workshop were John Norman, Michael Korcuska, Nicolaas Matthijs and Clay Fenlason (virtually).
That resulted in this presentation. As you can see from the presentation, the attributes that were potential points of emphasis in the design were:
- Authoritative
- Smart (in both sense of the word)
- Timeless
- Open
With "Authoritative" as an underlying them, Flow presented 3 designs each of which emphasized one of the other attributes. Of course we all had different opinions of which one we liked best. So a hybrid was created and, after a few iterations and working through some areas we didn't like, we ended up with something that I think captured the best of all the original ideas.
The Visual Design
Below is a gallery with several static images that illustrate the results. I (Michael) am pleased at the overall effect and the fact that the designs work well with either an image or static/gradient color as the background. And I think the Georgia Tech branded sample works nicely too.
Gateway
Create Account
Dashboard
.jpg)
.jpg)
.jpg)
Profile
Inbox
Site Management
Site
.jpg)
Search
.jpg)
.jpg)
I'm unsure about whether to use the image or the gradient as the default background. Let me know what you think.
The Master Files
You can download the set of produced master files over here: Master Files
The Implementation
Flow is delivering a set of annotated, master PSD files that Cambridge and Unicon are applying to the wire frames and implementing. There's not much to show at this point in terms of working screens, but we plan to demo this at the 10th Sakai Conference in Boston.
These are being built using as many Fluid components as possible and using the Fluid Skinning System.
Feedback
Let us know what you think! Again, this is a work in progress that we intend to evolve into the basis of Sakai 3.
Helping out
We need to build an official style guide. This will probably involved working with the designer who really understands the principles and philosophies underlying the design. This will be a helpful reference as other Sakai 3 projects begin to do design work. If you're interested let Michael know.
We'd also love for other designers to start working with the master PSD files (not yet published) to begin designing additional screens.