ANODA Discuss your product

A calmer bug tracker, just as dense

MantisHub is a hosted issue tracker on open-source MantisBT, for teams that fix bugs.We redesigned its busiest workflows, keeping the density.

MantisHub issue page: the issue Login fails on iOS 16.5 with its description, steps to reproduce, attachments and relationships, and the overview with tags, access, status, priority, severity, people and versions
52
screens in the redesigned workflows
3
people on the ANODA team
2
design phases the redesign, then change requests

MantisHub is a hosted, subscription issue tracker built on the open-source MantisBT, used by teams that report, fix and ship software every day. We did a targeted UI redesign of its busiest web workflows, as SaaS product design for four roles, with a design system for the redesigned scope .

What a day in MantisHub runs through

One chain, from a project to the last note on an issue:

  1. Projects

    • All projects
    • Status
    • Owner

  2. Issue list

    • Search
    • Columns
    • Group actions

  3. Filters

    • Saved
    • Custom
    • Applied criteria

  4. Issue

    • Overview
    • Attachments
    • Relationships

  5. Activity

    • Notes
    • History
    • Monitoring
Dense Calm
Every field experienced users rely on stays; spacing and hierarchy do the calming.
Familiar Modern
Selected workflows reworked; the rest of the platform left as its users know it.
Public Private
Access cues stay unmistakable on issues, in notes and in lists.

An issue list that reads in order

Found
The old View Issues page opened with a wall of filter fields above the table, and priority, status and severity were all the same small text.
Decided
Filters moved into one panel behind a button, the list got the page, and priority, status and assignee became things you spot: a coloured chip, a status dot, an avatar.
For the user
A developer or manager sees what’s urgent and whose it is before reading a single summary.
The earlier MantisHub View Issues page: a trial banner, a grid of about twenty filter fields, then the issue table with a single issue and export buttons
Before: View Issues in the MantisHub the client came with
In the way
Twenty filter fields above one issue, and the only colour on the page in the section headers.
Redesigned MantisHub issue list: the top bar with Create Issue and the project switcher, search, Filters, Saved filters, Sort by and Customize, a group action bar for the selected issues, and eight issues with priority chips, status dots, severity, assignees, dates and summaries
After: the redesigned issue list with three issues selected; the data is example data

  1. Find and shape

    The project switcher and Create Issue, then search, filters, saved filters, sorting and columns.

  2. Spot, then act

    Priority chips, status dots and avatars to scan; tick issues to copy, assign or close them at once.

  3. Move on

    Items per page and the pages.

How the work progressed

Research and a direction first, then wireframes and the interface, then a second phase of change requests before handoff.

  1. Discovery

    What other trackers do with dense issue data, and how calm MantisHub could look

    Artifact Competitor research across Jira, Asana, Redmine and Plan.io, Bugzilla, Trello and Monday, and moodboards

  2. Wireframes

    Where every field of an issue lives, before any colour

    Artifact Wireframes of the issue page, the issue list and the filters, in iterations

    First-pass wireframe of the issue page: the title, tags, description and attachments, and the overview beside them

  3. UI & Design System

    Which of three visual directions suits a dense tracker, and the parts it’s built from

    Artifact Three directions, the final interface for the redesigned workflows, a design system and a UI kit

    Three visual directions applied to the same issue page, differing in the menu, accent colour and layout of the overview

  4. Delivery

    What the developers needed to build it, and what the change requests refined

    Artifact Screen maps, a clickable prototype and handoff, then second-phase refinements of projects, filters, tables, relationships and notes

One path through an issue, and filters out of the way

Found
The old tracker put a full grid of filters above every list, and gave every part of an issue the same weight on the page.
Decided
The paths were wireframed first, over three passes: an issue became one page read from the description down to its activity, with the overview beside it, and the filters were grouped by what they filter.

  1. Reading an issue

    The last wireframe pass: back to the list, the project and ID, then description, steps, attachments and relationships, with the overview at the side.

    Open the full map
    Wireframe of an issue page: back to all issues, project and ID, the title, description, additional information, steps to reproduce, attachments with a website preview and relationships, and the overview with category, tags, access, status, priority, severity, people and versions

  2. Finding an issue

    In this pass the filters still sat above the list, grouped into tabs; the final design moved them into their own panel.

    Open the full map
    Wireframe of the issue list with filters grouped into Issue, Individuals, Date and Other tabs above it, with Save Filter and Clear, then the list of issues
