Zero State Dashboard

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

Overview

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.

Preview

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.

Before

After: Desktop

After: Mobile

Design

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