Case study

Quickbase Report Builder

Quickbase is a no/low-code platform that allows users to build complex enterprise applications for their projects and workflows. The Quickbase report builder is an essential and powerful part of the platform allows users to build and customize views of their data to help them get insights that they need.

Timeline

2 years (intermittently)

Role

Senior Visual Designer

Quickbase Report Builder

Background

In Quickbase, users have data in tables within their app. To build a report in Quickbase and view their data in different ways (as kanban boards, charts, etc.), they currently have to navigate to a separate page to change settings and then go back and preview what they have. We received feedback that users were going back and forth between pages 1 out of every 4 times that they access the report builder, which made for a very clunky experience.

How can we keep users in context of their work while maintaining the power of the current builder and improving usability? The team settled on using a panel to accomplish this.

The scope of the project was kept narrow: keep the capabilities of the current builder, but move them into the panel so that we could build and test as needed. We started designing the report builder based on our kanban reports, which are complex enough to have most of the settings that other reports do.

Quickbase Report Builder research
NoI tested a dropdown-style navigation on the left—with an emphasis on making the dropdown as obvious as possible—and a tab-style on the right.

Research setup

One thing that we struggled with was how to display all the different settings that the panel contained, how to navigate through them, and if users preferred seeing their changes live or when they clicked “Save” or “Preview”. I refined two design variations and ran usability studies with Quickbase users to see what worked.

The study involved running ten users through the same tasks with two different designs and we used the single ease question (SEQ) and user comments to compare the designs.

Research results

I think at first it was a little confusing on what exactly each of the icons mean. But I think if I were very familiar with it and using it all the time, I think the tabs would be faster to use.

Quote from a usability study participant

From my research, I found that the dropdown navigation was not discoverable enough, with so many page elements and not enough affordance to let users know that the heading contained a menu once clicked. The tabs tested better because all the sections were laid out, but there were still issues with knowing what icons meant and fitting more sections and tabs in if needed.

Users were evenly split on whether they wanted to instantly preview changes or click “Save” or “Preview”, so we opted to force users to select those options before being able to see changes for performance reasons.

Quickbase Report Builder design progression
NoI gradually refined the tab bar given constraints such as keeping icons visually centered, making sure that all tab states did not overlap with the resize handle, and trying to keep the tab bar as narrow as possible to maximize space for the user's content.

Team re‐organization and return

After the study concluded, our design team went through a re‐organization and the current interaction designer and I were moved to focus our efforts on other teams. The team kept exploring, building, and testing in my absence.

After a few months and more internal team changes, I was re‐assigned to the report builder project again. Another designer provided initial specs for the new tab system that the team built in time for our internal conference. However, there were other design considerations that needed refinement with the tab navigation:

Quickbase Report Builder filters
NoI had previously worked on the MVP state of our filters, but now had a chance to refine details such as bolding conditional text that helped make logic more legible.

Increased scope: redesigning the filtering experience

Another challenge was to re‐design and re‐build the filtering experience, which allows users to finetune their report based on logic that they define.

Filtering was one of the areas that got more difficult to use once the report settings moved into a panel rather than a full page.

Things that were done:

Quickbase Report Builder final

Results and current progress

I like being able to what I do like being able to edit the report and still see the report rather than bouncing back and forth between pages. Being able to see my reports, I can kind of think through, ‘Okay, this is what currently looks like this is what I want to create.’ I think that helps my mind connect some of those dots.

Quote from a usability study participant

Our team is still building and testing the latest designs, but the success metrics that we're looking at include:

Back to top