Data visualization for Laurel Signal—a work intelligence platform

I joined Laurel AI to explore one question above all: for those of us instinctively suspicious of anything that chips away at our privacy, what would it actually take to have a change of heart? Professional-services firms run on time. Traditionally, people reconstruct their day on a timesheet, and that guesswork becomes the firm's record of what got done. Laurel had built an agent that captures the work automatically and hands people a pre-filled timesheet at the end of the day, allowing lawyers and accountants to save time every day having to do that by hand.

That was the thought that led us to imagine a complementary product: one that offered insight into how a person worked, not just what they worked on. If those insights were compelling enough to change someone's behavior for the better (help them hit their targets, make a case for promotion, and so on) then it might be a trade even a skeptic would welcome.

And so for us as a small team, and for me personally, I cared deeply about staying true to what the company saw as its fundamental mission:

How do we ensure our honesty here about genuinely wanting to “give time back” to people comes through?

My role was designing the product's information architecture, and the data visualizations at the heart of it: sketching, then designing, then building them as part of a new design system and lovable application with appeal across a firm's various ranks.

0 – 1 Designed from a blank canvas to a shipped product

12+ Bespoke views, unified into one design system

3 Persona-tuned designs for firm-leaders, managers, and individuals

A few examples of craft

Some publicly shared screenshots of the product, and some commentary about the visualizations in them.

True Time

Drawing the gap instead of asking the brain to compute it.

A number that matters a lot to a firm leader isn't hours captured or hours submitted, it's the write-down that occurs as a result of the difference between the two numbers. Real work that quietly never makes it onto a bill. When that difference is the crux of the story, the visual encoding we choose ought to make it obvious how big or small these differences are, so that days with long red lines clearly indicate work that has gone unbilled.

Why a double lollipop, not two bars?: Side-by-side bars force the eye to estimate a difference from the negative space between their tops. It's a subtraction the brain has to compute, slowly and imprecisely. The double lollipop encodes that difference directly as one red segment, so the quantity you actually care about is drawn on the page rather than inferred.

Profitability Risks

At-risk projects at a glance.

A first principle in information architecture is to present information as summary first, detail second. The Profitability Risks view collapses a firm's projects into a beeswarm, so a leader can see at a glance which projects warrant attention and how the whole book is distributed by billed hours. Headline metrics at the top carry sparklines for the time-series behind them. The unit here is deliberately the project, not the person: each dot is an engagement at risk, and the view stops short of ranking the individuals staffed on it, so it points a leader at problems to fix rather than people to watch.

The key decision: A beeswarm trades a precise y-axis for shape. You give up reading an exact value off an axis, but you gain an instant read on where the risk clusters, which is the decision this view exists to support. Keeping the encoding at the project level is what keeps it a tool for managing work, not one for scrutinizing individuals.

Monthly Benchmark

Comparison without a leaderboard.

Benchmarking should give a person a reason to become better, not make them feel inadequate or paranoid about it being used for micromanaging. This figure helps a person know if they're on track rather than who's winning. Each month pairs a person against an index from their peer group. Colors remain consistent across figures, with red encoding the more salient data point, and black encoding the secondary one.

The key decision: Using pairs of bars over time satisfies the goal of optimizing for readability and establishing a clear connection between a metric and an outcome (profitability). It avoids being needlessly clever with novel approaches.

Principles

01

Earn every exception

Default to the most familiar encoding that answers the question. We earned exactly one exception, the double lollipop in True Time, because there the difference was the whole story.

02

Color carries meaning

Red always marked the salient or at-risk value; black, the reference. One legend grammar and one set of interactions, reused across all 12+ views.

03

Summary, then detail

Lead with the headline a leader needs, then keep the detail one scroll away. The beeswarm and sparkline patterns came straight out of this.