Summary
We aimed to make board navigation easier, and increase the discoverability of board views.
My role
Lead product designer
(UI/UX).
(UI/UX).
Key responsibilities
User research, visual design, prototyping & testing.
The problem ❤️🩹
Navigation issues and bad discoverability
monday’s boards are the core work surface of the platform, and where the main data of the different workflows is being stored. On top of the basic table view of the boards, users are able to add different board “views” that manipulate their data and show it in different visual ways, such as timeline, kanban, gantt and many more.
With the way monday’s board navigation used to work, these views very hidden inside a dropdown menu. This made the board views undiscoverable and hard to navigate in boards that have tons of views (which isn’t a rare case).
monday’s boards are the core work surface of the platform, and where the main data of the different workflows is being stored. On top of the basic table view of the boards, users are able to add different board “views” that manipulate their data and show it in different visual ways, such as timeline, kanban, gantt and many more.
With the way monday’s board navigation used to work, these views very hidden inside a dropdown menu. This made the board views undiscoverable and hard to navigate in boards that have tons of views (which isn’t a rare case).
User testing 👀Finding the right tab behavior
To address both discoverability and lack of clear access, we decided to show board views as tabs. Seems simple enough, right?
However, we quickly realized this would create a new issue: clutter in the board header. Boards with many views could end up with a messy and cluttered header, compared to the previous clean and tidy UI. Additionally, due to technical limitations we couldn't enable tab reordering, meaning that we wouldn’t help users to quickly access specific views.
Back to the drawing board, I proposed a solution: we’d only show pinned views as tabs.
I tested several versions on usertesting.com:
To address both discoverability and lack of clear access, we decided to show board views as tabs. Seems simple enough, right?
However, we quickly realized this would create a new issue: clutter in the board header. Boards with many views could end up with a messy and cluttered header, compared to the previous clean and tidy UI. Additionally, due to technical limitations we couldn't enable tab reordering, meaning that we wouldn’t help users to quickly access specific views.
Back to the drawing board, I proposed a solution: we’d only show pinned views as tabs.
I tested several versions on usertesting.com:
- With and without pin icons next to the pinned tabs
- Showing opened unpinned tabs as additional temporary tabs, or temporarily replacing the "All views" button
- Positioning the "All views" button pinned to the left versus the right side of the tab row
The winner 🥁“All views” menu button with tabs for pinned views
The winning tab version included an “All views” button with pinned views displayed as tabs beside it. Clicking the “All Views” button opened a dialog with a full list of views and an option to add new ones. Opening an unpinned view temporarily replaced the “All views” text with the name of that view.
The winning tab version included an “All views” button with pinned views displayed as tabs beside it. Clicking the “All Views” button opened a dialog with a full list of views and an option to add new ones. Opening an unpinned view temporarily replaced the “All views” text with the name of that view.
Finalfinal2 ✨Improved design for a better product clarity
The first version of the tabs increased the views discoverability, but there were two things to improve:
1. The pinning logic was confusing - users weren’t sure whether it’s a personal settings or affects the views of their whole team. Changing the title in the dialog to “My pinned views” didn’t seem to fully resolve the confusion.
Solution: We replaced the pinned tabs with a new “Add to my favorites” option , which is clearly personal and less confusing to users.
2. “Add view” button was too hidden - the creation of new views wasn’t increased after the first tab release. The “Add view” button stayed hidden inside the views dialog, which got opened less now that users had their favorite views pinned as tabs.
Solution: The “Add view” button was added to the tabs row, and is always visible.
The first version of the tabs increased the views discoverability, but there were two things to improve:
1. The pinning logic was confusing - users weren’t sure whether it’s a personal settings or affects the views of their whole team. Changing the title in the dialog to “My pinned views” didn’t seem to fully resolve the confusion.
Solution: We replaced the pinned tabs with a new “Add to my favorites” option , which is clearly personal and less confusing to users.
2. “Add view” button was too hidden - the creation of new views wasn’t increased after the first tab release. The “Add view” button stayed hidden inside the views dialog, which got opened less now that users had their favorite views pinned as tabs.
Solution: The “Add view” button was added to the tabs row, and is always visible.