Enhancing the usability of our data section

How we improved our activation by increasing the number of users connecting data by 6%

About Budibase

Budibase is a low code app builder that helps developers save time building internal tools.

The target audience are developers and IT professionals who are comfortable using databases but don't build frontend interfaces.

My role

As the only designer at Budibase, I take full ownership of the design process:


Idea discovery

User journey maps

Wireframing and UI Design


User testing

Throughout the entire design process, I always collaborating with our engineering leads to make sure that my designs are feasible and attainable within the set timeframe.


Setting up data is the initial and crucial phase in the user journey. We observed a considerable dropoff at this stage which was negatively impacting our activation.

  1. Complete sign up

  2. Create first app

  3. Set up data

  4. Build and publish app

  5. Invite another user ← (Our activation point)


To start the project off, I looked to gather some insights as to why users where dropping off at this point. This was done through:

Looking at data in Posthog

Conducting a usability audit

Speaking with users who failed to set up any data

Snapshots of the usability audit

Redesigned database overview page

The overview page shows the user the configuration settings for their database and also all the resources such as tables, relationships and queries.


The database config wasn't important to the user after it has been connected

The resources like tables, relationships and queries where all out of sight of the user

"I have a lot of tables in my database and this page becomes super long"


Reduced visual clutter by hiding the configuration settings

Improved the usability by adding tabs for the resources (Tables, Relationships and Queries)

Updated styles to make it consistent with the rest of the product

Added easy to find links to relevant help articles

Removed redundant copy

Overview page, the before and after

Adding validation when configuring a database and improving table syncing

A user has to add configuration settings to connect to their database (For example, connecting a Google account and adding a URL to a Google Sheet)

Once their database is connected, they can now read and write to their tables and build an app using the data.


Users can save a misconfigured connection to an external database (for example, a mistyped URL to connect to Google Sheets). This can leave the user in a broken state with no indication that there is an error.

Users can either sync all tables or none during the database setup. Despite us having the ability to sync individual tables.

The user has no way of discovering the ability to fetch individual tables.

To specify which table to sync, the user has to manually type out the table name, this is time consuming and error prone.

"I tried to connect Google Sheets but it didn't work"

"We have lots of tables in Postgres, I only wanted to fetch a couple of tables we use for testing"


We added a validation process that ensured there is a successful connection to the database to prevent users getting into a broken state

We made specifying which tables to sync part of the primary set up flow

With the a successful connection, we could pull back all the table names for the user and let them select which ones to sync

Connection successful before moving to fetching tables

Adding a new empty state for when a user has not set up any data

In the previous design, as soon as you entered the builder on a new app, we presented you with a modal outlining your choices for setting up a database.


Users instinctively dismiss optional modals to try and explore the product first

Going back to the data section and seeing an empty users table is not helpful

"I want to explore the builder before I start connecting data"

"I used the Budibase tables to create some test data"


Users can easily explore other sections of the builder and return to see all of their options available

Added sample data to help users get started with dummy data

Made the Budibase database option more user friendly by creating actions like "Create new table" and "Upload CSV or JSON"

Add data source empty state, the before and after


The changes to the overview page and the sample data received a lot of positive feedback on our public discord.



Increase in the number of users configuring a data source



Increase to our activation