Even with intense competition from tools integrated into other web browsers, Firebug is arguably still the leading web development tool in use, with nearly two million active daily users. Its web site needed to reflect Firebug’s capabilities more clearly. With that in mind, the primary goals with this redesign were to make the official Firebug web site easier to use, more pleasant to look at, and give Firebug more of a traditional software-style layout to highlight its many positive qualities.

GetFirebug.com: Before

GetFirebug.com: After

It’s a fairly straightforward design, so there’s not a lot of interesting production notes to highlight, but here’s some specifics on what went into this redesign:

• The layout is roughly based on the 960 grid system. The original hope was to do the site in a fully fluid layout, but time constrains intervened.
• Headers and pull text are in the gorgeous (and open source!) Tittillium, thanks to @font-face. The body text was originally set in Droid, but due to a legibility issue on Windows machines with text-smoothing disabled, it was switched to the more common Trebuchet MS.
• The pages are build using the HTML5 doctype, with JQuery and the Fancybox plugin powering the modal pop-ups.
• The screencast on the homepage uses the Video for Everybody system to embed the OGG video, with MP4 and Flash fallback for other user agents.
• The homepage blog feed pulls in from the Firebug weblog RSS feed using SimplePie.
• For this iteration, we wanted to switch the site over to a simple content management system, and ended up settling on Perch. It has its shortcomings, but it was straightforward enough and easy enough for me (mostly a designer/UX guy) to implement.
• Sean passed along a few images that inspired the sparkly new icon. Originally, we tossed around the idea of doing something cartoony and heroic, like this lil’ dude, but ultimately decided to go with a more, well, buggier bug.
• Photographic inspiration: Bug 1 • Bug 2 • Bug 3 • Bugs!

It’s been a long time coming, and we hope you like GetFirebug.com’s new set of clothes. The content is currently being updated and will roll out as it is completed, but in the meantime, please kick the tires and let us know what you think.

My personal goals with this redesign are to make working with crash data more efficient, and to make each screen as useful and as intuitive as possible. This project is an interesting challenge, however, as there are not a lot of publicly-available examples of crash reporting systems to use as a baseline.

“Home” page

Current page: http://crash-stats.mozilla.com/

Currently when you go to the Socorro home page you’re dumped right into search. This makes a lot of sense, but there could be a lot more useful data right up front. This wireframe tries to incorporate more of a “dashboard” approach with top crashers for release versions and other pertinent information.

Home page, default configuration

Home page with advanced filters visible

Some key changes in this wireframe:

1. Search is now called “Filter” as that’s really what you’re doing.
2. The filter options have been cleaned up a bit, and more specific filters are now grouped under Advanced and hidden by default.
3. The Advanced Filters toggle will remember if it was opened or closed, so if you regularly access any of these options they will be easily accessible.
4. There is a new “top crashers” widget that shows the top 3-5 reported crashes for current release versions.
5. The boxes underneath the filter / top crashers widget are for other chunks of data such as top crashers for development versions, mean time before failure, top URLs that cause crashes, etc.
6. The versions filter auto-fills with just the versions available for the selected product, to help keep the number of options down.
7. The “Mozilla Developers” button at the top right-hand corner opens a jump menu that lists all of the Mozilla developer web sites / tools. I think it’s kind of silly the various Mozilla developer sites aren’t linked together and this navigational tool addresses that deficiency.

Top Crashers

Current page: http://crash-stats.mozilla.com/topcrasher

At the moment the existing page is nothing more than a jumping point to link you to the various product versions. The redesigned wireframe tries to float up crash report information for more commonly used product versions while whittling the number of versions down to a more sensible number.

Individual Crash Signatures

Example: Crash reports in mozcrt19.dll@0x1838a

The redesign does away with the tabbed interface currently in use and brings everything onto one page for quicker access. The top left-hand box displays either the number of crashes by operating system (for release versions) or the number of crashes by build (for development versions).

Give us your comments, your feedback, your huddled criticism

As I mentioned these are quite preliminary and I’m very interested to hear your comments and whether you feel these wireframes are headed in the right direction.

Redesigning a tool such as Socorro is rather challenging as there aren’t many existing examples of good design in this area (or many publicly available examples at all for that matter). I also had to keep in mind that whatever is created needs to work for both Mozilla’s specific requirements as well as be generic enough to be adaptable by others, which makes this redesign even more tricky.

I spent quite a bit of time looking at similar or parallel systems such as network and web hosting dashboards to get some ideas for how this information could be displayed and these wireframes incorporate some of my discoveries.

Beefs, bouquets, comments, suggestions?