How to Choose the Right Design System for Data-Dense Applications

Byon October 22#business-tips
How to Choose the Right Design System for Data-Dense Applications

An analyst comparing transactions needs to keep related records in view. A manager approving an exception may need only the relevant details and a clear explanation of the risk. Both can use the same product, sometimes on different devices.

Choosing a design system for that product starts with understanding these differences. A library with compact tables may suit the analyst’s work, but its component catalogue tells you little about how well the approval flow will work on a phone.

The decision becomes easier when you evaluate systems against specific tasks. How much information needs to stay visible? What interactions do people repeat? And how much work will your team need to do beyond the supplied components?

sambeetarts-geometric-1732847 1920

Start with Four Questions About the Work

Before comparing libraries, choose a representative workflow and ask:

1

Do users need to compare multiple data points simultaneously? Look for tasks where people repeatedly switch between records or open extra windows to keep information visible. Those workarounds can reveal a need for a denser layout.

2

Is keyboard navigation central to the workflow? Someone reviewing a queue for hours has different needs from someone opening a dashboard once a week. Observe how often repeated mouse actions interrupt the work.

3

Does a more compact layout improve task completion? Test the same task at different densities. Check whether people find the relevant information faster and whether they make more mistakes.

4

What happens when someone misses a detail? Identify the information that must stay visible at the moment of a decision. A costly error may justify a persistent warning or a clearer confirmation step; it does not automatically justify adding more data to the screen.

Apply these questions to individual workflows. A product can need a dense review table and a spacious onboarding flow.

Decide Where Density Helps

Consider an insurance reviewer investigating a suspicious claim. They need to compare it with earlier claims while keeping the policy details close at hand. A summary card may help them find the case, but the investigation requires more context. Overlooking a relevant detail could lead to a costly decision.

For this task, a wide screen gives the interface room to preserve relationships. The reviewer can select a record and inspect its details without losing their position in the queue.

Palantir’s Blueprint illustrates this approach. Its documentation describes a React toolkit optimized for complex, data-dense desktop interfaces. That explicit focus makes it a useful candidate to evaluate when sustained desktop work is central to the product.

It also defines a boundary. A desktop-oriented toolkit deserves closer scrutiny when essential workflows involve touch input or small screens. Blueprint’s maintainers acknowledge in their discussion of mobile support that the toolkit was designed for desktop applications and has not been thoroughly tested on mobile browsers.

The useful selection criterion is how closely those assumptions match your product’s actual use.

Evaluate a Complete Workflow

A component catalogue is a starting point.

A table demo can show how rows render, but it may tell you little about what happens when someone changes a filter while editing a record. Build a small prototype that connects the relevant components and preserves the state users need.

Imagine an operations specialist investigating failed payments. They select an account, narrow the date range, and inspect the affected records. If every filter change resets the table selection or closes the detail panel, they have to reconstruct their place in the investigation. Each control may work correctly while the overall workflow remains frustrating.

Use this prototype to evaluate the following areas.

Readability at Different Densities

Reducing vertical padding can fit more rows into the same viewport. The benefit depends on whether those additional rows help someone complete the task.

Compression also has a limit. Wrapped labels can make rows harder to scan. Small controls can become difficult to select, and a warning squeezed into a crowded cell may go unnoticed.

Check whether the candidate system gives you enough control over spacing without requiring extensive overrides. Test with realistic content, including long names and validation messages. A simplified demo dataset may leave these problems unnoticed.

Keyboard Interaction and Focus

For repetitive work, evaluate how people move through the entire task using the keyboard. Can they reach the relevant controls, understand where focus is, and return to their previous position after closing a dialog?

Include error recovery. A fast path through a table is less useful if a validation error leaves the user unsure which cell needs attention.

Look for documented interaction behaviour, then verify it in your prototype. Component-level support still needs to work within the surrounding application.

State Across Connected Views

A selected record should remain understandable as the surrounding view changes. Decide what should happen when a filter excludes it or an update changes its position in the table.

These decisions usually belong to the application. During evaluation, check how clearly the library exposes the state and events you need to implement them.

A system that makes these relationships difficult to manage can create maintenance work long after the initial screens are finished.

Account for the Cost of Integration

A component library supplies part of a design system. Your team still needs shared rules for how those components behave in the product, including guidance on density and error handling.

The API affects how much effort that work takes.

For example, Blueprint’s table API uses a row count and columns with cell-rendering functions. Those functions use row indexes to determine what to display. If a developer changes the order of the data but leaves the renderer reading from the original array, the displayed rows will not reflect the intended order. The integration needs a consistent mapping between visible row indexes and records.

There are requirements outside the table itself, too. Blueprint’s migration guide specifies that developers must configure a HotkeysProvider in the surrounding React tree.

These are manageable details, but they take time to learn. When evaluating any candidate, ask an engineer to implement a small interaction that resembles your real work. Note where the documentation answers their questions and where they need custom code.

Also review the upgrade path. Blueprint’s version 6 migration notes, for instance, explain how the implementation previously exposed as Table2 replaced the older Table. Changes like this make the version of an example relevant when developers reuse it.

For a small administration screen, a specialised table API may introduce more work than the task warrants. For a table used throughout the day, that investment may be justified.

Plan for the Middle Ground in B2B SaaS

Many B2B SaaS products support different levels of involvement within the same account.

Take a billing platform. An operations specialist may spend the morning reconciling failed payments on a laptop. Their manager may open the product on a phone to approve one exception. Both need access to the underlying record, but the amount of surrounding information they need differs.

For the specialist, a compact table with a persistent detail panel could support comparison. For the manager, a focused approval screen could surface the amount and the reason for escalation, with access to supporting evidence.

Evaluate whether the design system can support both layouts while keeping terminology and status labels consistent. Check how much adaptation is required and whether those adaptations remain understandable to the team maintaining them.

Frequency of use matters as well. Daily operators may benefit from saved views and keyboard shortcuts. Occasional users may need clearer explanations. A compact status code that an experienced reviewer recognises immediately may need a visible label for a new colleague.

A single density setting is unlikely to resolve all of these needs.

Make the Choice with a Representative Prototype

Compare a small shortlist using the same task and dataset. Include someone new to the workflow as well as an experienced user. Observe where they lose context, and record the implementation work needed to resolve those problems.

The result may favour a toolkit with a strong desktop focus, such as Blueprint. It may favour a system whose responsive components better support the product’s mix of devices. Either choice should be supported by what happens in the prototype.

Choose the design system that supports your important workflows with an integration cost your team can sustain. The strongest evidence comes from people completing real tasks with it.

Make teamwork simple with Workast