MathWorks Gecko
UX strategy and usability improvements for MathWorks bug tracking system

I helped the Gecko team develop a multi-release strategy for user experience improvements, and then designed several of the initial improvements.

Background

MathWorks' custom bug tracking and work management tool--lovingly nicknamed "Gecko"--is the heart of a suite of internal development tools used by 1500+ members of the MathWorks development organization. It is tightly integrated with the entire development lifecycle, particularly the build and test system.

The Challenge

Gecko is old enough to vote and urgently needed usability improvements. Replacing it wasn't an option; it was too tightly integrated with the rest of the development infrastructure. But major changes would be a huge effort, and might trigger resistance from long-tenured employees who had depended on Gecko for years.

Gecko comments before redesign

Bug details screen before usability projects

We needed a strategy to prioritize improvements and break them down into chunks that could be tackled incrementally. We also needed some quick wins to demonstrate the value of continuing improvements.

Developing the strategy

Working closely with the engineering department head, I did several rounds of contextual interviews to learn about user workflows and pains. We also analyzed enhancement requests, verbal feedback, and past usability test findings.

I also did heuristic evaluations of the app's navigation and search features, and analyzed several user-created Gecko "skins" to identify user pains and potential enhancements.

Data gathering turned out to be the easy part; the hard part was transforming this mountain of potential projects into something actionable!

List of pains to explore further

List of types of user pains to explore further, with plans (specifics blurred to protect IP)

I worked with the core strategy team (which included representatives from engineering, UX, engineering, and program management) to categorize the feedback and break it into manageable chunks. Finally, I ran an activity with the entire team to prioritize, estimate, and roughly roadmap the projects.

Group prioritization activity

The engineering manager and I also presented several times to our department's senior engineering management to keep them in the loop and gain support for the project.

Improved comments view

We found that one of the biggest sources of user pain was the commenting UI, which is one of the most frequently used features of Gecko.

Original commenting UI

At different phases in the lifecycle users needed to enter comments in 3 separate fields (comments, solution, qualification activities). Each were sorted in reverse-chronological order, and all of the previous comments were included in the text entry field.

The sort order helped users quickly read the most recent comment, but made it hard to review a comment thread from start to finish. Comments entered in the 3 separate fields were often related to each other, but users had to scroll up and down to read them in the corect order. And new users had trouble figuring out how to enter comments correctly.

We addressed this by creating a new unified "conversations" view, which included interleaved data from all 3 fields. We color-coded different types of comments to make them easy to distinguish, and added sorting and filtering options to help users find what they were looking for.

Mockup of final comments UI

Change log timeline view

Another "quick win" was to make it easier to trace the history of a record, e.g. see how long a given user owned a bug, or figure out when a specific source code change was last built. Originally the only way to do this was by visually parsing a long textual log:

Original text change log

Typical entry in the text change log

We did an initial round of paper prototyping and found that we were all converging on a timeline-style view showing the most important fields.

Sketch of timeline view

Collaborative sketch from paper prototyping session

After several rounds of iteration with a coded prototype, we ended up with an interactive timeline view that adapts to different screen sizes. Users can scroll back and forth on the timeline and zoom in/out to adjust the level of detail. Clicking on a bar shows the entire change record.

Our beta version handled navigation mostly through keyboard and mouse shortcuts, but usability testing showed that the keyboard shortcuts were hard to discover, so we added icons, tooltips, and an empty state for additional guidance.

Final mockup of change log timeline view

Final mockup of timeline