Summary
We improved the usability of the board’s core columns,
in order to make our users feel a sense of confidence as
they set up their board.
in order to make our users feel a sense of confidence as
they set up their board.
My role
Lead product designer
(UI/UX).
(UI/UX).
Key responsibilities
User research, visual design, prototyping & testing.
Goal
Make our core columns discoverable, easy to build & fun to use
Back when I was in the Board’s Core team, we initiated a project for improving the overall experience of the board’s core columns. We wanted them to be easy to find, easy to build, and delightful.
Our first step was to understand what are monday’s core columns, and what are their current issues.
After collecting data on column usage, we targeted the top 5 columns that are used in monday: Status (color), Date, Person, Text and Numbers.
Back when I was in the Board’s Core team, we initiated a project for improving the overall experience of the board’s core columns. We wanted them to be easy to find, easy to build, and delightful.
Our first step was to understand what are monday’s core columns, and what are their current issues.
After collecting data on column usage, we targeted the top 5 columns that are used in monday: Status (color), Date, Person, Text and Numbers.
Usability testingStatus & People columns had the most issues We tested the different column using unmoderated tests in usertesting.com. We targeted people who never used monday before, and asked them to create and edit the top 5 columns mentioned in the last section, in order to identify any usability issues.
#1Status column
The Status Column in monday.com is a feature that allows users to track the progress of tasks and projects. It uses color-coded labels to indicate the current state of an item, such as "Not Started," "In Progress," "Stuck," or "Done." This visual tool helps teams quickly understand the status of various tasks, enabling better project management and collaboration.
The usability tests that we conducted revealed really bad usability issues with the Status column. Below is a clip of a tester, whose seemingly simple task was to create a new status label and change its color. This was physically painful for our team to watch:
The Status Column in monday.com is a feature that allows users to track the progress of tasks and projects. It uses color-coded labels to indicate the current state of an item, such as "Not Started," "In Progress," "Stuck," or "Done." This visual tool helps teams quickly understand the status of various tasks, enabling better project management and collaboration.
The usability tests that we conducted revealed really bad usability issues with the Status column. Below is a clip of a tester, whose seemingly simple task was to create a new status label and change its color. This was physically painful for our team to watch:
Another issue we identified was around the status column’s default label. When a new Status column is created, it comes with 3 pre-defined labels (working on it, done and stuck), and a 4th default label which is shown in the column when no status label has been selected. This default label was created with the default text, saying “Add label”, which was meant to call for the user to modify the label.
In our test, almost half of the testers clicked on this default label when asked to create a new label.
In our test, almost half of the testers clicked on this default label when asked to create a new label.
New designNew status column dialog - 100% success 🎉
After knowing which problems needed to be targeted, I redesigned the status column dialog in order to improve its usability, and also to make it look more modern and sleek. Testing this design with the same script that was used in the first, proved that this design has solved all the issues that were flagged before.
After knowing which problems needed to be targeted, I redesigned the status column dialog in order to improve its usability, and also to make it look more modern and sleek. Testing this design with the same script that was used in the first, proved that this design has solved all the issues that were flagged before.
Mobile experienceUsability and UI issues were found in the mobile app as well
Given that the status column is monday’s most frequently used column, it was crucial to address usability issues and UI flaws in the mobile app as well.
Previously, the status column on mobile behaved in an unintuitive manner: tapping on a status cell would trigger a dropdown component, a design more suited to desktops. This unfamiliar interaction made it difficult for users to navigate, as many didn't realize they could scroll within the dialog to see more labels. Additionally, long label names were truncated and unreadable. The redesign aimed to resolve these issues by creating a more mobile-friendly experience.
Given that the status column is monday’s most frequently used column, it was crucial to address usability issues and UI flaws in the mobile app as well.
Previously, the status column on mobile behaved in an unintuitive manner: tapping on a status cell would trigger a dropdown component, a design more suited to desktops. This unfamiliar interaction made it difficult for users to navigate, as many didn't realize they could scroll within the dialog to see more labels. Additionally, long label names were truncated and unreadable. The redesign aimed to resolve these issues by creating a more mobile-friendly experience.
Moreover, editing the labels was very cumbersome and not user friendly, in the gif below you can see how difficult it was to create a new status label. Users needed to manually drag their desired new label color all the way up:
New designSticking to mobile design best practices
The old design aimed to replicate the desktop app's status column behavior, which didn't translate well to mobile use. The new design, however, aligns with mobile user expectations. Instead of displaying status labels in a dropdown dialog over the board, tapping on the status column now opens a bottom drawer. Long label names could now be easily read, thanks to increased horizontal space and the room to expand the label's height to display its full name.
The old design aimed to replicate the desktop app's status column behavior, which didn't translate well to mobile use. The new design, however, aligns with mobile user expectations. Instead of displaying status labels in a dropdown dialog over the board, tapping on the status column now opens a bottom drawer. Long label names could now be easily read, thanks to increased horizontal space and the room to expand the label's height to display its full name.
Editing the label’s color got much easier as well, with no need to drag a new color miles up in order to edit a label’s color or have a new status label made:
Usability testingThe new mobile design was a 100% success!
In a usability test, 10 users who have never used monday.com before were asked to compelte 2 tasks:
1. Find out what is the full label name of a status label that was truncated on the board view
2. Replace that status with another one that’s far down the label list, to see if they would intuitively know to scroll in order to find it.
In a usability test, 10 users who have never used monday.com before were asked to compelte 2 tasks:
1. Find out what is the full label name of a status label that was truncated on the board view
2. Replace that status with another one that’s far down the label list, to see if they would intuitively know to scroll in order to find it.
Test results: 10/10 users easily found the full label’s name and scrolled down to find the requested label.
#2
Person column
The People Column in monday.com is used to assign team members to specific tasks or projects. It allows users to see at a glance who is responsible for what, allowing better collaboration and accountability within a team.
After conducting usability research, the issues with the old design were very clear:
- Why are there only 3 people shown in the people picker (instead of the full account member’s list), and why are these specific 3 people shown to me?
- Unlcear that multiple people can be added at once
- Missing additional information and context about the people
- Lack of messaging when user can’t assign people due to permission related issues
The People Column in monday.com is used to assign team members to specific tasks or projects. It allows users to see at a glance who is responsible for what, allowing better collaboration and accountability within a team.
After conducting usability research, the issues with the old design were very clear:
- Why are there only 3 people shown in the people picker (instead of the full account member’s list), and why are these specific 3 people shown to me?
- Unlcear that multiple people can be added at once
- Missing additional information and context about the people
- Lack of messaging when user can’t assign people due to permission related issues
New designTargeting main ui/ux issues Knowing the user’s main pain points, it was easy to design a new People column dialog that would use convential UX patterns and help users understand what they can or cannot do with a clearer messaging and microcopy.