First Impressions Matter

Styling Data Products People Actually Want To Use

Shelby Level

I want to start us off with a quick question.

How many of you would download and install software you found on this website?

Not many, right?

Now, How many of you want to share this dashboard with your boss or a client?

Anyone? I would rather pretend I can’t make dashboards at all.

These are two very different products, but they create the same reaction: hesitation.

You already made a judgment

You already made a judgment, before reading a single number You don’t know if the software works or whether the dashboard data is accurate.

But you have already decided whether you want to keep looking.

That first impression doesn’t tell you whether the product is actually trustworthy.

But it affects whether you give the product a chance to prove that it is.

I’m Shelby Level. I build dashboards, reports, and other data products that help people make decisions. I came to this work as a data person, not as a designer.

And I have made some not so great looking work.

I cared about if the numbers were right, the code ran, and the dashboard loaded. And then I was done. Or at least, I really wanted to be done and the last thing I wanted to do was fight with CSS.

I looked at the default Bootstrap theme applied to my work and thought, “It works, it’s accessible and it looks fine. Surely that’s enough.

Sometimes it is enough. But sometimes this “good enough” makes really good work much easier to ignore.

Styling ≠ Evidence

Styling is Not Evidence, But it influences whether people examine the evidence

Before we go further, I want to be clear: Polished styling does not make data accurate, just like a nice font can’t replace credible sources.

But styling can affect whether someone pauses to pay attention and give our work a chance.

Styling doesn’t create the evidence, but it helps determine how the evidence is received.

People evaluate more than the data

People evaluate more than the data And this isn’t something I made up to justify spending too much time playing with the Adobe Color Wheel tool.

In a 2025 study, researchers asked people to rank visualizations by perceived trustworthiness and explain their reasoning.

And, as expected, people talked about data accuracy, sources, and objectivity. But they also mentioned aesthetics, professionalism, familiarity, and even intuition.

People were evaluating more than whether the numbers looked correct, they were evaluating the entire visual experience.

What Viewers Use to Judge Trust

Readability

Simple Clarity Complex

Integrity & Transparency

Data Integrity Labeling Source Objectivity Intent

Quality & Design

Vis Type Visual Elements Aesthetics Professional Academic

Familiarity

With Topic With Source Unspecified

Personal

Confidence Intuition Relevance Reliability Importance

Their responses fell into five broad categories: readability, integrity and transparency, quality and design, familiarity, and personal factors.

People didn’t always prioritize the same things. One person forcused on a clearly cited source while another focused on clarity.

The researchers discovered there may be no one-size-fits-all approach to trustworthy design. But there are some commonalities that we can use to guide our work.

Here are all of the individual keywords that participants used to describe why they trusted a visualization. And this is a lot of information to process at once. So let’s take a step back and break it down into a more manageable framework. This reveals two broader ways we evaluate trust: cognitively and affectively.

Cognition-Based Components

Readability

Simple Clarity Complex

Integrity & Transparency

Data Integrity Labeling Source Objectivity Intent

Quality & Design

Familiarity

Personal

Cognition-based trust comes from intentionally evaluating the work.

Can I understand it? Is the data represented clearly? Is the source transparent?

This is where we spend most of our time as data professionals, and rightfully so. We clean the data, verify calculations, cite the source, and hopefully document our methods.

This work is foundational, but because we are trained to prioritize it, it is often where we stop.

Affective-Based Components

Readability

Integrity & Transparency

Quality & Design

Vis Type Visual Elements Aesthetics Professional Academic

Familiarity

With Topic With Source Unspecified

Personal

Confidence Intuition Relevance Reliability Importance

This is where affective-based trust comes in, and this is where we often fail to spend enough time (and also what we usually save until everything else is done).

It’s closer to the reaction you had to those opening examples.

Does it feel appropriate? Have I seen work that looks like this before? Does my gut tell me to keep looking?

Our audience doesn’t start with the methods or reference section. They start with whatever loads on the screen.

Before checking a source or questioning a number, they see the colors, typography, spacing, and overall design.

That instinct is not always accurate, and aesthetics were not necessarily more important than clarity or integrity.

But secondary does not mean irrelevant. If visual design influences whether someone takes a closer look, it’s worth taking seriously.

Two Design Choices With a Big Impact

So, now that we know styling matters, what do we do with this?

