Iteration: Move Label lists to 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.

Users need to easily track what workflow state work items are in within their issue boards.

The current Add label list experience within boards is confusing.

• Label lists that have been added to the board are visible within the dropdown and can be unchecked. Unchecking a label within a dropdown removes the label in every other label dropdown within the product. In boards however- the label is unchecked but the label list within the board is not removed.
• If a user selects Manage labels, they are navigated to another page and navigating back to the board in the current state is not easy or intuitive. We should first validate that users need to perform this action within the Add list experience itself, and if they do-improve this flow.
• A user can create a new label within the Add label list experience itself. This leads to a pattern within the dropdown not seen elsewhere in the product, and the form isn't standard either. The bigger problem here though is that after creating the label, it is not added as a label list until the user then navigates back to the prior dropdown layer to add it. We should first validate that users need to perform this label creation action within the Add list experience itself, and if they do-improve this flow.

Intended users

• Parker (Product Manager)

• Delaney (Development Team Lead)

• Sasha (Software Developer)

User experience goal

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

Proposal

• Move the Label option out of the Add list dropdown and into their own respective New list widget.
• 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

Artifacts

• 🎨 Figma specs: Click here

Label list	Mobile list

Documentation

Availability & Testing

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.