The redesigned MantisHub side menu: My View, All projects, Issues, Change Log, Road Map, Summary and Manage, with Issues selected

The places, in the order people use them

Projects sit next to the issues they hold, and Create Issue and Invite Users stay in the top bar on every screen.

  • Information architecture
  • Workflow design
  • Screen maps
  • Clickable prototype

Five jobs, from a project to the last note

In the order a team meets them: find the project, narrow the list, report a new issue, connect it to others, talk it through. Every name and figure on these screens is example data.

Every project in one table

Found
A team runs many projects at once, and moving between them shouldn’t mean remembering which one is still active or who owns it.
Decided
An All projects table with category, status, owner, last update and summary; a row opens that project’s issues.
MantisHub All projects table: eight projects with category, status, assignee, last update and summary, and pagination

Filters that wait until they’re needed

Found
Saved, custom and active filters were powerful, but they filled the top of every list with fields and hid which ones were applied.
Decided
One Filters panel: fast filters for the usual cases, then issue, people, date and other criteria in tabs, each tab counting the criteria applied, with Clear and Save Filter below.
Filters panel on the Issue Filtering tab: fast filters Assigned to me and Due this week, priority set to High, Public and Show Sticky Issues switches, and selects for project, severity, category, resolution, status and hide status
Filters panel on the Date Filtering tab: four criteria applied under Issue Filtering and two under Individuals Filtering, and start and end dates for date submitted and last update

A new issue in one dialog

Found
A good bug report needs a dozen fields, and a long page of them invites half-filled reports.
Decided
Create Issue opens from any screen: the name and priority first, then due date, project, category, status, severity and assignee in one grid, then tags, summary, description and attachments.
Create Issue dialog: issue name and priority, due date, project, category, status, severity and assignee, then tags, summary, description, Add attachments, Cancel and Create Issue

Relationships you can read

Found
Duplicates, parents and related issues were a line of IDs, and each had to be opened to learn what it was.
Decided
A relationships table on the issue: the type, the ID, the project, the status with its colour and a short note, with Add more below.
Relationships table on an issue: related to, child of, duplicate of and parent of, each with its ID, project, status and note, and Add more

Notes and their history in one place

Found
Long issues collect notes, private remarks and field changes, and the thread gets hard to follow.
Decided
An Activity block with Notes and History tabs and newest first; each note shows its ID, a Private badge where it applies, mentions, attachments, time spent and its edit history.
Activity block on the Notes tab: the note field with Private note, Add attachments and Time spent, then two private notes with mentions, attachments, time spent and an expanded edit history

One set of parts for dense screens

Found
A calmer look can’t come from dropping the status colours, warnings and badges that dense tables depend on.
Decided
A design system and UI kit for the redesigned scope: chips for priority and tags, status dots, avatars, pickers and inline fields, each drawn once and reused.

One people picker, two jobs

The same list, with avatars and a check, mentions a teammate in a note and adds a watcher to an issue.

  • People picker open under the note field, with Lana Steiner checked, then Demi Wilkinson, Eduard Franz and Noah Pierre
    Notes: Mentioning a teammate.
  • The same people picker open from Monitoring in the issue overview, with Lana Steiner checked
    Monitoring: Adding someone who follows the issue.

Adding an attachment, step by step

An empty link field, a pasted link ready to add, and a file uploaded next to the rest.

  • Three states of the Attachments block: an empty Paste your link field with a disabled OK, a pasted link with OK enabled, and a new device-logs ZIP next to the report link and the screenshot
    Empty, pasted, uploaded

Where the product ended up

MantisHub’s busiest web workflows redesigned in a calmer look that keeps the density experienced users rely on: projects, the issue list and its filters, reporting, and the issue page with its relationships, attachments, notes, history and monitoring.

Delivered with screen maps, a clickable prototype, and a design system and UI kit for the redesigned scope, then refined through a second phase of change requests and handed to MantisHub’s developers.

screens
52
people on the ANODA team
3
design phases
2

In the client's words

The design direction focused on making the interface clearer while respecting familiar working patterns. We appreciated the attention to spacing, hierarchy and consistency, rather than introducing change for its own sake.

Victor Boctor MantisHub

5.0

Afraid a cleaner UI will cost your power users?

In MantisHub, the busiest issue workflows got a calmer look without losing the fields experienced users read at a glance. Bring us your densest screen, and we’ll show you what to calm down and what to keep.

Discuss your product Explore more case studies

What we brought to MantisHub

The product

The interface and the work