Move list options out of dropdown and into the ✨New list✨ widget

Problem to solve

When monitoring a team's work in flight, I need to be able to easily review and digest the current progress so that I can confidently report to stakeholders and leadership.

This current progress could include things like:

  • The health of issues in progress
  • The flow of issues from milestone <> iteration and/or iteration <> iteration
The current Add list experience in Issue Boards

With the addition of Health status and timeboxes like Iterations - users are requesting to apply these as column lists within their boards. Adding these in as tabs to the current experience could start pushing the bound of usability. How might we make this experience more flexible for future options?

Intended users

User experience goal

Users are able to quickly configure a board with lists that provide value to them and their team.

Proposal

  • Move the options Label Assignee and Milestone out of the Add list dropdown and into their own respective New list widgets. Add Iterations as a list type as well.

  • Health status and Epic are future scope.

  • See more information and resources about the larger experience in the epic.

🎥 Notes on the interactions here
  • User can add a new list/column from the header as is the current experience (small change, discoverable- future scope can be validating the add being to the right of the workflow)
    • Change name of the Add list button to Create list
  • On click of the Create list button, the New list:
    • The board scrolls to the end of the lists (to the right edge at the end).
    • The New list widget slides in from right to left and appear to the right of the Closed list or last list (at the end of the board).
    • The Create list button is now disabled with a tooltip on hover explaining that a user should finish adding their first list before trying to add another.
  • The default column/list type is Label, but the user can change the type from the list/column itself via the dropdown.
    • If the user changes the list type, the copy and content in the header and body of the widget is contextual to the type being added.
    • If the user adds some information into one list type, navigates to another list type, then back to the previous type- the information they entered is stored and available. Scenario: User adds Abby A to their assignee list and then switches to a label list. They then immediately switch back to assignee, and Abby A is still selected.
  • Once the required information is inputed, the Add button is enabled and the user can add the list to their board.
  • The user sees the column/list added to the board.
    • I would love us to display some styling of the list adding to the board. Maybe a flash of a blue focus state around the list fading in and out.
    • Optionally we could also add a toast here to further reenforce this.
  • If the user tries to navigate away from the board when the New list widget is open, a dialog appears asking them to confirm they want to navigate away without saving changes.
Classic board
  • The board scrolls horizontally. The New list widget can be scrolled away from.
Swimlanes board
  • The board scrolls horizontally and vertically, with swimlanes fixes. The New list widget appears to the right of the closed list and last swimlane. This will cause the swimlane titles to truncate to before this widget.
  • The user can still scroll horizontally and vertically but the New list widget is fixed to the right of the board and does not scroll away or scroll vertically.
General walkthrough

Create/Add list improvements walkthrough - Watch Video

Iterations

Artifacts

Label list Assignee list Milestone list
Iteration list Health status list Epic list
Mobile

What does success look like, and how can we measure that?

Users are using Boards to track their work items due to increased value to them. Boards have a certain threshold of lists on them. Let's track how often users click Create list and see if usage of Boards in general is increasing.

Edited by Gabe Weaver