You don’t need to become a graphic designer, earn a design degree, or even spend your weekend learning CSS.

We are going to focus on two design choices that strongly shape how our work is experienced: color and typography.

Then we’ll make those choices reusable across formats so we don’t have to start over with every product we make, without a CSS-induced headache.

Let’s start with color.

Color Shapes Attention and Tone

Now there is no magical shade of trustworthy blue that will make everyone believe everything you make

But color is one of the first things people notice, and it should always have a job.

Color can help people understand. It can distinguish categories, reveal patterns, and direct attention to important information

Color Shapes Attention and Tone

But color also shapes the overall experience. A palette can feel calm or exciting, serious or trustworthy.

And context matters. Red could represent good luck, a political party, a negative value, or it could simply mean your organization gave you a branding guide with exactly one usable color and said, “Good luck.”

So instead of asking, “Which colors do I like?” ask:   “What does this color need to do?”

While color helps users navigate the data, typography helps them navigate the text.

Typography Shapes Hierarchy and Voice

Typography may be less noticeable than color, but our data products are full of it.

Titles, descriptions, labels, annotations, sources, and of course numbers.

Typography helps people navigate all of that information.

Typography Shapes Hierarchy and Voice

Differences in size, weight, and style help people recognize what they should read first, what comes next, and what is supporting detail.

It also shapes the overall voice of your product by contributing to the mood, and tone we communicate before anyone reads a word.

Which one of these notes do you want to find waiting for you? Same words, different personality.

Of course, before a font can give our work personality or make it feel like ours, it has to be readable.

It needs to work at the sizes we actually use with clear letters, numbers, and enough contrast against the background.

I’m looking at you, Papyrus.

So instead of asking, “Which font do I like?” ask:

“What does this typography need to communicate?”

Color and Typography Shape the First Impression

Color helps direct attention and set the tone while typography creates hierarchy and gives your work a voice.

Neither changes the underlying information.

But together they create the first impression long before someone evaluates the data.

You Don’t Need to Start From Scratch

At this point, you might be thinking, “Okay, great. Now I have to create an entire design system.”

I need fonts, button styles, and a brand color palette with approximately 47 coordinated shades of gray.

This is typically where I decide the default theme is looking pretty good after all.

The good news is that we don’t have to start from scratch.

Bootstrap Is Already Doing More Than You Think

When we create an HTML product with Shiny or Quarto, Bootstrap is already doing a lot of the design work for us.

It provides the layout system and styles familiar components like headings, buttons, and tables.

That is why our work can look reasonably polished before we write any CSS.

Bootstrap gives us a solid, functional foundation.

But a Good Default Is Still a Default

But this foundation also means our work can look a lot like every other dashboard or report we’ve ever seen.

Or suspiciously similar to the example we copied from the Shiny or Quarto website while trying to remember how to move the table of contents.

Bootstrap gives us “good enough.”

What we need is an easy way to move from “good enough” to “this stands out and looks intentional.”

Bootswatch Gives Us a Better Starting Point

That is where Bootswatch comes in.

Bootswatch gives us a collection of ready-made themes for Bootstrap that can be easily applied to our HTML based outputs.

Instead of styling every button, heading, and nav bar ourselves, we choose a coordinated design where many of these decisions have already been made for us.

Possibilities of Bootswatch

And there are a lot of them. Here are 26 of them.

Same structure, same content, very different personalities.

Bootswatch probably won’t give us our final design, but with one simple change we can start to get a lot closer to the experience we want.

Applying Bootswatch Themes

So how easy is it? In Shiny, it’s one argument.

Pick a preset, pass it to the theme argument, and every component in the app updates at once.

No CSS. No redesign. One line.

A Preset Is a Starting Point

But here’s the limit. A Bootswatch preset doesn’t know our organization’s colors, our fonts, or how we want our work to feel.

We could fix that by hand in every single project.

Or we could make those choices once and reuse them everywhere.

That is where brand.yml comes in.

Make Those Choices Reusable

A brand.yml file is one home for all of those decisions.

Our palette, our typography, all the choices that make something look like ours.

Define them once, and every dashboard, report, and presentation can pick them up.

The Importance of Brand Recognition

Reusing these choices does more than just save us time.

Over time it helps work from the same source feel recognizable.

Our products don’t need to look identical. They just need enough shared cues to feel like they belong to the same family.

