Refining content hierarchy and visual density

2023

Parabol

Parabol is an agile meeting platform where teams can run Retrospectives, Standups, Check-ins and Sprint Poker meetings. When I joined the team I made it my task to identify, document and lead improvements to key areas of the app where I considered our UX was not meeting quality and user expectations.

The Meetings view

The main view of the platform's dashboard is the Meetings view. This is where users can find all the open and current meetings their teams are running. As engagement within a team or company grows, the number of meetings a user can see in their dashboard will most likely grow as well. When this happens, the Meetings view can feel overwhelming and difficult to parse.

This issue was reflected in the feedback we would hear from highly engaged users, and upon inspection, it's easy to identify the meeting card component as the main culprit of this issue.

Parabol's Meetings view, before the refinements.

Hierarchy and density

If we take a closer look, we can quickly identify possible refinements to the component when it comes to content hierarchy and visual density:

The meeting type (Retrospective, Standup, Sprint Poker, Check-in) is set at a very small font size, making it hard to read.
The meeting title, arguably the most important piece of information on the card, has a very small surface area compared to other elements of the card.
The team to which this meeting belongs to, and the meeting's current stage, is set in a color with very low contrast and relegated to the bottom of the hierarchy levels.
While the illustration serves to identify the meeting type, it takes too much space in the card's surface, and when presented with multiple meetings in the view, overwhelms with unnecessary repetition and density.

When teammates are currently present in a meeting, the user sees their avatars at the bottom of the card, indicating team activity. This is an important piece of information, but implemented in a way that introduces varying card heights which create an uneven visual grid. This issue is also present when a meeting title is longer than one line.

Refining the card component

I set out to work on updates to our card component that addressed the issues of content hierarchy, visual density in the Meetings view, and the uneven grid caused by the varying card heights.

When a user is looking for a meeting in the Meetings view, the information they look up for first is:

Meeting title and/or meeting type
Team
Meeting phase

Another important consideration is that the meeting type illustration is a great cue for quickly identifying the meeting type, but it can also be useless when all the meetings in the Meetings view are of the same type ("My team only runs retros").

And finally, the team activity is a great signal for those users joining just in time and who quickly need to identify where their team members are.

Layout and hierarchy explorations

In light of my analysis above, I started to explore alternatives to the card layout that addressed the issues I identified, making sure that the new layout supported edge cases such as long meeting titles, long team names, and lots of team members present; or even all those together at the same time.

After a few loops of iteration and feedback, I landed on a solution that addresses the issues mentioned above. This new layout achieves a great balance between information hierarchy and visual density, and fixes the uneven grid problem.

The meeting title is at the top of the hierarchy thanks to our type scale, and sits right on top of the team name. The meeting type and phase now have a bigger role in the hierarchy and are nicely paired with the meeting type illustration, which now takes up a more proportional surface area.

Putting it all together

When tested on the Meetings view, the new card component layout proved successful, as it made it easier for users to find the right meeting:

✌️

Enrique
Sánchez