Home

Enterprise · SQL Tooling · Product & UX Design

Re-designing the SQL engineer experience

The database was highly performant, but its interface was dated, so most SQL users reached for third-party tools instead. As the lead designer, I rebuilt it around how they actually explore data, write queries, and manage statements.

The shipped query editor: a dark interface with multiple saved statements as tabs, a live SQL editor with syntax highlighting, a schema explorer on the right with table and column details, and a result set below.
The query editor as shipped: multi-tab statements, live schema explorer with selection details, embedded result set. The case below traces how it got there.

The problem

The company's flagship database product powered thousands of hospitals, financial institutions, government agencies, and supply chain customers, but the interface those teams used to query it was dated and difficult to navigate. Most SQL administrators, developers, and data engineers I spoke with (including people inside the company) reached for third-party tools to avoid opening the one we shipped, which meant the product had little say in how people actually worked with the data.

The legacy SQL querying interface: a header labelled 'Statement Text and Query Plan' above a single dark-blue banner row, with a long plain-text SQL query and a query-plan list beneath.
The original SQL querying interface: a single text box under a dark blue banner.
The legacy SQL statement list: a small-font tabular grid of dozens of previously-run statements with metadata columns and SQL text.
The legacy statements list: a flat sift-through to manage what the database was running.

Approach

Partnering with product managers, engineers, and product leadership, I ran two design workshops of seven users each and three in-depth interviews with SQL experts, alongside a comparative analysis of third-party SQL tools. That research pinned down the core use cases an effective SQL interface has to nail. From there I sketched initial concepts and iterated with users and internal experts on what a new interface should offer, focusing on making it easier to write complex queries, quickly understand the shape of the data, and structure statements efficiently.

A hand-drawn low-fidelity sketch of a schema viewer: a left-side schema navigation pane, a central canvas labelled 'Schema viewer' with table-relationship boxes, and 'view' and 'edit' button stubs.
An early schema-viewer sketch: testing the navigation pattern at low fidelity.
A low-fidelity schema-viewer sketch with annotations explaining how single-clicking a schema in the search results opens it in the main pane, and double-clicking opens it as a new tab.
An annotated schema-viewer sketch: testing single- vs double-click behaviour for moving between schemas, tables, and queries.

Two anchor features

Two tools came back as essential in every conversation, and I designed the redesign around them.

In the table viewer, every column header carries a mini bar chart of the distribution and range of its data. It gives the user a fast read on the shape of the data, and an early indicator of data quality: extreme values or an unexpected distribution flag something amiss in a way that scrolling the first 10 or 100 rows never would.

In the query editor, output sits at the bottom; the tables and fields the user has referenced in their query appear in a right-side toolbar, acting as a memory aid for what's in the schema and what's already in play. Syntax highlighting and multi-cursor support followed from user feedback as the design progressed.

The table viewer showing a mini bar chart of the distribution for each column.
Table viewer: every column header carries a sparkline of its distribution. Type to filter; the bars recompute on what you can see. Click a header to sort.
An early wireframe of the query editor: a SQL editor over a sample dataset, a schema overview on the right, and a query edit history panel.
Query editor: referenced columns stay lit in a right-side rail; output lives at the bottom. Edit the SQL or click a column to add or remove it.

From wireframe to working

A medium-fidelity Figma mockup of the table viewer: a multi-column data grid with category bar, mini distribution chart, and range labels under each column header.
Medium-fidelity table-viewer mockup: the column-distribution sparkline anchored the design.
A medium-fidelity Figma mockup of the query editor with a SQL editor, schema overview, query edit history, and an output panel at the bottom.
Medium-fidelity query-editor mockup: output at the bottom, schema and edit history on the right.

Research scope

2
Design workshops
14
Participants
3
Expert interviews

Outcome

In usability testing the redesign outperformed the legacy interface by orders of magnitude on the core tasks, and internal reviewers rated it highly for desirability; several pushed for it to be officially built. Implementation is ongoing; the team has approvals to keep designing and developing additional features against the new interface, refining the concepts from initial sketches through increasing levels of fidelity.

Higher fidelity

A higher-fidelity dark-mode query editor with multi-tab statements, a live SQL editor, schema explorer with selection details, and an embedded result set.
Query editor: the shipped state.
A higher-fidelity dark-mode table view showing a wide grid of records with sparkline column headers and a side panel of indices and related tables.
Table view: higher-fidelity mockup.
A higher-fidelity dark-mode schema view showing table relationships, distribution charts, and a side panel of selection details and indices.
Schema view: higher-fidelity mockup.