Re-designing the SQL Engineer Experience



Case

Product and UX Design

Colin Shiner

For many database developers, SQL is the language of choice. InterSystems wanted to provide a modern SQL experience for our users, enabling them to easily manage schemas, statements, and performance. 

Synopsis

I worked with colleagues from around the company to create an updated interface for our SQL engine that powers thousands of hospitals, financial insitutions, government agencies, and supply chain companies around the world. 

While the company's database technology is extremely performant, the interface we provided our users to interact with it was dated and difficult to navigate. Most SQL admins, developers, and data engineers I talked to (even those who worked at the company) used third-party tools in order to avoid having to open the tool we originally provided (screenshots below). 

Our standard SQL querying interface (pre-update). The user would add their query to the text box under the dark blue banner in order to run it. 
A list of previously run SQL statements. The user would sift through these to manage which statements the database was running. 

Process and Design Evolutions

Working with SQL experts, developers, customer support engineers, and product managers, I conducted a set of two design workshops (seven users each) and three in-depth interviews to learn more about how users managed and accessed their databases. I also conducted a basic comparison study of third-party SQL tools available to our users. From this initial research, I identified and priotized a set of core use cases a typical SQL engineer might see as foundational to a great SQL interface. I then began sketching some initial concepts for what a new interface might offer (sample screenhots below). 

SQL Schema Viewer: Low Fidelity
SQL Schema Viewer: Low Fidelity

Based on feedback from SQL users and internal product experts, I continued to evolve the interface concepts with a particular focus on making it easier for users to write more complex queries, quickly understand the shape of the data they were working with, and improve the efficiency of how they structured their statements. 

The screenshots below show medium fidelity Figma mockups for a table viewer and a query editor, two of the principal tools our users had singled out as being essential to their work. In the table viewer, each column (or "field") includes a mini bar chart showing the distribution and range of the data it contains. This gives the user a quick summary of what the data looks like, and also provides an early indicator of data quality. If the charts show extreme values or an unexpected distribution, it might alert the user that something is amiss in a way that simply scrolling through the first 10 or 100 rows of data would not. 

In the query editor, the query output shows up at the bottom, while the tables and fields the user references in their query appear on the right-side toolbar. This gives the user an easy way to keep track of what they've referenced in their query and acts as a memory aid so they can quickly see what other fields are in the tables they're working with. 

SQL Table Viewer: Medium Fidelity
SQL Query Editor: Medium Fidelity

Outcomes

As of present, the product has garnered positive feedback internally and initial user feedback has proven helpful in refining the concepts from the initial sketches through increasing levels of fidelity. In the most recent versions, for example, I added syntax highlighting and mutli-cursor support to the query editor (both popular requests) to better assist the user in writing long queries. 

Implementation is currently ongoing, and the product team has received initial approvals to continue designing and developing additional features.

Higher Fidelity Mockup of the Query Editor
 Table View: Higher Fidelity
Schema View: Higher Fidelity

Want to know more? 

Let's talk!

Get in touch on LinkedIn