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:
Research
Idea discovery
User journey maps
Wireframing and UI Design
Prototyping
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.
Problem
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.
Complete sign up
Create first app
Set up data
Build and publish app
Invite another user ← (Our activation point)
Research
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.
Problems
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"
Solutions
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.
Problems
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"
Solutions
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.
Problems
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"
Outcomes
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
Result
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