Design kit
Color
- #fafafabackground
- #0a0a0atext
- #737373
- #104e64
- #ffb900accent
- #009689
Type
- System fontRegular · Medium · SemiBold
Overview
An internal analytics dashboard for the CEO and COO of Wynn Innovations, a wholesale supplier that sells goods of all kinds.
It gives the leadership team one place to check how the business is doing, instead of piecing it together from several tools.
The problem
The data the business ran on was scattered across Google Sheets, Notion tables and plain tables.
With no single view, the key numbers were hard to measure, and harder still to compare from one month to the next.
Design
I designed one dashboard that brings everything together, with a tab for each question the leadership team asks.
It updates every week, so they always read current numbers without anyone rebuilding a report by hand.
Build
I covered the whole path: connecting to their data, cleaning it, then designing and building the dashboard.
It's built in React and TypeScript with shadcn/ui, and the weekly data sync runs on GitHub Actions.
What I built
- Orders, filterable by year and month
- Order request volume over time
- Employee order fulfilment: who completed which orders
- A weekly sync from Google Sheets and Notion
Key decisions
A distinct colour for every line
Each series in a line graph gets its own bright, clearly different colour, so stakeholders can tell items apart at first glance instead of decoding a legend.
Keep the tools they already use
Rather than move their data into a new system, I connected the dashboard to Google Sheets and Notion. The team keeps working the way they're comfortable with, and shadcn/ui's ready-made interactive charts kept the build focused on the data.
Simple tabs, one view each
Orders, request volume and fulfilment each sit behind their own tab on the right, so the dashboard answers one question at a time.
Outcome
Leadership can now see which employees are performing, and which months the business does well and which it doesn't.