And remember what the research told us: familiarity is one of the things people use to decide whether to trust what they’re looking at.

People tend to trust what they already know.

Over time, the first impression shifts from, “What is this?” to, “I recognize this. I know who made it.”

Brand Recognition: Color

Color is one of the quickest ways to build that recognition.

Look at these examples from The Economist. They cover different topics, different chart types, but they all use the same shades of blue, turquoise, and red.

That consistency gives the work a recognizable visual signature.

The goal isn’t to force the same colors into every chart. Color still has to serve the data.

The value is having a familiar palette to start from, so we’re not reinventing these decisions every time.

Brand Recognition: Font

Typography can carry that recognition too.

The New York Times is a great example. Their visualizations use all kinds of palettes, but that recurring Cheltenham title font holds the work together.

One typeface, with different weights and styles, gives them variety and hierarchy across titles, labels, and supporting text.

So brand recognition doesn’t mean every product looks the same. It means they’re speaking with the same voice.

Brand.yml File

meta:
  name: shelbylevel
  link: https://www.shelbylevel.org

color:
  palette:
    deep-jade: "#254D56"
    faded-jade: "#45767a"
    gulfstream: "#7fa6ad"
    edgewater: "#d3dfdd"
    storm-cloud: "#64635E"
    plum-crazy: "#59224A"
  
  foreground: deep-jade
  background: edgewater
  primary: faded-jade
  secondary: gulfstream
  success: "#b2c5b4"
  warning: "#B8AEA8"
  danger: plum-crazy
  light: "#ecf1f2"
  dark: storm-cloud        

typography:
  fonts:
    - family: "Lato"
      source: google
      weight: [200, 300, 400, 600]
    - family: "Nunito Sans"
      source: google
      weight: [400, 600]
  
  base:
    family: "Lato"
    size: "1rem"
    weight: 300
    line-height: 1.6
  
  headings:
    family: "Nunito Sans"
    weight: 600
    line-height: 1.2
    color: primary

So here’s what that looks like in practice. This is my brand.yml.

The color section isn’t just a list of hex codes. Each color gets a job: text, backgrounds, primary elements, and other design elements.

The typography section works the same way. Fonts, weights, sizing, and spacing for body text and headings.

Now my brand doesn’t depend on me remembering every design decision. It’s written down in a format my tools can actually use.

From a theme to a visual identity

Let’s watch that happen.

The default document is usable, but it doesn’t say much about who made it.

Add a Bootswatch theme, and we’re already a lot of the way there.

Add brand.yml on top, and now it doesn’t just look polished. It looks like ours.

One Brand Across Multiple Products

Here is the payoff.

Different products, different purposes, different content. But they clearly belong to the same family.

And when the palette or typography needs to change, I change it in one place.

That’s better for my audience, but honestly, it’s better for me too.

I spend less time restyling and more time working on the content.

Styling Becomes a System

Let’s put all of that together.

At our foundation, we have Bootstrap. It gives our product structure and working components.

Then apply a Bootswatch theme for a polished look without any design effort.

Lastly add brand.yml to create the visual identity that make it recognizable as ours.

And on top of all that, there’s still room to polish the details that are specific to this product and this audience.

Styling doesn’t have to be one huge task looming at the end of your projects.

It can be a series of manageable layers, and we get to choose how many we need.

Remember This One?

Before I finish, let’s go back to the website from the beginning.

Some of you may have recognized it. This is DistroWatch, a widely used and trusted source of information about Linux distributions for over 25 years.

So now that you know what it is, how many of you feel a little more comfortable clicking something?

Nothing on the screen has changed. What changed was what you knew about the source.

This is why I’m not saying good styling equals trustworthiness. DistroWatch didn’t become trustworthy because I explained what it was.

The first impression created hesitation, and familiarity with the source gave you additional information to reconsider that impression.

Those two systems are working together, not independently.

But most of our products don’t come with 25 years of recognition behind them.

We can’t put up a questionable-looking dashboard and say, “Don’t worry, people already know we’re credible.”

Our work has to show, as quickly as possible, that it was made intentionally and that it’s worth a closer look. Because…

First impressions are not the whole story

But they can determine whether someone stays long enough to learn the rest

Talk Materials and Additional Resources

shelbylevel.org/talks/first-impressions-matter

github.com/shelbylevel

linkedin.com/in/shelbylevel

slevel20@gmail.com