Mozilla Corporation Directory

The Mozilla Corporation has seen considerable growth in the last 3 years, and its internal phone book was in need of an update. Working with Wilson Lee, I designed an interac­tive prototype that improved readability, findability, and appearance. New features include search-as-you-type, organization charts, seating maps, and photo slideshows.

My Role

  • Crafting a new visual design that is both clean and inviting.
  • Brainstorming task flows and interaction guidelines for new and existing features.
  • Translating designs into standards-compliant XHTML and CSS.
  • Using jQuery and Javascript to create interactive prototypes.

Challenges

Numerous ways of finding employess exist within the Mozilla Corporation. However, they are often static, inconsistent, or difficult to locate. These factors were a barrier to their use and maintenance.
See my approach to the problem... The new Mozilla Corporate Directory brings multiple disparate services together under a common banner. The interface for each system was redesigned to present a common visual theme and interaction style. Simple but complete navigational elements were then added to aid the discovery of and transition between these different services. By wrapping existing services in RESTful APIs, business logic was separated from user interface, speeding the transition to the new system.
Following a recent office change, finding an employee’s desk proved difficult. A map of office seats was available, as well as a table of employees and their respective seat, but with nothing to connect the two. A better way of finding where someone sat in the office was desired.
See my approach to the problem... By combining floor plans with a maps of telephone outlets, a geographic representation of office desks (roughly corresponding to phone outlets) was created. The internal phone directory was then used to connect employees with their phone outlets, producing an effective map of where each person sat in the office. These points were then scaled 10x and mapped to pixels on floor plan images. Using jQuery UI, I prototyped a draggable, zoomable floor plan with clickable markers placed at each employee's desk, capitalizing on user's familiarity with systems like Google Maps.
Answers to common questions frequently require the use of multiple resources. For example, after identifying an employee’s manager in the org chart, the user would then have to turn to the phone book to get their email, or the seating chart to seek them out in person. The lack of connectivity between these resources created unnecessary overhead.
See my approach to the problem... When these services were organized under the new Corporate Directory, they were given a structured RESTful architecture. This made linking and referencing other services in the Directory much simpler. Taking advantage of this, many links were added to each view to allow easy transition between the different services. For example, after looking up an individual in the phonebook, links provide a quick way to locate their position in the organization chart or their desk in the seating chart. In several cases, these transitions can be performed using Ajax, allowing faster navigation by eliminating unnecessary changes of context.