Customizable KPI Dashboard Builder with Drag-and-Drop Widgets

Context & My Role

As the lead designer on HikeOn's AI-native eCommerce ERP, one of the most consistent pieces of feedback from users across roles was a version of the same complaint: "I can't see what I need to see without building a custom report." Operations managers, procurement leads, and leadership teams all had different information needs — and the existing static dashboard served none of them well.

This project was the design and delivery of a fully customizable KPI dashboard builder — a drag-and-drop canvas where users create, configure, and share real-time analytics views tailored to their role and priorities.

The Challenge

Static reports failed to adapt. A procurement lead needs margin alerts and supplier performance. An operations manager needs order velocity and fulfilment exceptions. A leadership team needs a summary view across all of the above. Building separate dashboards for each role wasn't scalable — and a single default dashboard that tried to serve everyone served no one.

The underlying data existed in the ERP. The problem was surfacing the right slice of it, for the right person, at the right time — without requiring a data analyst or a support ticket.

"The goal wasn't more data on screen. It was making the right data obvious — so decisions happen at the dashboard, not after an export."

Process & AI Initiative

Started with a 3-session research sprint: one session with each primary user role (operations, procurement, leadership). Mapped the 5–7 decisions each role makes daily and identified the data inputs those decisions require.

The AI layer had two jobs: suggest optimal widget combinations based on user role and recent activity, and surface anomalies and forecasts directly within widgets rather than requiring users to dig into underlying data.

Key design process steps

• Mapped decision-to-data relationships for each user role
• Benchmarked drag-and-drop patterns in analytics tools (Notion, Metabase, Linear) and identified what works at enterprise data density
• Extended the 250-component system with new widget atoms, layout containers, and real-time preview states — all governed by the same token architecture
• Prototyped the drag-and-drop canvas in Figma with live component states
• Tested widget configuration flows with 3 users before building

Key Solutions

A drag-and-drop dashboard canvas with 20+ pre-built KPI widgets covering order velocity, inventory health, margin trends, supplier performance, fulfilment exceptions, and demand forecasting. Each widget is data-connected and updates in real time.

One-click "Create Dashboard" flow with auto-layout — the system places widgets in a sensible default arrangement based on the selected role, which users then customise. Dashboards are shareable via link with view-only permissions.

The AI insights layer surfaces anomalies and recommendations directly inside widgets: a margin alert widget might show "3 SKUs below threshold — view suggested pricing adjustments" as an inline action, not a separate notification. Forecasts appear as a secondary data layer within the relevant widget.

Impact

Teams now create and iterate on tailored dashboards in minutes rather than waiting days for custom reports. Role-specific dashboard templates reduced onboarding time for new users significantly — they start with a useful view on day one rather than a blank canvas.

The AI insights layer is actively used: procurement leads described the inline anomaly surfacing as "the thing that catches what I would have missed." The drag-and-drop system is live in production and governed by the 250-component design system.

What I Learned

The hardest part of this project wasn't the drag-and-drop interaction — that pattern is well-established. The hard part was deciding what a widget should show by default before a user has configured anything. Getting that default state right required more research than the interaction design.

I also learned that the AI recommendation layer is most valuable when it's embedded in the widget rather than surfaced as a separate notification. Users don't go looking for insights — the insights need to be where the data already is.