Filters for Comments
for Workfront web app
New filters for comments list designed with enterprise customers in mind.
My role
Team
Company
Year
UX and UI Design
Research and User Testing
Product Manager
2 Fronted Developers
2 Backend Developers
QA Specialist
Designer
Workfront
2018
Project Overview
The Product
Workfront provides an Operational System of Records - advanced work management platform for enterprise customers. Online application dedicated for reviewing and approving digital content is an important part of the system. Thanks to this tool users can collaborate and go through review process.
The Problem
Users struggle to find comments matching certain criteria as: author, action, flag etc. List of comments is usually very long and it takes a lot of time to go thought it. It is challenging to find information in threads and it is currently impossible to filter replies. Users claim that experience is too messy and counterproductive.
The Solution
Create a complex but easy-to-use way of filtering comments. New solution should be designed with enterprise customers' needs in mind. They need multiple filtering options optimised for big number of users and custom flags.
Understand
Who is this solution for?
Comment list is a basic experience in the application. It is browsed by all the users - from beginners and guests to advanced users and system administrators.
Beginners and guests
It is important to not overwhelm those users with multiple options when it comes to filtering. They should be able to use just one or two simple criteria without analysing all the available options. Filters should be designed with progressive disclosure in mind.
Advanced users
They need multiple categories of filters applicable at the same time. For example, it should be possible to see replies from one person which have two flags assigned. Editing filters without losing previous settings is important as well.
Design challenges
Make it intuitive for everyone
Both beginners and advanced users should be able to find all the criteria they need.
Give right amount of information at the right time
Do no overwhelm beginners but enable agile workflow for power users.
Inform clearly when and which filters are applied
Interface should give visual feedback to indicate that user is not viewing the whole list but only filtered comments. It is important as research shows that filters should be saved and applied when reopening the document and between different proofs.
Design principles
Lead with why
Be bold and innovative
Think enterprise
Keep it simple
Design
Panel structure
1st Proposition
Filtering panel is made of three sections: ‘Authors’, ‘Actions’ and ‘General’. Taking into consideartion that filters placed in the third section are being used most frequently, I decided to collapse first two sections. This layout guides users to the most important place and creates clear hierarchy on the screen.
Assumptions
- ‘General’ filters are used most often
- ‘People’ and ‘Actions’ are secondary
- Usually only one filter is needed at a time
Considerations
- Users may omit collapsed sections
- It requires many clicks to choose author or action
2nd Proposition
All sections are open and ready-to-use. Users can see what they can choose from. When reentering the filters panel, it is clearly visible which options are applied.
Assumptions
- Users prefer to see all options when entering the panel
- Hierarchy is strong and user can easily scan the screen
Considerations
Busy interface may be too difficult to scan for users and make process
time-consuming.


Decision
We decided to choose second proposition. We took a step back and analysed other situations when we had to choose between simple interface with hidden options and open but busy experience. Overwhelming majority of our users were choosing to see
all options available. Research conducted later for the whole comment section showed that we made the right decision.

Choosing Authors
Assumptions
- Users have a lot of contacts on the list
- They usually choose only 1-3 people
After opening the dropdown users see all the contacts on the list. They can use search functionality or choose people manually.
1st Proposition
When the name is chosen it disappears from the list and transforms into pill on the top of the dropdown.

Pros
- It is a standard behaviour of the list-pills module
- List gets shorter and name is mentioned in only one place
Cons
When user scrolls through the list she has to refer to pills to find out whether someone is already chosen or this person is not on the list at all and should be invited to the proof.
2nd Proposition
Chosen name is indicated both by check mark on the list and by pill above it.

Pros
- User clearly sees chosen person both in pills and on the list
- No confusion between already chosen names and those which are not on the list at all
Cons
It may be misleading that the same name appears on two lists.
Decision
We decided to choose second proposition. It is more user-friendly and leaves no doubt. Also, following ‘think enterprise' rule, we have to avoid unclear communication regarding access rights. It should be clear which users are not on the list on purpose, as they don’t have access to the proof, and which are already added to filters.

Checkboxes are disabled, until user chooses first person from the list, to avoid confusion regarding whether all contacts are available on the list or they are limited to authors of comments / replies.

For the most popular use case - choosing 1-3 people - pills look tidy and elegant.

When user chooses extremely high amount of people from the list we provide two independed scrollbars - for list of contacts and for pills.
Indicators
Assumptions
Users apply the same filters when entering the same proof - for example: they always look for insights from the same decisive person, search for unresolved issues or would like to see only new comments.
It is important to inform users that they are viewing limited amount of comments as filters are applied. We would like to avoid confusion and misunderstanding. I came up with two types of indicators:
Different icon states
Filter icon changes to indicate whether or not some filters are applied. Indicator is contextual and subtle.

Contextual notification
When user reenters the proof notification shows that some filters are already applied in order to let her know that some comments are not being displayed.

Contextual notification
Lessons learned and future iterations
Filtering turned out more complex than we were assuming at the beginning. Taking into consideration enterprise character of the tool and amount of functionalities it offers, every functionality must be able to serve all the use cases. It sometimes makes interface busy and complicated.
In future iterations, concept of applying two separate solutions for beginners and advanced users should be revisited.