Last week we organized a LeMill design sprint with my colleagues from learning environmentsÂ research group at Aalto University. LeMill portal was launched more than 4 years ago and it needs some rethinking on the design and user experience. We have developed a lot of small new features but the overall design has not changed much. New features that were added gradually have also resulted some issues with the consistency of LeMill user interface.
Our initial aim was to focus on the five design issues that were pointed out by Teemu:
- connections with Web 2.0/social networking services
- re-designing (Web 2.0) the appearance of the site
- search centric approach
- online status information and chat for the community
- user dashboard
During the first day we focused on redesigning our front page and navigation. The main idea behind current front page is to show good collections of resources that our members have created. Unfortunately we have only a few collections in English and therefore our current front page doesnâ€™t work well for international visitors. Also, the navigation on the current front page is different than on other pages.
The current layout is designed so that it would work on 800×600 screen resolution without horizontal scrolling. With this decision we have limited the page with to 760px. Most of the popular web sites have their page width between 950 and 980 pixels. The percentage of LeMill users on 800×600 resolution has come down from 4,21% in November 2007 to 0,92% in May 2010. Mobile devices with smaller screens have quite good techniques for scaling down the web sites. Therefore we decided to give up old restrictions and redesign the layout for 1024×768 px resolution. I was looking for the standard page width for this resolution but there is no common standard. For example Apple suggests to use 980px page width in their Safari Web Content Guide.
I was comparing several CSS grid systems for making the new page layout. The most promising system seems to be 960 Grid System. In addition to CSS templates they have also wireframe templates for widely used prototyping tools: OmniGraffle, Visio, etc. The wireframe prototype for the new front page is based on 16 columns.
With the wider design all four sections have equal importance on the front page. Instead of random collections we will display featured resources and people that are picked by the moderators. This way we can be sure that our front page will always contain high quality content in a chosen language. The main menu will look exactly the same on the front page and on all content pages. The new design has been already integrated with the development version but it is not yet submitted to our version control system.
In addition to layout redesign we were also working on the dashboard prototype. According to current design My LeMill dashboard will contain six widgets in two columns:
- My recent resources
- Recent resourses from my contacts
- New learning resources
- Recent collaborations
- Recent discussions
New learning resources will be displayed based on the user profile (subject areas, languages). Recent collaborations widget will display a notification when somebody has edited a resource that you have created or edited. Recent discussions widget will display recent discussions in your groups. Events that do not fit into any of these widgets will be displayed in the notifications widget.
We are planning to release LeMill with new layout by the end of September. This version will contain also several other usability improvements such as reordering text blocks and media pieces by drag and drop. My LeMill dashboard needs some more thinking and it will probably not be ready for the next release. However, the next release will significant enough for version number 3.0.