QMO quality.mozilla.org (alpha)

QMO (quality.mozilla.org) Redesign: Project Overview 

Project Goal: 

Redesign QMO (quality.mozilla.org) with a completely new look and feel that represents the Mozilla 


Quality Assurance (QA) team and community. The new website design should incorporate our QMO 


logo set to create a unique identity for Mozilla QA within the greater Mozilla project community and 


the Web at large. The visual style should be transferable to other materials (newsletters, flyers, 


posters, etc) that we may create to promote QA related events and projects. 



Project Background: 

The work of the Mozilla QA team and community has played a critical part in the success of Firefox, 


but we have never had a place to call home on the Web. Thousands of testers are scattered across a 


number of other websites, wikis, forums, newsgroups, etc. and we have tried to solve that by creating 


a central portal with QMO. Although our main product is Firefox, the long term vision for the site is to 


be a home for QA across all Mozilla related projects and products. 


In it's current state QMO is nothing more than a standard Drupal 5.1 installation using the default 


theme. Only the color has been modified, and Firefox logo added, to create a temporary identity to 


make it feel like a Mozilla community website. It serves us well with a basic set of features that 


encourage collaboration between the QA team and community and provide us with the tools we need 


to share ideas, promote events and projects, and work together in our testing efforts. The challenge 


is to continue to provide those services to our existing community, but also create a site that will be a 


destination for anyone looking to get involved with Mozilla. QA is an entry point for many volunteers 


to our project, so QMO will also serve as a gateway for Firefox users that want to become a part of 


the Mozilla community. 



Project Scope: 

This is a complete website redesign -all elements of the current site are candidates to be changed, 


removed, rethought, etc. The goal is to NOT look like a standard Drupal site, but still create a unified 


look and feel without sacrificing the ability to use the Drupal framework of blocks and nodes to 


update, localize, and reorganize content as needed. Therefore, it is crucial that all graphics and visual 


elements be created with a modular layout in mind that is still aesthetically pleasing, user friendly, 


accessible, and localizable. The overall scope will be about 5 pages that share the same visual style. 


These pages will include: 

� 
Frontpage 
� 
Events & Calendar page 
� 
Projects page 
� 
Member gallery page 
� 
Forums page 

All other pages we may create in the future will be able to borrow from the general layout and style of any of the pages above. In terms of content, a lot of it is already hosted on the current site, and will be reorganized to fit the new website design in the appropriate places. We have attached a rough mockup of the QMO frontpage as an example that covers the critical pieces of content that will be the foundation for other QMO pages mentioned above. More notes on our design ideas can be found at 


http://wiki.mozilla.org/Mozilla_QA_Community:QMO_Design:Design_Doc 


Target Audience: 


QMO will serve the needs of two major segments: the Mozilla QA team and our community. Although both segments will use the website for different reasons and members of both groups come from a variety of backgrounds, they all share the same goal in maintaining a high level of quality for Firefox and other Mozilla products. Therefore, the site design should reflect the passion they have for software quality assurance in general and the ongoing success of the Mozilla project specifically, with current focus being on Firefox. 


Mozilla QA Team 


� 	Made up of a small group of experienced testers and tools developers that work for Mozilla Corporation. They will be the "owners" of the site and therefore should feel comfortable with the layout and navigation in order to make administrative tasks as easy as possible. It will also be their primary channel for communicating with the rest of the Mozilla community and millions of Firefox users around the world about Mozilla QA related topics. They will: 

� 	
Write articles and/or blog posts to keep the community updated on what we're working on and to ask for help with specific tasks. 
� 	
Create new project pages for things we are working on, to track progress and provide the community a chance to learn more and get involved. 
� 	
Promoting community events through the calendar and front page. 
� 	
Moderating the forum discussions and comments. 

Mozilla Community 


� 	Consists of thousands of volunteers of varying levels of technical ability and quality assurance experience. At the most basic level, they can be broken into two groups: experienced Mozilla contributors and Firefox users looking to get involved. Mozilla contributors are usually web savvy enough to find their way around the website and will seek out the information they will need. New visitors and Firefox users looking to get involved will rely on the website content to direct them to areas of Mozilla QA that they might find interesting, making the QMO frontpage the most important element of the redesign. Here is a break down of the various types of visitors/users we expect at QMO: 

� 	
Average users and new Mozilla community members (looking to learn more about the Mozilla project and how they can get involved) 
� 	
Nightly testers (established contributors that use nightly builds and are fairly active across the Mozilla project's many sites/channels) 
� 	
User-based/Blackbox Testers (anyone that wants to help by testing Firefox, whether it is an official release or nightlies) 
� 	
Bugzilla contributors (people that live and breath bugs by writing, reproducing, and resolving them through Bugzilla) 
� 	
Tools and Automation developers (looking to do a bit of programming and building out the test infrastructure) 
� 	
Data/Information Analysts (there will be people that are interested in combing through user feedback, crash data, and bug info to get a better understanding of the quality of our products) 

Brand Direction: 


The QMO website and brand needs to be established within the broader Mozilla community to be THE destination for everything related to Mozilla QA... just as SpreadFirefox.com is for the Mozilla marketing and Mozilla.com is for general company and product information. When Firefox users think about a bug they have found or feel the need to get involved with the Mozilla project through testing or feedback, we want them to visualize the QMO logo (see logo set below) and immediately think of quality.mozilla.org. For those that are already part of the Mozilla QA community, QMO should become their new home and identity for the hard work they do and the influence they have in the development of Firefox and the user experience of millions of Firefox fans. Once the website is established and the QMO brand recognized throughout the Mozilla community, we hope it will help us showcase the power of open source software and quality assurance communities to the Web at large. 


QMO Logo Set: 



Design Direction: 


The QMO website design needs to embody the passion and diversity of our Mozilla QA team and community. It also needs to convey the concept of "quality through collaboration". Being an open source project that created a successful consumer product and brand in Firefox, we have been the pioneers in transforming a small group of dedicated techies into a community that includes millions of Firefox users around the world. As a central hub for all Mozilla QA related activity, the design should be clean and modern, with a focus on knowledge sharing, collaboration, and active participation. 


Earlier this year, the Mozilla QA team and community came together to vote on the QMO logo and secondary elements above. We feel the logo set provides a solid foundation for the QMO website and should bring inspiration to designers and directly influence the design direction for this project. 


QMO should be exciting, fun, and engaging enough to give people a reason to visit often and contribute to projects and discussions. The frontpage should be effective in welcoming new members and providing them with the visual queues they will need to navigate the site and find the information they are looking for to become valuable members of our community. Overall, the website design should represent the power of community and reflect the quality we strive to achieve with Firefox and other Mozilla products. 


Other Considerations: 


Drupal: It is crucial that the visual elements be easily translated into the modular blocks structure and implemented within the theme/template framework of Drupal 5.x. The challenge is keep those design requirements in mind when making major layout and graphics decisions without limiting the creative design process. 


Technology: As with other Mozilla websites, QMO should showcase the most innovative and dynamic open web technologies to create an awesome user experience. We need to accomplish the goal for each section of the website without being too flashy or showing off for the sake of showing off. This also means proprietary methods such as Flash are off limits. 


Localization: Firefox is currently available in over 40 languages and many of our community members are from outside the US. We need to enable them to localize QMO in order to overcome language barriers and engage people in other countries. Therefore the website design will have to strike the right balance between being visually impactful and localization friendly. 


QMO Frontpage Mockup: