Zero State Dashboard
Helping reduce customer churn by creating a more useful first-time dashboard experience for a new client at Byteboard.
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
Tags 🏷️
