Task management dashboard in dark and light
A dashboard that says what changed since yesterday.
- Role
- UI designer, solo
- Product
- Task management web app
- Scope
- Desktop web dashboard
Results
- 4 counterstotal, completed, in progress and overdue, each with its change since yesterday
- 5 fieldsin one task row: title, project, assignee, deadline and state, without wrapping
- 2 themesdark and light, drawn as two designs rather than one inverted
A desktop dashboard for a task management web app, drawn at 1440 and built on auto layout. I designed it solo: a sidebar that holds the whole product, four counters that show what changed since yesterday, and a task list with search, sorting and filters. The screen is finished in dark and light, each drawn rather than inverted.
Introduction
A dashboard nobody reads is just a header.
Most task dashboards open with a row of totals that tells the person nothing they did not already know, then a list that makes them read every row to find the one that matters. The screen had to answer two questions before anything is clicked: what moved since yesterday, and what is late.
Constraints
- One desktop width, 1440, with a sidebar that holds the whole product
- A list row has to carry five things at once: title, project, person, deadline and state
- Two themes, and both of them have to look designed rather than inverted
- Built on auto layout, so the row survives a longer title and a longer project name
The screen
The top row reads as movement, not totals.
A counter on its own is furniture: twenty-four tasks tells nobody anything. So each of the four carries its change since yesterday, and the row reads as movement. Under them the list does the actual work: search, sort by deadline, filter, and a row that fits title, project, person, date and state without wrapping.
- Each counter has its own colour and a ghost glyph behind it
- Deadlines are written the way people say them: the date, and Tomorrow next to it
- A finished task dims instead of disappearing, so the list keeps its history without shouting about it
Key decisions and their cost
Every counter carries a delta
I put the change since yesterday under each of the four labels: total, completed, in progress and overdue. The number is the state, the delta is the news, and overdue is the one card where a minus is good.
Trade-off A day over day delta means yesterday has to be stored and compared, a data requirement the design creates.
State twice: as a chip and as weight
I show a task's state as a coloured chip and, once it is done, by dimming the whole row, so the list can be scanned for what is unfinished without reading a single word.
Trade-off Dimming deliberately makes completed work harder to read, which is wrong for anyone reviewing what was finished rather than what is left.
Deadlines say Tomorrow next to the date
I wrote each deadline as the date with the human name beside it, Jun 15 and Tomorrow, because the second one decides whether the task is opened now.
Trade-off Relative labels go stale: they are correct only if the screen recalculates them, and wrong in a screenshot the next morning.
The light theme is redrawn, not inverted
I drew the light version separately instead of inverting the dark one. The dark leans on glow and large ghost glyphs behind the counters; the light replaces both with tinted cards and a soft shadow, because the same trick does not survive the swap.
Trade-off Two drawings mean two things to maintain, and a component that changes in one has to be changed in the other by hand.
Outcome
Outcome
One screen, finished in both themes and built so the rows hold up when the content grows.
What I learned
- A counter earns its place only when it carries a direction. Without the delta it is a number the person already knew.
- Encoding state twice, in colour and in weight, is what makes a list scannable. One of the two is always the one that works on a bad screen.
- Inverting a dark theme never produces the light one. Glow and ghost shapes have no light equivalent and have to be replaced, not flipped.
