Announcing a redesign of quality.mozilla.org

pragmatic

2

The Mozilla Quality Assurance team is excited to announce a redesign of our blog quality.mozilla.org (QMO). The redesign involves changes to content as well as the visual theme of the blog. Our documentation has moved into a new Quality Assurance zone on Mozilla Developer Network (MDN), where all of Mozilla’s documentation resides.

Shining a spotlight on content

QMO’s new home page puts the focus on content. Contributors who share our vision of “driving quality across Mozilla with data, metrics and a strong community focus” can straight away find several ways to get involved. The Contributor Spotlight section features community members who are actively engaged in our activities. Upcoming events are listed in the sidebar and link to the full events calendar. High volume syndicated feeds no longer obscure our QA-specific blog posts. You can search for past content in a number of ways: by category, tag, date or keyword search. Social media links, the team Flickr photo album and RSS feeds provide ways to follow us. There is a dedicated page for the smaller teams under the Quality Assurance umbrella to state their mission and introduce their team members.

A clean new look

Helping the content jump off the page is a clean new WordPress theme that makes heavy use of modern web technology: HTML5, CSS3, web fonts and responsive layout. Based on One Mozilla, the theme is customized for QMO: the teams page is automatically generated, the sidebar widget splits in responsive mode, the Tabzilla menu appears at the top, and there is extra CSS for plugins: the Events Calendar and Recent Posts Widget Extended.
qmo6-responsive-wordPress-theme

Moving from back-burner to forefront

This is the third redesign of QMO since its launch in 2006 as a basic WordPress setup. At that time Jay Patel led the initiative to give QMO its own identity and a more powerful web platform. In 2007, John Slater and the creative folks at RubberDesign came up with ideas for the QMO logo. Community members voted for their favorite: the logo that we use even today. Shortly after that, QMO switched to Drupal on the backend. In 2011, QMO went back to WordPress as a platform. Craig Cook from Mozilla’s WebProd team designed a custom theme. For the first time, each team within the Quality Assurance group got its own team icon.

QMO in 2010, running on Drupal

QMO in 2011, after switching to WordPress

QMO in 2014, just before the newest redesign

QMO used several third-party plugins to provide additional functionality, some of which made the site unstable and hard to maintain. BuddyPress was used in an attempt to turn QMO into a community platform, allowing community members to register and post on forums. Automated spam bots soon discovered this paradise and over three years, thousands of accounts were created and deleted. In 2013, Craig Cook de-activated BuddyPress and rewrote the QMO5 theme. Folks deeply involved in maintaining QMO, chiefly Craig Cook, Stephen Donner and Raymond Etornam Agbeame realized the need to do-over QMO but the process always moved to the back-burner when more urgent needs came up.

In June 2014, the Quality Assurance team put out a call for community members to state what QMO does well, what is does poorly and what it should do but doesn’t do at all. The response was overwhelming: a number of Mozilla employees and contributors wrote back, expressing their frustration but also offering specific suggestions for improvement. The feedback helped to fuel mockups of what the new website could look like. A session at the QA Work Week in July 2014 to digest the feedback and critique the mockups went way over its allotted time. The decision to stay with WordPress as a platform or to move to Django was also hotly debated.

In August 2014, Clint Talbert demo-ed a prototype of what QMO would look like if it were based on Mezzanine, an open source CMS based on Django. Parul Mathur, a community contributor, demo-ed a prototype of what QMO would look like if it were still based on WordPress but with Mozilla’s universal blog theme, One Mozilla. Ultimately, it was decided to keep QMO as a blog with an emphasis on events, a task for which WordPress is perfectly suited. Craig Cook, who had been supporting QMO since inception, went to work the changes needed to customize One Mozilla for QMO. Stephen Donner deactivated the BuddyPress plugin and, along with Craig, purged the 5,000+ accounts it had helped create.

Documentation gets a new home

Meanwhile, a six-member tiger team made up of Mozilla QA staff and community members took on the task of moving the documentation off to MDN. During hour-long sprints each week in October 2014, the team triaged every document on QMO and determined whether it was obsolete, needed to be updated, or good enough to be moved to MDN right away. Martijn Wargers agreed to review each document once it was updated on MDN. Chris Mills, senior tech writer at Mozilla, gave a ton of guidance to the team on how to manage the transition of documents from QMO to MDN. He also created a zone within MDN dedicated to Quality Assurance. Eric Shepherd, developer documentation lead at Mozilla, pointed to the HTML and CSS zones on MDN as good examples to follow while creating the home page of the QA zone. Eric also modified a macro so that the QA zone could show a custom welcome banner for its community. In the first week of November 2014, the tiger team reviewed the remaining content on QMO and felt ready to roll it out. Thanks are due to each member of the tiger team: Clint Talbert, Stephen Donner, Syd Polk, Aaron Train, Martijn Wargers, Marcia Knous, and Parul Mathur.

qa-zone-in-mozilla-developer-network

One WordPress to rule them all

On December 18, 2014 the WebProd team of Craig Cook, Jason Crowe and Chris Turra assembled in a virtual war room with Stephen Donner and Parul Mathur of the QA team. In a marathon 3 hour session they tested the new QMO on staging and then rolled it out to production. 15 plugins that were in use on QMO since 2011 were de-activated. The Events Calendar plugin was updated to the latest version and 387 events were migrated to be compatible with it.
In early 2014, the WebProd team had decided to implement WordPress Multisite so that a single WordPress instance could power all WordPress blogs across Mozilla. A plugin would map a domain like quality.mozilla.org to the URL blog.mozilla.org/quality behind the scenes. QMO was the last of 101 blogs to aggregate under Mozilla’s WordPress Multisite infrastructure. Here’s a big thank you to the WordPress open source project and its awesome community!

Improving the calendar

There is still room for improvement with respect to our events calendar. We intend to get all our public team meetings on it so that our community members find it easy to join them. The home page will prominently highlight events that are in progress (as opposed to past or upcoming).
qmo6-events-calendar

Logging in

If you have an @mozilla.com account on QMO, you will now be able to use LDAP to log in. If not, please reset your password by clicking on the Lost your password? link.

Get Involved

The QA team owes profound thanks to its vibrant worldwide community, without whose input this redesign process would not have been successful. We would love for you to take the new website for a test drive. Please leave us your comments below. Share your experience with us on Twitter by tweeting at @mozillaqa and using the hashtag #qmo. If you find bugs, please file a report. If you want to contribute directly to the site’s code please don’t hesitate to join us on irc.mozilla.org in the channel #qa.

2 responses

  1. kamran wrote on ::

    Glad to see that nice sharing thanks

  2. William Oky wrote on :

    Amazing design