2017 - 2019

Hotmart DataBox

DataBox is an internal tool at Hotmart to provide data within the company


Using DataBox, data scientists can safely create and store queries, visualizations and dashboards that will be available for different teams and coworkers to access. The challenge was to create a product that, at same time, was easy for any employee to get the information that was needed and resourceful for a data scientist to build complex queries using multiple databases.

Product Conception • Interface Design • User Experience



The product was built into a file based system. Queries are files, that are grouped into folders. Different levels of access within the company allow users to see different folders that are controlled by admin users.

Visualizing a query

When a query is executed the user is able to analyze the data as a table, customizable charts or indicators.
as a Table
as a Graph
as an Indicator

The query editor

In order to create queries, data scientists use the query editor, a SQL based interface.
An empty query editor screen
Users can reach the data source map to explore different databases
And understand the tables and columns within a database

The dashboard

Queries can be combined and displayed as a dashboard. This allow data scientists to quickly create fully functional dashboards without any extra development required.
a dashboard example

Creating a dashboard

Setting a dashboard with all different possibilities the tool have can be very complex. To make it easier for the user, the process was designed to be a step by step experience.
An empty dashboard
the first step is to chose which query will be used to generate a visualization
The user is able to chose between different visualizations and edit the display options
The visualization is placed at the dashboard and the user is able to change the place, resize and edit the card

Setting filters to dashboard

The next step on creating a dashboard is to add filter options. Filters are based in the variable parameters each query might have. This configuration allow final users to explore dashboards in a more explorative way.
A sidetab will appear when filters are available for a dashboard
Each card will indicate which parameters are able to be filtered
When a filter is activated, the data scientist is able to chose from different types of filter behaviors
each filter type requires specific configuration to work. as example, a date picker filter settings
The settings are saved and applied at all queries that are relevant to the parameter.


The system was built to be partially accessible to mobile devices. Although all users can execute queries and access dashboards, complex editing features were removed from the responsive version.
back to top Next Project

Stalk me:
Follow me on social media:

© 2020 Gabriel Castro - No rights reserved