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 theAdd 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 theAdd list
experience itself, and if they do-improve this flow.
Intended users
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 respectiveNew 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 toCreate list
- Change name of the
- On click of the
Create list
button, theNew 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 theClosed
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, andAbby 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 theclosed
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
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.
Edited by Alexis Ginsberg