/
UX Spec: Integrated Boards MVP

UX Spec: Integrated Boards MVP

This feature will be available in Entry, Enterprise, and Enterprise Advanced.

Boards V2 would allow us to create our own Boards capability within the product, separate from the boards plugin.

Here’s the detailed UX spec for all Boards v2 MVP capabilities.

Figma Design Link

Permissions

The permissions that we would need as a bare minimum for the MVP would be the attributes for cards in the system console, and on the board itself.

System attributes

I propose we have two locked attributes, Status, and Assignee.

Locked means, you cannot rename or delete these properties.
You can only edit the status property values, which I show how to do below.

image-20260122-072309.png

 

Status attribute ASPIRATIONAL

Each board inherits the default status values from the system console status attribute, but boards can override these values individually.

Admins can add or remove values from the status attribute directly in the system console. When a user chooses to add or remove attribute values from this field, an "Edit statuses" modal will open.

There are two distinct concepts to understand:

  • Category Name — Immutable. Used internally by the system to track and group statuses.

  • Status Values — The values within a category that are displayed when selecting a status. These can be edited, removed, renamed, recolored, and more.

Each category must contain at least one status value.

image-20260122-072321.png

The user can have multiple values per each column, but all of them would communicate the column status to the system when we want to aggregate these.

The user would not be able to remove the default item in each column (as each column must have one value, but can change its color, or name).

This would allow us to do views like the Assigned to me view, and allow every board to have a different set of values, which is crucial if we want to have a global status attribute, otherwise people would start creating random status attributes to account for that.

Tab bar

Currently we have bookmarks in tabs, we want to allow users to add board tabs as well with different views.

A channel‑wide tab bar directly beneath the channel header that surfaces key views (Messages, optional Files), Boards, and quick bookmarks. Tabs overflow gracefully, are re‑orderable (admin‑controlled), and work on desktop and mobile.

image-20251008-162103.png

This is how a combination of bookmarks + boards will look.

image-20251105-182032.png

 

We can expand the manage bookmarks permissions in the system console to say manage tabs, and that would determine if someone can add a tab or not. Whether that’s a board, or a bookmark link.

 

Tabs are channel wide and public

Any tabs added to the channel can be seen by everyone as soon as they’re added (unless they’re hidden via overflow). The user would be able to reorder the visible tabs by dragging them horizontally in the bookmarks bar like the bookmark bar works right now.

The order is also channel wide and when a user changes a tab order, it gets updated for all other users.

 

Overflow

If there are too many items, then there will be an overflow and the user would be able to see the count of additional items in a “+2 more” option.

The user will not be able to drag items from inside of this list and reorder them to the tab bar. They can click on manage tabs to do that.

image-20260108-122054.png

Manage tabs ASPIRATIONAL

This is what the manage tabs screen would look like.

The user would be able to add other tabs from here, reorder tabs, and also rename/modify tabs.

I have intentionally left out the abiliy to delete tabs, as messages/files will not have the delete option, and deleting whole boards from here may not be something we want to promote.

image-20251008-163814.png

Add a tab

Clicking on add a tab opens up the same dropdown we had in the product without the manage tabs options.

Adding a link or a file would open up the bookmark modal allowing user to enter those details. Once the user enters it, the tab would be added to the bottom.

Clicking on any of the board options (Kanban and Table) would created an “Untitled Board” with that default view in that board.

We have only decided to work in support Kanban for now in the MVP

All of these get added to the end by default in this list, and we should also have that highlighted by scrolling this list to the bottom if there is an overflow due to an excess of items.

image-20251008-163945.png

 

Tab Max Width

Each tab has a max width of 140px, after which its name will truncate.

The full name will show with a tooltip if the name is truncated.

image-20260108-122117.png

Creating a board

Each board has a different dataset, and lives in isolation to the channel.

For this first iteration, we are not creating the separate isolated view to view the boards, and they will only be accessed via the channels they are included in.

When a person creates a new board, its created as an Untitled board with the view the user has selected as the default view, with a single untitled card.

The board name at the top of the board is the name that a user can change just by typing into it and tab name would represent that.

Empty State

Here’s what the board will look like when content is loading.

Here’s a Figma make with a demo of how it can actually look.

https://reply-plain-99826775.figma.site/

image-20260119-123059.png
image-20260108-125351.png

Board settings

Here are the settings each board will have. This would allow a person to switch the grouping, which is status by default, the layout, and which attributes to show visually on the card.

image-20260122-073048.png
image-20260122-072906.png

 

image-20260115-080606.png

The user can also add filters.

Board Filters

