New Content Filters

Context

Kontent.ai is a headless CMS where large enterprise customers manage thousands — sometimes millions — of content items. Content is viewable in a customisable, sortable table with a search field and a left-side filter panel.

Over years of incremental development, multiple columns were added to the table. Large customers need most of those columns visible at once. Hiding columns doesn’t solve the problem because the data is genuinely useful.

On top of that:

• Around 10% of traffic comes from iPad
• A significant portion of users run the app side-by-side with other tools (recommended in the docs)
• The filter panel consumed significant screen real estate on the left
• Content item names were truncated — customers were vocal about it in ProductBoard feedback

Problem

The content inventory felt cramped. Users couldn’t see enough of their content at once, and the persistent filter panel was the biggest contributing factor.

The goals:

• Significantly improve available space for content viewing
• Users successfully locate and understand the new expandable filters
• Maintain or improve efficiency and accuracy of content selection

Process

I worked closely with the Product Manager on problem definition and goals, then moved through several stages:

1. Brainstorming — multiple solution directions explored internally
2. Developer consultation — early technical feasibility checks before investing in detailed design
3. Design review — fellow designers reviewed concepts to surface issues early
4. Prototype testing — remote usability testing on a Figma prototype

The standard design review process ran in parallel throughout.

Solutions explored

Discarded: popup from a button

The first direction was a standard popup/popover triggered by a filter button. It’s the conventional pattern and users would recognise it immediately.

The problem: the popup always obscured some content during the iterative filtering process. Users would open filters, make a selection, then need to close the popup to see what changed — then reopen it to refine. That back-and-forth negated the benefit.

Implemented: expandable horizontal filter panel

An unconventional approach — instead of a persistent left panel or a floating popup, the filter panel expands horizontally from the top of the table, above the content rows.

When collapsed, users see only a slim filter bar. When expanded, the filters appear in a row above the table. The table content is still visible below — users can see their initial results and scroll to see more while refining filters.

Key behaviours:

• Filters remain accessible without obscuring results
• Saved filters persist after collapsing the panel
• Visual indicator shows when filters are active

Usability testing

I ran remote prototype testing with 5 participants — handpicked from the research pool to match suitable personas (large-customer content editors and administrators).

Testing used a Figma prototype. I wrote the research script and conducted the sessions. Findings were processed in Condens.

Key findings:

• The new approach was perceived as better — users appreciated that content stayed visible
• A badge showing the number of active filters was confusing — it looked like a notification
• Saved filters should remain visible after collapsing the panel (not hidden until reopened)
• No second round of testing needed — issues were minor and the solution direction was validated

Design decisions based on findings

Removed: numeric badge on the filter button Added: highlighted text in the filter bar showing what’s currently filtered — clearer, less ambiguous

Ensured: saved filters remain visible when the panel is collapsed, so users can see their active filter set at a glance.

Outcome

The feature was scheduled for development. Post-ship evaluation strategy:

• Direct user feedback via email and support channels
• Tracking insights in Intercom and ProductBoard
• Possible follow-up usability testing or solution-focused interviews
• Measuring whether users perceive the inventory as more spacious
• Tracking ability to view content names without truncation