Zero State Dashboard

Helping reduce customer churn by creating a more useful first-time dashboard experience for a new client at Byteboard.

Zero State Dashboard
  1. Overview
  2. Preview
  3. Before
  4. After: Desktop
  5. After: Mobile
  6. Design
  7. Project Management
  8. Other details


When a client joins the Byteboard platform the dashboard has little to no information until ~10 reports have been sent out.

The new zero state for the dashboard solves for this scenario, effectively proving value immediately and reducing customer churn.


Initially, the dashboard page wasn't broken down into any components so it was a super long file (1,000+ lines) and not very readable.

So I took the time to refactor all the code and make everything more modular and reusable which resulted in the main page being just 200 lines of code and able to support different states other than just the zero state (e.g. when we have certain pieces of data, we want to show different views).

I created several different reusable components like DashboardCard.tsx, DashboardColumn.tsx, DashboardFilterBar.tsx, etc.

Then each individual chart/card on the dashboard was built on top of the DashboardCard component so everything was standardized and followed our new design system standards.


After: Desktop

After: Mobile


Broke down each different state of the dashboard into its own component when working with our UX designer

Project Management

Used Asana to manage milestones, on track project updates and overall timeline planning.

Project started November 14th and launched on December 6th.

Other details

  • Wrote out technical spec in Notion
  • Used React, Redux & MUI Library for client platform

Subscribe to my newsletter Today

In my newsletter, I share personal and career learnings, advice, collaboration opportunities, and more.