2012-09-19 / The Work Department
This site has been in the making for months and we’re excited to share it with the public! It’s intended to be the online home for the Commotion project — connecting both developers and users to mesh networking tools. We’ve been working with the Open Technology Institute (OTI) and the Commotion community of developers for over a year and this marks a major milestone in our collaborative relationship. Many steps have brought us to this point and many minds have contributed to the process. We’d like to share those key steps with you. Creating the brand identity In May we finished the brand identity for Commotion, which has informed all of our work to date. The versatile and accessible identity (a complete set of logos, typefaces, colors, usage standards, and language) was created for use in multiple environments — online, in print, on mobile phones, and in software. It’s important to us that people experience the Commotion identity consistently, no matter how they are interacting with the project. So, for those of you who have been following Commotion, the look and feel of this website should be no surprise. It adheres well to the brand identity and gives us an opportunity to demonstrate how to implement the identity and expand the visual palette — in a very public and ready-to-use way. Conducting user research We include user research in our planning and design process whenever possible because it’s essential to know what the actual users and surrounding community are thinking. In the early stages of the project, we conducted simple surveys among the Commotion community. Deeper into the process we conducted interviews with four users who were working with neighborhood mesh networks being used as testbeds for Commotion. This research shed some light on how people thought about Commotion, how users actually experienced its early software tools, and what common problems users were facing. This new knowledge informed how we organized the site to speak to two major audiences: developers and end users of the software. Dreaming of user interfaces We spent time prototyping user interfaces and developing Human Interface Guidelines (which are a set of recommendations for developers) with the useful input of many people in the Commotion community. This helped us build a visual framework for Commotion’s user experience and begin to set some standards for how the tools will work across multiple platforms. We established visual languages (descriptive, action, learning, warning, and in-progress languages) that carry through to this website. By interacting with other developers and designers during this “dreaming” stage, we incorporated more ideas and eventually settled on Human Interface Guidelines that meet the community’s needs. Researching other communities There are many successful open-source software projects out there, and it was important to take a look at their structures so we could learn from others and find out what we could improve on. We produced a brief report about four different open-source software communities, which is available here. We compared documentation, support, issue tracking, and governance systems, among others, for each community. This research provided a good overview of what systems were available and widely used. It informed how we structured this site, especially the home page. Drafting designs We started our website design process by creating a sitemap and set of wireframes to outline the navigational structure and content. We went through several iterations (over the course of a few weeks) based on feedback from Commotion developers and OTI staff members. Once this was complete, we began drafting designs for the home page and a few interior pages. We went through a similar revision process with OTI and created several iterations before coming to a final version which is the site you see today. The home page is the primary way in which we invite two different audiences to find what's relevant to them — new visitors and returning visitors. Because Commotion is such a young project and because the public has little experience with mesh networking, we wanted to create an easy introduction to the project while allowing returning visitors to access the main navigation menu. The details This site is run on Drupal and the Omega base theme. It is responsive to browser size (try changing the size of your browser!) and has been built with visual accessibility in mind (with sufficient contrast and without relying on color coding). It makes frequent use of the Context, Media, Panels, Wikitools, and Book modules in Drupal. Using Drupal’s basic role distinctions, different areas of the site will eventually be edited by different teams or staff members as the Commotion community evolves. Team leaders will have access to specific areas of the site that they are responsible for. And, blog submissions are welcomed from anyone working in the Commotion community. In fact, if you have something you’d like to write about, contact us! Thanks to everyone who has been involved in this design process! We look forward to a vibrant online community that helps newcomers try out and understand mesh networking. Please share your feedback about the new site by submitting a comment below.