SaaS dashboard design: what the first screen of a B2B product should show

Most B2B dashboards start with a good idea and grow by addition. Every team adds the chart it cares about, every sales call adds a widget, and two years later the home screen is twelve cards that nobody reads. People land on it, scroll past it and click into the list they actually came for.

The fix is rarely a new chart library. It’s deciding what the first screen is for.

What should a SaaS dashboard show first?

The first screen answers two questions: what needs my attention, and what changed since I was last here. Everything else is secondary.

Attention means things the user has to act on: a failed sync, an approval waiting, an account at risk, a run that finished with errors. Change means movement since their last visit: new items, numbers that moved more than usual, work that someone else completed. A dashboard that only shows totals answers neither question. The totals look the same every day, so people stop looking.

Then give the screen one primary action. Not one per card. The single thing most users do next, placed where the eye lands after reading the attention items. If you can’t name that action, the screen doesn’t have a job yet.

If totals look the same every day, people stop looking at them.

How many KPIs belong on the home screen?

Usually three to five. The test is simple: would a change in this number make someone do something different this week? If not, it belongs in a report, not on the home screen.

A number on its own is rarely useful. Show it with a comparison (against last week, last month or a target), the direction of change, and enough context to judge it. "Open tickets: 48" says little. "48 open, 12 more than last Monday, 9 past SLA" tells the user whether to worry and where to look.

• 01A comparison: previous period, target or benchmark the user set.
• 02A direction and size of change, in words or a small delta, not only a color.
• 03A time range that’s visible and easy to change.
• 04A path to the rows behind the number, one click away.

That last point matters more than the chart. A KPI that can’t be opened into the items behind it is decoration.

Role-based defaults, not one dashboard for everyone

An admin opens the product to check that things are set up and running. A manager opens it to see how the team is doing. An operator opens it to work through a queue. One home screen built for all three ends up serving none of them well.

You don’t need three products. Keep the data and the components shared, and change the default view by role: which items sit at the top, which numbers show, which action is primary. Let people adjust from there, but don’t make customization the main answer. Most users never configure a dashboard, so the default is the design.

Tables over chart walls

Charts are good at showing shape: a trend, a spike, a distribution. They’re poor at telling someone which customer to call or which job to retry. When people act on individual rows, the main surface should be a table, with the few charts that explain it placed above or beside it.

How do you design a data-dense dashboard that stays readable?

Data-dense dashboard design is a typography problem before it’s a layout problem. The instinct is to put each piece of information in its own card. Cards add borders, padding and shadows, and twelve of them create twelve competing focal points. Density done well uses fewer containers and more alignment.

• 01Tabular figures for every number, right-aligned in columns, so values can be compared at a glance.
• 02Two or three type sizes and weights for hierarchy, used the same way on every screen.
• 03Labels in a quieter color than values, so the eye reads the data first.
• 04Spacing and dividers to group content, cards only where a group really stands alone.
• 05Color reserved for status and change, never for decoration.
• 06Units and time ranges written once per group, not repeated on every value.

The calm dashboards people point to as good examples aren’t sparse. They often show more information than the busy ones. They just make it scannable, because the hierarchy is carried by type and alignment instead of boxes.

Empty and first-run states

The dashboard is often the first screen a new account sees, and on day one it has no data. A grid of zeros and empty charts tells a new user the product doesn’t work yet. Design the first-run state as its own screen: what to connect or import, what the dashboard will show once there’s data, and one action that gets there. We cover this side in SaaS onboarding and activation: designing the first session.

Partial data deserves the same care. A number based on two days of activity should say so. A chart with one point should explain what it will become. Honest states build more trust than confident-looking zeros.

When is a dashboard redesign worth it?

A dashboard redesign for SaaS is worth it when the home screen has stopped doing its job, not when it looks dated. Before redesigning, run a simple test with five to ten real users from different roles: ask them to open the product and tell you, out loud, what needs their attention today. Then watch where they click.

• 01They skip the home screen and go straight to a list or a filter.
• 02They can’t say what changed since yesterday without opening other pages.
• 03They export data to a spreadsheet to answer a routine question.
• 04Different roles describe the same screen as useless for different reasons.
• 05Support gets asked where a number comes from or what it means.

Two or more of these and the dashboard information architecture needs rework: what’s on the screen, in what order, for whom. If users answer the question easily and only complain about looks, a visual polish is enough. Restyling a screen that answers the wrong question is the most common way redesigns go wrong, which we wrote about in Why most redesigns fail.

A first-screen checklist

• 01The top of the screen shows what needs attention, by role.
• 02Changes since the last visit are visible without clicking.
• 03Three to five KPIs, each with a comparison and a path to the rows behind it.
• 04One primary action, the same for most users in that role.
• 05A table where people act on items, charts only where shape matters.
• 06Tabular, right-aligned numbers and a short, consistent type scale.
• 07Color used for status and change only.
• 08A designed first-run state and honest partial-data states.
• 09Visible time ranges and units.
• 10Everything else moved to reports, one click away.

Where we fit

For a new product, the home screen is one of the first screens we design in a Launch sprint, from US$12k, alongside positioning and the core flows. For a product that’s already live, Partner, from US$6k/mo, can take on the dashboard as one focus: run the test above, rework the structure, then move to the next problem.

If your home screen has turned into a wall of charts and you want a second opinion, send us a screenshot and a short brief.

• Product
• UX
• SaaS