### 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. | The current `Add list` experience in Issue Boards | | ------ | | <img src="/uploads/834e769a820651584dbb47950e44fe00/image.png" height="300"> | - 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? - How might we make it more apparent that a list has been added to the board? - How might we make it easier to create and add an item as a list within the same workflow? ### Intended users * [Parker (Product Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#parker-product-manager) * [Delaney (Development Team Lead)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#delaney-development-team-lead) ### User experience goal Users are able to quickly configure a board with lists that provide value to them and their team. - Users are able to add lists easily without anxiety because they will have visual confirmation of it being added to their board. - Users know where to go to manage their lists. - Users can access a usable list of list options. ### Resources - :play_pause: **Classic boards prototype:** [Click here](https://www.figma.com/proto/2QBP5WaSw13mwAKPvtIjCj/New-list-improvements?node-id=23%3A1661&viewport=688%2C703%2C0.06901489198207855&scaling=contain) - :play_pause: **Swimlanes prototype:** [Click here ](https://www.figma.com/proto/2QBP5WaSw13mwAKPvtIjCj/New-list-improvements?node-id=43%3A15945&viewport=447%2C407%2C0.06953929364681244&scaling=contain) - :art: **Figma file:** [Click here](https://www.figma.com/file/2QBP5WaSw13mwAKPvtIjCj/New-list-improvements?node-id=58%3A0) - :microscope: **Research in progress:** https://dovetailapp.com/projects/391b34d2-00ca-4af5-a369-e1cf10c0d77b/data/b/a53d8b18-b223-4590-a039-1d4ba86bd1ec ### Walkthrough <a href="https://www.loom.com/share/817edbe1d27649a0ac632601c71986d9"> <p>Create/Add list improvements walkthrough - Watch Video</p> <img style="max-width:300px;" src="https://cdn.loom.com/sessions/thumbnails/817edbe1d27649a0ac632601c71986d9-with-play.gif"> </a> ### Flows | General flow | | ------ | |  | | MVC Screen Flow | | ------ | | | ### Interactions - 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 | List types / New list widget | | ------ | | | | Mobile | | ------ | | |