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.
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.
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.
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.
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.
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.