Engagement/Developer Engagement/Hacks blog/2014 Redesign

From MozillaWiki
Jump to: navigation, search

Hacks Blog Redesign


The https://hacks.mozilla.org/ is a unique voice in Mozilla’s outreach efforts. It offers long-form, deep-dive content from technical experts to hundreds of thousands of visitors per month. Based on its traffic, Hacks is one of Mozilla’s most popular blogs. Blog posts on Hacks drive significant traffic to other Mozilla websites. Hacks is a valuable resource for both its audience and for Mozilla.

This project will:

  • Modernize the Hacks Blog’s design, bringing it into alignment with Mozilla’s upcoming style guide, using modern code and UI conventions, optimizing it for multiple screen sizes and increasing opportunities to connect Hacks with other relevant content in the Developer Relations product suite.
  • Allow us to publish localized content on the Hacks Blog, opening up new audiences for Hacks content, attracting new Hacks authors, and creating pathways for new Mozilla contributors.

Problems Addressed

Authority. The Hacks Blog was designed in 2009. It utilizes outdated Mozilla branding elements, suboptimal code and a dated UI. This decreases the blog’s usability and authority and thereby diminishes the blog’s reach among both readers and potential authors.

Effectiveness. While the Hacks Blog has strong monthly traffic, it also has a high bounce rate. Users visit and leave, often too soon. And valuable referral opportunities -- for example, sidebar links to MDN, Uservoice, and Stackoverflow -- do not drive as many referrals as they might. The site design is not as effective as it could be at holding visitors’ attention and encouraging visitors to explore further.

Reach. Hacks is published in English only. This limits the Hacks audience and authors to people who read or write English. It also limits our ability to align Hacks posts strategically with global outreach efforts. We know a market for localized content exists because, in several countries, motivated Mozillians have created localized mirrors of Hacks. This is wonderful, but it causes another problem: The core maintainers of the Hacks Blog do not have insight into metrics for localized mirrors and do not manage the themes of those localized mirrors.

Key Performance Measures

A successful redesign addressing the above problems will:

  • Increase the number of Hacks visitors, measurable with Google Analytics
  • Increase the number of articles in other languages and sustain a rate of publication/localization, measurable through manual counts
  • Decrease and maintain a lower bounce rate, measurable with Google Analytics
  • Increase referrals to MDN, StackOverflow, and UserVoice from any permanent links to them, measurable with Google Analytics
  • Increase the number of authors and sustain an increased number, measurable through manual counts
  • Increase the ratio of unpaid (volunteer) to paid (Mozilla staff) authors, measurable through manual counts


The following stakeholders are likely to be involved in this effort:

  • Sponsor: Stormy Peters
  • Hacks Blog Editor: Robert Nyman
  • Product Manager: Justin Crawford
  • Technical/UI consultants: MDN Team
  • Design team: Mozilla Creative Team
  • Implementation Team: TBD
  • Representatives from major user groups (authors, readers): TBD


Mozilla’s design team is rebranding Mozilla right now -- from logos all the way through styleguides. They won’t have bandwidth for designing a new Hacks Blog until early October.


The Hacks Blog would be a premier showcase for the new brand, which includes a new Mozilla logo that will be “of the web” -- generated by code, hackable, with thousands of variants that are derived from programmatic features (geolocation, page designs, URL). The creative team is excited to work on this, and furthermore speak in a Hacks post about the code logo. This could support a bigger launch, one that includes the new designs as well as the technical components of Mozilla’s new brand.

Knowing that the Hacks Blog could be one of the early launch properties will probably create a larger effort in Engagement to promote it. Designers working on the Hacks Blog will be enthusiastic about expressing the new brand through the new site design. There will be powerful promotional opportunities that justify the wait.


Designs: early November 2014 Functional prototypes: mid-late November Launch: mid-December