After a usr clicks on Filter, a filter dropdown would appear.

This dropdown doesn’t appear by default when no filters are set to save real estate.

image-20260115-080444.png
image-20260115-080452.png

 

The user can select any attributes.

The options for select/multiselect, assign would be:

  • is

  • is not

The options for text/number attributes would be:

  • is, is not, contains, does not contain

 

Views

We need to allow multiple views per board, even if we have a single view type (“board”) for now, the user would still be able to create them.

Example below: By Status or by Assignee

Status is grouped by the status property, while Assignee is grouped by the Assignee property

Each can have its own filters, or settings.

image-20260126-161513.png

 

Creating a card

Clicking on add card creates a new card and opens it up in the RHS with the title focused.

image-20260203-203352.png

 

Cards RHS

The user can open up a card and modify its attributes in the RHS.

image-20260122-082850.png

ASPIRATIONAL

Ideally if we can, it would be nice to have the description field like Notion/Jira where images can appear inline. See competitors here.

Any images added can be dropped directly to the on to the editor and added in between text.

That image also gets added to the attachments section as a reference.

The replies and the attachment sections can be collapsed too.

image-20260122-080536.png

Card Attributes

On hover, a user would get the hover state with a drag handle, dragging anywhere on the attribute would allow users to drag attributes.

image-20260125-091556.png

Reordering property values

When a user opens the values dropdown, there will be a default drag handler on the side of the values allowing users to reorder them.

image-20260125-163201.png

Value options

A person can add value options just by typing into the input, and also update existing ones.

To update existing ones, they can hover over it, and use the […] icon.

And if a person types in a new option, we can show an option to create it and it adds it to the list at the bottom.

image-20260125-163235.png

 

 

Card States

Card can be in the default state, hover state and active state, if its open.

image-20260122-074810.png

 

Board Search

This is simple, we search for the titles of the cards to see any matches and just filter them. No special modification in terms of style. Just got to show the search bar on click of the search icon and focus it.

image-20260122-084536.png

 

 

Board Options

This options menu would open when you right click on the tab, or click on it when its active.

Here are some of the options you have for a board or tab.

image-20260108-140056.png

We can have similar options for view as well, like:

  • Copy link

  • Rename

    • Multiple board can be of the same names (the url will vary, similar to channels).

  • Duplicate

  • Delete

 

Channel Switcher ASPIRATIONAL

We would allow users to go to boards in channels using the channel switcher and also display them in the recent tab.

image-20260202-190345.png

 

Notifications for cards ASPIRATIONAL

Notifications for cards should behave pretty much exactly like posts with these exceptions:

  • If you are following the card.

    • Notify me about

      Status changes
      Comments
      All property values

  • If someone assigns you a card, you automatically follow it.

    • And you should get a notification about you being assigned that card directly in the thread as a system message only visible to you.

    • Or message by the bot.

We may need to have notification settings for boards.

 

Link Previews

A person can also copy a link to a card (or multiple cards) and post them within channels, and a link preview would show up.

Only 1 link preview would show up even if multiple links are attached

And a link preview would show up in the channel.

image-20260324-182705.png

The comments made on this post, are not made to the card, rather to the post.

Reason: The link of the card is posted as an additional piece of information with the post, so it makes sense that the comment is attached to the post instead of the card. Additionally, the view for this would also be significantly different for the RHS, compared to our card RHS.

image-20260324-182655.png

 

 

Mobile UI

On mobile we’ll have the tabs as default for the bookmarks and the boards.

A user can switch by going through the tabs, and swipe left/right on the list.

image-20251124-182829.png

If you long press on the board tabs, you can also see the options for the boards.

image-20260122-072543.png

 

Additionally, if they click on the name of the channel, we show a small popover like this.

image-20260309-181337.png

 

If the user clicks on more info, we will open up the default channel info modal.

We will not show the tabs here, but if the user clicks on Manage tabs, they can go to manage them.

image-20251124-190337.png

Mobile Card UI

This is what the mobile card UI will look like.

Clicking on the description, or the title would allow users to edit the text inline.

image-20260113-154722.png

We can also support adding attachments if its easy in the MVP, otherwise remove it.

The adding/editing attachment experience should be exactly like how it is in posts right now.

If a person clicks on the attribute name, a menu like this opens up, allowing the user to change the attribute.

image-20260115-080255.png

 

Questions to ask

  1. Beta vs GA

  2. Status attribute directly in the MVP or after.

  3. Feature vs Target

    1. Groups of attributes

    2. Keep on using attribute groups

    3. And not have attributes defined at the global level (post level) on the frontend (right now)

      1. Rather on the group level