[001] Problem
Users were looking at their data but had no way to actually explore it.
Security teams rely on Cymulate's dashboards to understand their risk posture and share results with stakeholders. But the widgets were outdated. You couldn't click on anything, you couldn't resize charts, and building a new widget meant filling out a long confusing form.
[002] Constraints
Seven chart types in a data dense UI.
I had to support seven different chart types, each with its own interaction logic, all inside an existing React and TypeScript codebase. And it had to ship gradually without breaking anyone's saved dashboards.
[003] Insight
One click, multiple choices.
Users needed every widget to be a starting point. I looked at how Mixpanel, Grafana, and Basedash handle this and the pattern was clear: the best dashboards let you click on chart elements to filter, not just look at them. One click could narrow the view or send you to a more detaild page.
[004] Strategy
Four improvements that change the whole experience when they work together.
I picked four improvements that each stand on their own but get better together:
• Isolate mode for line charts.
• Click to filter on all widgets.
• Flexible resizing.
• A new creation flow.
I designed and built all of it. Figma to React to Storybook and finaly to Production. No handoff, no gap between what was designed and what shipped.
[005] Isolate
Trace a single trend without losing the full dataset.
Line charts with five or more series are a mess. Everything overlaps and you can't follow any single trend. Now you can click a legend item to isolate that line. Hover on a legend item to preview the isolation first. Click again to bring everything back. Simple, but it completely changes how readable these charts are.
[006] Filter
Widgets went from something you read to something you explore.
Every chart element is now clickable. Tap a pie slice, a bar, or a point in the line chart and it filters the entire page. The filterbar updates so you can see what's active. The widgets went from something you read to something you explore.
See a spike? Click it. You're already drilling in.
[007] Resize
Resize fluidly by dragging corners, giving users full control over their dashboards.
Widgets always had basic sizing options, but they were limited. Now you grab any widget's corner and drag to resize it freely, both horizontally and vertically. The grid adapts in real time as you pull. You're not picking from preset sizes anymore, you're shaping the layout exactly how you want it.
A trend chart that needs room to breathe? Stretch it.
A bar chart that just shows one stat? Shrink it down.
The layout becomes yours.
[008] Creation
See exactly what you'll get before you commit.
The old creation wizard had three steps but none of them felt connected. The preview showed mock data so you never really knew what you were building. It was confusing and there wasn't enough guidance along the way.
Now it's one seamless flow where everything is connected. The preview shows your real data and updates live as you make changes. Clear suggestions and instructions guide you through each decision. You actually see what you're getting before you save it.
[009] Execution
Designed in Figma, then built it all in React.
I designed every state in Figma: hover, click, filter, isolated, selected, across all seven chart types. Then I built every component, the dashboard grid, and the creation flow myself in React with TypeScript.
[010] Validation
Storybook as living spec, not static mockups.
Every feature went through Storybook interaction tests and stakeholder walkthroughs before merging. Product, QA, and engineering reviewed the actual components that would ship, not static mockups. I tested isolate mode and click to filter against real assessment data with thousands of data points to make sure tooltips, chips, and transitions all held up.
[011] Outcome
Dashboards that finally feel like exploration tools.
Four new interaction patterns shipped as production components that I designed and built. Owning the full pipeline meant no handoff delays and no design drift. The Storybook library is now the single source of truth for all widget types, which makes adding new ones significantly faster. The feedback so far has been that the dashboards finally feel like the exploration tool the product always needed.