Redesigning Bugzilla – Contest

Bugzilla

A coworker sent me a link suggesting that I enter Bugzilla:Pretty contest to build up my portfolio. Naturally, I was curious so I investigated their rules and requirements. I was hoping to get my hands on improving the usability aspects, but it turned out that wasn’t the main focus. As the guideline stated, most of the usability has already been addressed. There were specific rules that needed to be abided by, particularly on these 3 points:

  • You must preserve all of the functionality of the current bug view page. Mostly, this means that you can’t remove any field or link from the current image above.
  • You may move anything on the page around to anywhere, including hiding things (though be wary of adding extra clicks to the page).
  • This is not a usability contest, only a contest for how nice the resulting user interface looks. We have already done heavy usability work on Bugzilla–you are certainly welcome to improve visual usability aspects, but remember that other significant usability changes should happen as part of a separate project, not here.
  • To see the rest of the rules, visit Bugzilla. Basically, it was a contest to re-design the look and feel of their existing application. At the time, I didn’t know much about Bugzilla or how well known they were among the community. So I discarded it for a short period of time.

Quest for Improvements

As the time went on, I realized that I needed to add another UI project to have my portfolio completed. I remembered the contest earlier and decided to give it a chance. After reviewing the information, I was provided with a couple of static images that I had to work from. I studied and questioned every usability aspect based on the images alone. I couldn’t see how their functionality would behave so I looked around to see if there were live applications to test out. I found the latest version of bugzilla application that is currently working. I began to realize how robust their application was and saw the need to test my abilities. I felt confident to enter the contest even though I only had limited time to spend on it.

User Interface/Usability

The opportunities were not only improve the interface design, but to enhance user experience. Once I completed my analysis, I dived in, sketched out ideas, fired up Photoshop and laid down the framework. Below are some of the things that came to mind during the process:

  • Who are the User groups
  • Requirements – can and can’t do’s
  • Identify the problems
  • Determine the level of value for each functionality/components
  • Readability such as: Organization, Placements, Visual representation, Visual hierarchy, Patterns, Labels and Form consistent
  • Common use case scenario
  • Original vs New Design
  • Homepage Design

ORIGINAL: The first thing I noticed was the navigation menu being cluttered and visually unappealing. The whole section was practically all over the place. A lot of it were filled with redundant links, inconsistent behavior, and no visual hierarchy. Every link seemed to be fighting for attention. The next question I had was what was the focus of the application? The 3 items at the center of the page carried some emphasis on what could be done. File a bug, search bug and user preference. I understood the first two points which served the purpose of its application. However, I didn’t understand why “User preferences” deserved the same attention. The last thing was the brand… It didn’t convey much about who or the kind of characteristic that bugzilla portrayed.

Bugzilla Original

NEW: The new design was to achieve a fresh and bold new look, with a much cleaner layout and improve overall brand. I eliminated a lot of redundant links, separated and repositioned the primary and secondary menus. The design change puts much emphasis on the core functionality which was to either “File a bug” or “Search bug”. The attempt was to reduce the thought process and improve brand recognition on what the application was all about. It was also designed to be flexible and versatile which Bugzilla could easily scale and customize their own colors and logo without losing the design integrity.

Bugzilla New

Ticket Page Design

ORIGINAL: The biggest problem I saw was lack of visual hierarchy. It was difficult to understand where, what and how functionality worked. For instance, I mistook the underlined text for a link when in fact behaved as a tooltip. Overall, the application was extremely complex which made it difficult to read.

Bugzilla Ticket Original

NEW: The goal was to simplify, organize and establish visual hierarchy. I managed to separate key components and organized the information based on frequent usage or the level of importance. And, since it’s in a group, I was able to easily rearrange the section according to Bugzilla’s preference.

Bugzilla Ticket New

Contest Result

How did I do? The result came in not too long ago. Unfortunately, I was the first runner-up. However, they did say they may end up incorporating some of my UI concepts into their final design. I’m looking forward to see how Bugzilla turns out. Even though I didn’t win, it’s a great feeling to contribute something to the community. I want to thank Bugzilla for the opportunity to enter contest. I appreciated their kind words. However, it would be nice to see all the discussions behind the closed door. I welcome criticism and see it as a valuable tool in improving myself. If Bugzilla were ever to ask for help on UI or coding, I’d be gladly to help. Thanks again Bugzilla.

One response to “Redesigning Bugzilla – Contest”

  1. I have been looking for a skin for Bugzilla for quite some time now. I just saw an old link to your blog design on their site and I was blown away by what you did to it. I can’t wait for them to incorporate your design into their much needed UI update. Thanks for participating in the contest.

Leave a Reply

Your email address will not be published. Required fields are marked *