Re-design of PivotGrid (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

Project Brief

Kendo UI is a collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue. The PivotGrid component had a lot of legacy due to the fact that it inherited a lot of its layout and features from the PivotGrid present in Telerik UI for Ajax. Due to a lot of user feedback a redesign for the component was needed.

The Problem

The settings panel was visible at all times - taking away space and user’s attention. Its inner structure was not intuitive to use, too, and it depended heavily on dragging. The table itself used the settings chips once again, thus the same information and functionality was present two times. These chips were also a problem because in some cases they could scale up the height of their containers resulting in poor use of space again. Many users are used to the MS Excel experience and find it difficult to use Kendo UI’s PivotGrid.

The Goal

Developing a new layout for the settings panel, close to MS Excel’s one and finding a way to show and hide it. Getting rid of the chips in the actual table and leaving customization in the settings panel. Introducing typography to establish a visual hierarchy and guide the user. Achieve a minimalist look and feel of an overwhelming component.

Responsibilities
User flow mapping, wireframing (low fidelity and high fidelity) and visual design

Tools
Adobe XD, MockFlow

The Process

My process is determined by many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for solving this problem.

Discover

Understanding the core of the product

Before doing any ideation I started to analyze the existing design to understand the core of the product. Competitor analysis and research on legacy of previously made decisions (as the component had been created already) were a big part of the discovery stage. The most beneficial part for me were the user interviews I performed with reporting and statistics specialists who are using pivot tables in their everyday work. These interviews helped me understand their pain points and I had the chance to see them use pivot tables realtime which helped me gather in-depth user scenarios. The biggest take-away was that the method of usage was dependent on the type of data they’re working with. As Kendo UI is a component vendor, the number one priority was to make the PivotGrid highly customizable and able to fit different needs.

Key Findings

• Overall overwhelmed users

• Users expecting a MS Excel-like experience and getting confused

• Different expectations and different user scenarios depending on the data

Initial Proposal

Proposed a design simplifying the experience and leaving the focus on the data:

• Design principles: clean, minimalistic but with good visual hierarchy

• Settings panel redesigned and with a show/hide option

• Getting rid of duplicated functionality and information.

Ideation

Sketching and Wireframes

The process started with me sketching the main screens to detail out the flow and to discuss and share them with team members to get feedback.

Design

Laying the foundation and crafting a holistic look and feel. This is a little part of the style guide for Kendo UI’s default theme that is relevant to the PivotGrid and it contains colors, typography, and icons.

General Flowchart - User Flows 

Before going into user interface design, I made sure to polish the features and user interaction flow. The following feature flowcharts describe user flow through the component, listing potential features users may interact with. The creation of flowcharts are the basis for refining the workload necessary for developers and higher-fidelity designs later on, and for discovering potential issues behind the product in a quick and time-efficient way. 

UI Screens

Lessons learnt

• Less is more.

• Deep understanding of the user, their problems and then coming up with a design that solves it is always the most important thing.

• Even the most complex and maths-based user scenarios are less overwhelming when you simplify them and section them into smaller but meaningful parts.