Case study
Quickbase is a no/low-code platform that allows users to build complex enterprise applications for their projects and workflows. In late 2019, Quick Base acquired Cloudpipes (later renamed Pipelines). Pipelines allows Quickbase customers to automate tasks and workflows by connecting their Quickbase data to other cloud services.
6 months
Visual designer
To meet our six month launch window, the design needed to be completed within two. The accelerated design schedule let the engineering team focus on refining the technical side of the product and integrate the new platform into Quickbase. My role was to work with engineers to uplift Pipelines into the Quickbase design system, and create meaningful impact to the customer experience through improvements to the interaction and visual design.
It's hard to tell if a pipeline is working or not.
Quote from a usability study participant
Usability tests were conducted by our team, with participants recruited from an internal pool. As an observer on these sessions, I helped gather insights on usability issues that would be quick, easy "wins" for the Pipelines experience. To summarize, users found some of the visuals confusing, some of the interactions odd, and that the content could be refined. Further detail on how the findings affected the design can be read below.
My ideation process was brief due to our timeline, but they provided a visual reference when getting feedback from stakeholders to refine the designs and improve the content. Some of the changes included removing the marketing-focused content on the dashboard, refining how the search worked in the pipeline editor sidebar, and making it less confusing for users to add a pipe to their pipeline.
From a visual standpoint, the "My pipelines" page had the most layout changes of all the screens.
One key insight from our usability tests was that it took more time than it should for people to find the "Create a pipeline" when they had multiple pipelines. In the legacy version, that button would only appear below the user's pipelines. In the new version, I added a button at the top and kept the one at the bottom. The removal of other elements on the page made the buttons made this primary action more prominent.
The example pipelines carousel and welcome message on the sidebar at the top of the old dashboard were removed to move the users' pipelines and sidebar data higher on the page. This would eliminate visual distractions and allow users to go straight to their work quicker.
From our usability tests, we discovered that the pipeline cards were confusing and overwhelming to read. To reorganize the cards, the name, description, and channel icons were moved to the left to help users quickly identify the purpose of the pipeline. The right side of the card shows secondary information and actions that the users can take.
Removing the marketing-oriented content located at the top and decreasing the height of each card allowed more pipelines to fit within the browser window.
The editor is the primary working area that user would interact with and is where they build pipelines. Every part of the editor was touched on in order to match the visuals of Quick Base's more modern design system.
Some visual changes included changes to the icon to make it clearer what the action would be taken. For example, a trash can icon was used instead of a “X” icon to better communicate to users that clicking it would delete a pipe, which is a step within a pipeline.
Larger changes were made to the Channels sidebar on the right. In the previous Cloudpipes design, the search bar was constrained to only search within the tab you were on. Customer feedback and our usability tests indicated that this interaction was confusing to users. This was re-worked to search through all available channels regardless of the selected tab.
Other visual updates that I pushed for was the use of SVG icons for channel logo icons in order to have them maintain their sharpness at any size within Pipelines. This gave me a chance to update the logos for each channel and provide users a visual indicator that they would be more familiar with.
I designed a new settings feature for Quickbase that allows administrators to toggle channel availability for their users. The tabular view of each channel and setting allows the admins to scan the information easily.
I can't even take this...Pipelines, you are what I've been looking for all my life. I am almost out of breath here...
Quote from a Pipelines webinar attendee
Our introductory webinar to Pipelines in 2019 demonstrating the new look and functionality would be the most-attended webinar (688 people) in Quick Base history to-date—exciting a user base that was already fanatical about our product. The work is ongoing and the team and I continue to build on it. In the first month of use during the beta, 148 accounts were building with Pipelines and accumulated more than 129,000 step runs.
From 2021 to 2022, there was an 800% increase in usage load for Pipelines, with hundreds of millions of steps executed and dozens of millions of pipeline runs.
You've managed to turn one of our harder-to-work-with PMs into a trusting ally.
Quickbase design manager
Since 2019, the Pipelines team and I continue to make major changes and improvements to the dashboard (to see more data at a glance) and the builder (making it easier for new users to pick up) as its importance to Quickbase increases and user adoption.