In order to support its users in creating even better user experiences, dbtCloud has undergone a makeover. The organic increase in dbtCloud usage served as the catalyst for the redesigned UI. “Visually: refreshed. Functionally: mostly unchanged” - as said by their product development team. The goal was rethinking the UI so that it feels refreshed, while addressing the feedback on the old one. During this process it was also important to help maintain the usual workflow because each time a user visits an interface, a learning process is initiated in their brain, which requires mental effort. This effort is called cognitive load and can be profoundly facilitated with the right design approach. 

Let’s dive into the most noticeable changes. 

Navigation Bar

No more hamburger menus. Their ineffectiveness and poor discoverability are the root causes of why hamburger menus are being treated as an inconvenient type of navigation. Since the old interface already had a top navigation bar, the product development team took the chance to make better use of it. Now it takes fewer steps to navigate and it’s easier to understand where the user currently is in the application. In the new UI, you can also find Develop, Deploy, and Documentations tabs on the navigation bar, where Run History, Jobs, Environments, and Data Sources are all under the Deploy tab. In the end, switching from the hamburger menu to the navigation bar helped to keep the core functionalities in the user’s view.

It is worth mentioning that in the old UI the Account Settings could be accessed through the hamburger menu, while the Profile Settings could be found via the user avatar at the top right side of the navigation bar. In the new one, both are accessible via the settings icon, reducing the chances of mixing them up. This helps maintain the user experience instead of having to guess where to look for the desired settings.

Filters

Filters are critical components of minimizing the time users need to get the desired information out of a complex amount of data. Looking at the Run History, the new interface has improved the filters to make them faster and more intuitive to search. Now, filtering our results takes only 2 clicks, instead of the 4-5 steps on the previous UI. Once again, this improvement contributes to the overall user experience.

Jobs

Compared to the old UI, there’s no need to click on the jobs to have a glance at some of the basic information about them, such as when the last run was or when the next one will be, in addition to the status of it. While white space is needed on an interface to help guide the visual focus, the old UI components had plenty of unused space to work with. Now, there’s no need to take unnecessary actions to find the details.

When it comes to settings, the interface got cleaner, and the Edit button got elevated from the design by getting a high contrast color compared to the former version. On the old UI, the Environment Variables button used to be highlighted, but now it can be viewed without additional interaction.

While editing, the new UI provides an easier and faster way to reorder commands through drag and drop, which is a type of direct manipulation. This means that the objects of interest can be acted upon via actions that receive immediate feedback. Drag and drop is particularly useful for reordering elements, when the user expects the action. It’s important to create a clear signifier, which, in this case, is a grab-handle icon. When well understood, this interaction can be quickly adopted by the user.

In the end, the new interface of dbtCloud manages to keep up with the feedback all the while the UI patterns remained similar to the old ones. This results in a reduced cognitive load and an overall improved user experience.

Take a look at our Modern Data Stack blog to stay tuned with the latest related updates...