Categories: General Visual Design

Style Refresh for addons.mozilla.org (AMO)

This article originally appeared on the AMO blog.

AMO is the central hub for developers to distribute their add-ons, and for users to discover them. It’s a workhorse of a site, serving as a publishing platform, online community, and marketplace where over 1 million add-ons are downloaded each month.

The current design has been in place since September 2011, with only minor design changes since. We’ve begun overhauling the entire site to modernize it and make it more reliable, but in the meantime we’ve done a quick visual refresh to bridge the gap until we finish the transformation.

The following design is scheduled to debut in Firefox 48, and will remain in place until the larger overhaul is complete:

Screenshot of the AMO Style Refresh 2016 - this new look will be coming soon

Screenshot of the AMO Style Refresh – coming soon

We started this project by tweaking the existing CSS using the Firefox Page Inspector. This is quite easy and got us visible results for every adjustment we made. Every change we liked was then recorded in a userstyle using Stylish. Adapting style-elements from the Firefox for iOS website, this resulted in AMO looking more modern within hours.

screenshot comparing AMO Style in 2011 and 2016

Comparison of AMO style in 2011 and January 2016

This is the first of many improvements that we will bring to the user experience of the add-on ecosystem. Many of them will take some time to be created and implemented, but they will all  have a strong focus on its users—both the developers of add-ons and the people using them.

For a preview of the new look, you can install this userstyle.

2 comments on “Style Refresh for addons.mozilla.org (AMO)”

  1. Michal Fridrich wrote on

    I don´t get where are all those improvements. From UX standpoint, it´s a mess. Search bar almost out of focus, pick of the month (really? month?) is absurdly huge and messy, left aside (featured, most popular) is cloned right next to it within main elements, extension cards are absolute no-tellers, huge list of categories just in plain text is unfriendly. I just simply don´t get it, sorry.

    1. Markus Jaritz Avatar photo wrote on

      Thank you for your feedback Michal. This update is intended to be a refresh of the style the page uses – to make it look more modern, while we are working on an exhaustive overhaul of the page. From your comments I see that you might have suggestions to improve the user experience. If so, please share with us. We are happy to integrate any ideas that improve the experience into the overhaul.