Overview

The ‘Run Details’ page in dbt Cloud gives analytics engineers a ton of information! Before the Model Bottleneck Visualization, it was difficult to find answers to questions like, “How long did a model take?” and “What was the slowest model and which models contribute most to long runtimes in a given job run?” The goal of this project was to help users overcome these challenges and increase WAU in the process.

Role

Product Designer: I was responsible for stakeholder interviews, wireframes, usability testing, and high-fidelity mockups

Timeline

November 2022

Team

A Project Manager, two developers, and a Product Designer (me)

What is dbt Cloud?

dbt Cloud is a B2B and B2C Saas offering. It is a development framework that combines modular SQL with software engineering best practices to transform data. dbt uses models, or  select statements, which are defined in .sql files. When a user’s code is in production, they can schedule jobs, a set of dbt commands (e.g. dbt run, dbt test) that a user can run on a schedule. The dbt run command executes compiled SQL model files against a target database. Models are run in the order defined by a dependency graph generated during compilation. Multi-threading is used to minimize execution time without violating dependencies.

Run Details

Before this visualization existed, users would look at a log in the ‘Run Details’ page to see which models had failed, find any timing issues, and determine which models were taking the longest. In a run that contains hundreds of models, this could be quite difficult to comb through. In a nutshell, the task was to make the log (pictured below) consumable by humans and the result was a drastic increase in our user base.

One of the benefits of working at a startup is that the Product Design team can work closely with the Marketing team. I collaborated with our brand designer to align on branding and visual design for this visualization.

This work was scoped to be released just before a full refresh of our UI was slated to begin. This was a design consideration.

Internal User Interviews

I showed the first round of designs for the model bottleneck visualization to four Solutions Architects and broke each interview up into 2 parts. For the first half, I showed wireframes that reflected work that was in scope. For the second half, I showed wireframes reflecting work to be completed down the line (but would require more research and some convincing of stakeholders). I made the following UI changes based on user feedback, making sure that this round was appropriately scoped.

Model Timing Tab

Up until these interviews, we'd been calling this tab "Model Exploration" but several participants were partial to "Model Timing".

Infotip

Multiple participants mentioned that they would love to be able to see the model "type" in the infotip. My suggestion was to add a single line in the infotip.

Errors and Warnings

Sometimes models will run for several minutes before failing. In that case, it makes sense to show the length of the model and include an error icon (thread 2, below). In the event of a model failing immediately or after just a few seconds, it makes sense to have an adorning callout (thread 3, below).

"20 models were skipped and were not visualized above" was easily understood by all participants. People were able to intuit that because a few models had failed, 20 dependent models were skipped.

Looking Forward

In the user interviews, I showed a view of the Run Details page that had additional features more in line with our new design system. The participants validated that it would be ideal to be able to show longitudinal data in the future to answer the question, "Is this model taking longer than usual?"

Recommended changes to the Run Details page include:

• A consolidated details section at the top

• Moving "Artifacts" down to the bottom section.

One of the designers designed an option to sort/filter by variables for a different visualization and added it to our Figma library of components. I worked this option into the wireframes shown in the concept sessions and it was well-received.

Participants recommended:

• "Show me models that took x amount of time. Time would be a very important filter."

• "Would love to sort by model types, for example, models that use macros or number of joins. Let’s isolate the factors that we know drive performance."

After the first release of the updated Run Details page, I was able to update the visual styling (pictured below). Adapting our brand guidelines into a robust product design system that stands on its own two feet has been quite an iterative and collaborative effort. Working on this visualization afforded me the opportunity to contribute new styles and components to our design system in Figma, and adapt and leverage styles and components set forth by my colleagues. At the time of this project, it was very much a living document.

“Through December we jumped up from 73 to 114 to 488 to 795 Weekly Active Accounts! We believe much of this usage increase is being driven by our Model Bottlenecks viz rollout to GA. This maps to 1,010 users coming from the Model Bottlenecks viz.”