Designing for Experts: Bug Tracking Software Overhaul
Problem
How might we redesign a 20+ year old legacy product to integrate modern design, while improving task efficiency and ease of use?
Approach
I led the end-to-end design process, while working alongside a user researcher. After delivering final engineering-ready, pixel-perfect mockups, I was available to engineers during implementation.
Impact
Contract was extended for implementation support, though I rarely answered questions. Successfully delivered final designs on time.
Design Approach
Our client was in the process of updating the infrastructure of a 20+ year old internal product. They knew how to update the API and data structure overhaul, but needed my help on the user interface.
While this system was used primarily to track bugs, documentation from this system was required for every public product release.
I led the end-to-end design process, while working alongside a user researcher.
Client
Fortune 500 storage and data management company
Duration
4 months of research & design (Mar.- Jul. 2015)
3 months of implementation support (Sept.-Dec. 2015)
My Role
Lead Product Designer
Team
1 User Researcher, 1 Visual Designer (part time), 5 Engineers (client)
Dissecting the Existing Product
While my research counterpart aimed to understand the overall bug triage process, I participated in all but a few interviews and supported research analysis.
Meanwhile, I studied the purpose and usage of every field in the product, marking who used it, how often and the type of data it stored.
In a concurrent work stream, I conducted heuristic reviews of competitor issue tracking software such as Jira and Github. My goal was to identify modern UX trends and approaches to bring this product into the 21st-century.
Connecting Research & Design: Service Blueprint
My research colleague conducted 19 ethnographic-style interviews and received 325 internal survey responses. During analysis, we decided to create a service blueprint.
Why a service blueprint?
We wanted to document the company’s specific process/roles for fixing software bugs, not rely on general frameworks.
We wanted to show our client when key roles where involved and what their key tasks were.
We needed a simple way to present the process, so opted for a text-only version made in Google slides.
We wanted to help them understand how visual design alone would not solve pain points during the journey, paving the way for our design strategy.
New Conceptual Models & Navigation
With a greater understanding of the user journey and design principles in hand, I developed new conceptual models for three major areas of the product: the central dashboard, bug detail screen and query bugs screen.
Choosing A Navigation Philosophy
➊
The existing form was a single scrolling page.
Research showed content needed to be organized by the “job to be done” by a particular user type.
I proposed two solutions:
Keep a single page, but better delineate content regions
Create sub-pages tailored to the state of the bug
Late-Breaking Technical Challenges
While the team agreed to move forward with option 2 to “manage the mess”, we had to revisit a month later due to technical limitations around field versioning.
➋
I recommended sub-pages to reduce cognitive load, organize related jobs-to-be-done, and limit exposure to information not relevant to you.
Ultimately we had to pivot back to the option 1 and I modified it to handle newly-discovered technical requirements and incorporate anchor links for easy navigation.
Dynamic Prototyping in Axure
Because of complicated form dynamics and page relationships, I used Axure for low-fidelity concepts and implemented more complex logic for high-fidelity wireframes.
This enabled the client to test drive design suggestions and provide substantiative feedback that would be impossible without form logic.
Visual Design & Implementation
I consulted an in-house visual design team to finalize visual mockups and specifications.
I also provided UX support during the implementation phase, led by another outside development firm.