Add-on Developer Hub

The Firefox web browser has an active community of over 3,500 add-on developers. However, resources and docu­mentation for add-on development are typically diffuse and unorganized. As a user experience design intern at Mozilla, I helped organize and design a rich, extensible directory of documentation, tools, and communities for developers.

My Role

  • Reviewing surveys and engaging users to determine developers' needs.
  • Designing the information architecture for a directory of developer resources.
  • Using card sorts and paper prototypes to evaluate design choices.
  • Preparing high-fidelity wireframes for all pages of the site.
  • Working with web developers to create strong usability and interface guidelines.

Challenges

Developing add-ons requires knowledge of various technologies (e.g. Javascript, CSS, XUL) and practices (e.g. interface design, DOM manipulation, security). Documenta­tion for each exists in various formats and levels of completeness throughout the web. With little cohesion between these resources, it is difficult for new developers to learn the basics.
See my approach to the problem... By collaborating with members of the add-on development group, I was able to prepare a preliminary collection of resources and strategies used by developers. Using these sites as a starting point, I created a content inventory and extracted a set of terms to describe these resources. I then performed an open card sort with several local add-on developers using these terms, the results of which I used to create an initial site taxonomy. I then performed a closed card sort with a separate group of developers using this taxonomy, and used their feedback to refine the taxonomy and organize sites within it. Finally, I used the taxonomy to create several axes on which to organize information, such as level of experi­ence, level of abstraction, and stage of the development process.
Experienced developers typically seek answers to more complex questions and to discover new and advanced techniques. With the diffuse nature of existing resources, this often demands exploring and monitoring more sites than is reasonable.
See my approach to the problem... From observation of the development community, I noticed two strategies frequently employed by experienced developers: using unstructured searches (typically Google) or queries of the community to locate answers to specific questions; and passively monitoring developer resources (such as blogs and newsgroups) for new techniques and technologies. To help facilitate these activites, I proposed several new developer resources. To aid searches, I recommended a Google Custom Search of several popular and extensive developer resources, with options to narrow one's search to a particular resource or broaden it to the entire web. To promote help-seeking within the community, I created designs that improved the visibility of active community networks as well as a new forum directly targeting new add-on developers. To simplify the monitoring of blogs and newsgroups, I proposed a directory of add-on focused blogs and a feed aggregator based on Planet 2.0 from which users can discover new sites of interest or simply watch the activity of the community.
Various technologies exist both internal and external to Mozilla to support the development of add-ons. However, lack of visibility, completeness, and usability have lead to slow adoption.
See my approach to the problem... Working with other interns in Mozilla, I helped create usable interfaces to match the power and robustness of these development tools. My work included front-ends for: a system to automate the creation of new add-ons; a code analysis and validation tool for submitted add-ons; and a search engine for submitted add-on code. These designs were then updated to match the visual design of the site and prototyped in XHTML/CSS. Finally, these tools were integrated into the site's information architecture and promoted across several channels.