I'm dreaming of a beautiful user interface

We recently had the opportunity to design prototypes for Commotion, which is a software project that helps people create community wireless networks. We referred to this complicated but exciting project as "the Dream UI," since it was an opportunity to include all of the design ideas we had been dreaming of including. We had already created a brand for the project, so our goal was to combine that with a simple, streamlined process to setup (or join) a wireless mesh network. Our secondary goal was to include an integrated, educational component for first-time users to become more accustomed to the vernacular and process but not alienate advanced users at the same time. Here's an excerpt from our report about the dream UI we created for Commotion:

As part of our work to support the Commotion development process, we’ve created a user interface prototype to spark more community conversation. This is a starting point – not a final product. It’s a compilation of some of our ideas around creating the most effective and accessible Commotion experience, based on our neighborhood deployment and research with users and developers. Input from the Commotion developer community will drive the next phase of our project, in which we will draft Human Interface Guidelines for the software.

Screenshot

Design Overview

These prototypes utilize the graphic elements from the Commotion brand identity with the goal of creating an accessible, functional, clear and trustworthy graphic user interface (UI) for OpenWRT and OLSRd. The design is responsive and meets the needs of both a desktop and a mobile user. The graphic aesthetic is flexible and accommodating for as many users as possible through the use of large typography, white space and action icons. The workflow is streamlined to meet the needs of a beginner whose goal is to either set up a new mesh network or join an existing mesh network. This process is intended to facilitate the base configuration without cluttering the interface with developer or administrator functionality. However, the proposed interface also includes direct pathways to advanced functions and does not prohibit a beginning user from learning more. Overall, we wish to create a basic humanistic setup without deterring a beginner from experimenting with the deeper configuration or withholding necessary technical vernacular.

From a selection of our initial local user interviews, we confirmed that users expect long-term reliability, speed, and ease of use when using wireless devices. The Commotion user interface should:

  1. Walk a user through the setup process
  2. Work well across platforms, browsers, and devices
  3. Allow for easy monitoring of network status in terms that users can understand
  4. Help users understand mesh network security
  5. Offer troubleshooting suggestions when a network does not work correctly
  6. Be as fast as using a non-mesh WiFi access point

At this stage, the following prototypes address points 1-3 listed above.

Read the full story at the Commotion Blog...