PivotGrid Redesign – Kendo UI
Overview
Kendo UI is a bundle of four JavaScript UI libraries built natively for jQuery, Angular, React and Vue. Each is built with consistent API and theming, so no matter what you choose, your UI will be modern, responsive, accessible and fast.
Project Type
Web
Company
Progress, UX Designer II, 2021
The Challenge
Kendo UI’s PivotGrid, once a powerful tool for data analysis, had grown outdated and overwhelming. The interface was cluttered, unintuitive, and overloaded with redundant elements. Users, many of whom were accustomed to the streamlined experience of MS Excel, struggled to extract insights efficiently. Friction was everywhere: a bulky always-visible settings panel, duplicative filter chips crowding the layout, and interaction patterns that assumed every user loved drag-and-drop chaos. Spoiler: they didn’t.
The legacy was deep. Expectations were higher. It was time for a redesign.
The Mission
Reimagine PivotGrid into a focused, flexible, and user-friendly powerhouse. My goals:
Create a customizable layout that mirrors the mental model of Excel-savvy users.
Reduce visual and cognitive overload through smart hierarchy and minimalist design.
Kill redundancy. Make every pixel earn its place.
Provide the freedom to tailor the tool for different data sets and workflows.
Discovery & Research
I kicked things off by auditing the current design and diving into competitor analysis. But the real gold came from interviews with reporting and analytics professionals, the power users who live and breathe pivot tables.
Watching them work gave me something specs never could: context.
Some needed to slice financial data in granular ways.
Others cared more about storytelling through summaries.
Everyone wanted control but not at the expense of clarity.
Key insight: Their workflows varied wildly, but all craved familiarity, focus, and flexibility.
The Kendo UI PivotGrid before the redesign.
Ideation & Design Strategy
My design strategy focused on two pillars:
Less noise, more signal – strip down the UI, declutter the layout, and remove duplicated interactions.
Context is queen – put configuration controls where they’re actually needed, not floating in irrelevant corners.
I sketched out new flows, designed low-fidelity wireframes to test concepts fast, and collaborated closely with engineers to align on feasibility.
Notable shifts:
The settings panel became collapsible—giving users breathing room when they needed it.
Filter chips inside the table? Gone. Instead, customization moved to the panel, where it belonged.
Introduced typographic hierarchy and intuitive icons to help users orient quickly.
Created an updated design system spec to guide consistent styling and behavior.
Validation & Iteration
Initial wireframes were tested with real users from various technical backgrounds. The feedback was loud and clear:
The simplified layout felt more familiar and far easier to navigate.
Users appreciated the ability to focus solely on data, without configuration tools getting in the way.
Contextual grouping of controls (especially external resources) significantly boosted comprehension.
I refined the flowcharts, polished hi-fi designs, and worked cross-functionally with devs to build it out piece by piece.
Results
Usability improved dramatically, with testers completing configuration tasks ~30% faster.
Internal feedback from product and support teams noted fewer user complaints post-release.
The redesign laid a foundation for scalability, performance improvements, and cross-framework parity.
Lessons Learned
Over-engineering is not the same as power. Simplicity wins, even in data-heavy components.
You don’t need to reinvent what works. Borrowing mental models from tools users already love (like Excel) can boost adoption.
Real-world context is everything. Observing users in action gave me the confidence to challenge legacy patterns and push for bolder, cleaner solutions.