Pane frame
The container every workspace region is built from, handling resize, collapse, focus ring and empty state consistently regardless of contents.
- pane/surface
- pane/divider
- pane/header-h
- pane/focus
Web UIQuarry
A query workspace for people who are not afraid of SQL
A data tool that had been simplified so thoroughly that its expert users had started working around it.
- Product UI
- Information density
- Prototyping
- Client
- Quarry
- Discipline
- Web UI
- Engagement
- UI/UX design and prototyping
- Platforms
- Desktop web
- Duration
- 12 weeks
- Delivered
- 2025
01The problem
What we walked into
Quarry is a query and analysis workspace used by data teams. Two years of simplification had turned it into a tool that was pleasant for the first hour and frustrating for the next thousand.
Analysts were running four to six queries in parallel, but the interface allowed one visible result at a time. Query history was a modal. Schema browsing closed the editor. The people who used the product for six hours a day had built a habit of keeping four browser tabs open, each with the same workspace, to simulate panes the product would not give them.
Meanwhile the onboarding was excellent, which is why nobody had noticed. Every metric that mattered to expert retention was flat and no one had drawn the connection.
02Goals
What the work had to achieve
Agreed in the first fortnight, written down, and used to settle every argument afterwards.
- G01
Design for hour one thousand
Optimise for the analyst who lives in the product, and let the beginner experience be a well-designed subset rather than the ceiling.
- G02
Multiple things visible at once
Query, schema, results and history should be simultaneously available without modals or tab juggling.
- G03
Density without noise
More on screen has to mean more legible, not more cluttered. That is a typography and spacing problem before it is a layout problem.
- G04
Keyboard as the primary input
Anything an analyst does more than ten times a day needs a shortcut and a discoverable way to learn it.
03UI approach
The decisions that shaped the interface
Four moves that did most of the work. Everything else on the project followed from them.
- 01
A real pane system
Resizable, collapsible panes with saved layouts per workspace. Schema, editor, results and history each get a home, and the arrangement persists between sessions so the tool opens the way you left it.
- 02
Results as tabs, not replacements
Each query run opens a result tab with its own state, so comparing two runs no longer means running one twice. Tabs carry the query snippet and run time in the label.
- 03
A density scale, chosen by the user
Three densities sharing one type scale and one spacing rhythm, so compact mode is genuinely smaller rather than a cramped version of comfortable.
- 04
A command palette that teaches
Every action is reachable from the palette and the palette shows the shortcut next to each result, so the fast path is learned by using the slow one.
04Components and design system
What got built underneath
The reusable parts, and the tokens they were built from. This is the layer that keeps the interface consistent after we leave.
Result grid
A virtualised data grid with column typing, null rendering, sticky headers and per-column summary. Handles a million rows without changing its visual language.
- grid/row-h-28
- grid/null
- grid/numeric
- grid/header
Density scale
Three densities defined as token sets rather than component variants, so any new component inherits density support for free.
- density/compact
- density/default
- density/comfortable
05Outcomes
What changed after release
Measured by the client, on their own reporting, over the period noted against each figure.
- Result sets visible at once
- 1 → 4Result sets visible at onceQueries now open as tabs rather than replacing the previous run.
- Duplicate workspace tabs per user
- −89%Duplicate workspace tabs per userThe four-tab workaround largely disappeared.
- More queries run per session
- 31%More queries run per sessionMeasured across daily active analysts after twelve weeks.
- Actions in the command palette
- 118Actions in the command paletteEach showing its keyboard shortcut inline.
The four-browser-tab workaround was mentioned by every single analyst we interviewed, and had never appeared in a support ticket. Nobody reports a habit.
For two years we optimised for the demo. They made us optimise for Tuesday afternoon.
06Gallery
Screens and system, laid out
Layout diagrams of the interface as delivered, with a note on what each one is doing.
- 01 / 04
Workspace layout
Schema, editor, results and history visible together, with resizable panes and saved layouts.
Interface layout diagram from the Quarry project.
- 02 / 04
Result tabs
Each run opens its own result tab, labelled with the query snippet and run time.
Interface layout diagram from the Quarry project.
- 03 / 04
Density modes
Three densities built from token sets so every component inherits them automatically.
Interface layout diagram from the Quarry project.
- 04 / 04
Command palette
All 118 actions searchable, each showing its shortcut so the fast path gets learned.
Interface layout diagram from the Quarry project.
07Take it with you
The one-page version
Everything above, condensed to plain text. Copy it into a brief, or download it to circulate internally.
Case study summary
Plain text, ready to paste into a brief or a board pack. Saves as baseline-studio-quarry-workspace-summary.txt.
BASELINE STUDIO / CASE STUDY SUMMARY
================================================================
Client: Quarry
Project: A query workspace for people who are not afraid of SQL
Discipline: Web UI
Engagement: UI/UX design and prototyping
Platforms: Desktop web
Duration: 12 weeks
Year: 2025
OVERVIEW
================================================================
Quarry is a data query workspace whose two-year simplification programme had made it excellent for the first hour and obstructive after that. Analysts kept four browser tabs of the same workspace open to simulate panes the product refused to provide.
We designed a resizable pane system with layouts saved per workspace, made query results open as comparable tabs rather than replacing one another, defined three densities as token sets so every component inherits them, and built a command palette that teaches its own shortcuts.
Delivered across 12 weeks: 26 screens plus a coded prototype tested with nine analysts, a pane frame and virtualised result grid specification, a three-step density token architecture, and a documented shortcut model covering 118 actions.
Results: up to four result sets visible at once, duplicate workspace tabs per user down 89 percent, 31 percent more queries run per session, and every palette action showing its shortcut inline.
OUTCOMES
================================================================
1 → 4 Result sets visible at once
Queries now open as tabs rather than replacing the previous run.
−89% Duplicate workspace tabs per user
The four-tab workaround largely disappeared.
31% More queries run per session
Measured across daily active analysts after twelve weeks.
118 Actions in the command palette
Each showing its keyboard shortcut inline.
CONTACT
================================================================
Baseline Studio
studio@baseline.design
+1 (415) 555 0142
Figures describe a specific product, team and period, and are
published to explain the work rather than to predict a result.05Start a project
Working on something similar?
Tell us where your product is getting stuck. We will tell you honestly whether this is the kind of problem we are good at, and what we think it would take.
- Prefer email
- studio@baseline.design
- Current availability
- Taking on two engagements for the coming quarter.
- Typical reply time
- Two working days, from a partner rather than a form.