Statistics Dashboard Built with AI

Built a complete statistics dashboard with AI in one day, then packaged the result as a developer-ready handover bundle with code, components, and documentation.

Problem

The existing statistics page relied on pie charts and unclear terminology, which made campaign outcomes harder to read. We had no dedicated UX/UI function in the company, so interaction design and usability decisions also sat with me. At the same time, implementation capacity was constrained, so a full redesign through the normal handover flow would be slow.

I needed a way to reduce delivery time without lowering clarity or implementation quality.

Approach

I used AI as a prototyping and coding partner, while I stayed responsible for scope, language, quality checks, and delivery decisions.

The workflow was:

Define user-facing outcomes and terminology rules
Iterate rapidly in browser on layout, chart behaviour, and interaction details
Pressure-test edge cases (for example, many UTM sources and PDF export behaviour)
Package the result for front-end implementation with explicit handover documentation

Comparison of traditional dashboard delivery workflow and AI-assisted PO-led workflow — I used a faster iteration loop while keeping product judgement and validation explicit.

Learnings

The key learning was that AI-assisted delivery works best when product ownership stays explicit: define constraints, validate behaviour, and document unresolved API questions clearly.

This project also confirmed that strong handover quality can be a direct time-saver for engineering, especially on UI-heavy work.

One thing that would have made the handover package significantly better: read access to the codebase. I had to ask developers which API endpoints were used to calculate the statistics, which added a round-trip and left some questions open. If I had been able to read the source code myself, without writing anything, I could have fed the actual endpoint logic and data shapes directly into the AI, producing a more accurate prototype and a tighter handover. The output would have required less back-and-forth from engineering to implement.

This is a broader point. Product owners with read access to the codebase can close a lot of the gap between what gets prototyped and what actually ships.

Prototype

I delivered a full handover package to reduce front-end implementation effort:

Standalone working prototype (statistics.html)
Angular component version (.ts, .html, .css)
Technical handoff documentation and terminology guidance
Change log and quick-start documentation

Package size was about 149 KB across 10 files, with both standalone and framework integration options.

Breakdown of the delivered handover package: standalone prototype, Angular option, and documentation — The deliverable was a handover bundle designed to reduce frontend setup time.

Open prototype in a new tab