Click anywhere or press Esc to close
Turning dense security data into a customizable dashboard — so teams spot threats fast, all in one place.
Built for an industry-leading cybersecurity company. Some details are withheld for confidentiality.
The product is a cybersecurity management platform built to reduce security risk. The goal of this work was to create a custom dashboard with data visualizations that let users detect threats quickly, without leaving the tool.
I joined a team of three designers. Beyond execution, I took ownership of the data-visualization system — building a reusable chart library and the documentation to keep it consistent across every development team in the company.
Two efforts, one outcome: a customizable dashboard, and the data-viz system that powers it.
Build a data-viz library usable across every development team in the company.
Also design customizable dashboards built around those data visualizations.
Priorities shifted mid-stream — the team was asked to deliver the dashboard experience alongside the library.
The visuals in the product were unclear, so customers exported their data into other systems just to make sense of it.
Detecting a threat meant sifting through information and rebuilding it on outside resources. It was slow, fragmented, and easy to get wrong.
Customers needed a way to dig deeper into the data and keep it all in one place — with views they could customize to the threats they cared about.
To set a baseline, our team ran a competitive analysis of five direct competitors. We evaluated each on customization, data access, performance, ease of comprehension, and the structure of their information.
I also looked beyond our space for data visualization specifically, and found that IBM had built a notably robust library — a useful north star for the system I'd go on to create.
Understand the field, then design a dashboard that's genuinely better to use.
We created several iterations of wireframes, chasing every way we could to add value through customizability. I led the wireframes for Non-Edit Mode while another designer explored Edit Mode. Three questions drove the exploration:
How do you create a dashboard?
How do you add, edit, and move widgets?
How do you edit the layout of the dashboard itself?
Edit Mode. The entire dashboard is editable, with a toolbar to help you add and change elements directly on the canvas.
Non-Edit Mode. Editing happens through a dropdown — you add or change one element at a time, keeping the interface calm.
Working from the product requirements, we spent several weeks on the interaction details of custom dashboards. The most challenging piece was determining how the data visualizations — the widgets — actually worked on the dashboard. A few highlights:
The development team built responsiveness on flexbox. Rather than juggling widgets across breakpoints, we offered three layout options that each fill the full width of the viewport — predictable for users, simpler for engineering.
For MVP, the Add Widget dialog only included out-of-the-box widgets. But we explored how it could expand: flows for creating custom widgets, favoriting, and filtering once the list grew long — plus simpler imagery to reduce cognitive load.
Widget movement turned out to be the trickiest discussion on the team — describing how widgets should reflow created confusion. To cut through it, I made low-fidelity wireframes demonstrating exactly how widgets moved and appeared when added. Each widget was clearly labeled with a letter and color, so no one lost the thread.
While the dashboard work was underway, I took the initiative to build out a data-viz library and its supporting documentation. The work spanned 16 chart types in the Figma library — designing tooltips, hover states, and drill-down views, defining chart responsiveness and animation, and producing dark-mode versions of both the charts and the custom dashboards.
I wrote detailed documentation for each chart in the larger design system: use cases, best practices, do's and don'ts, anatomy, hover states, tooltip and legend usage, interactivity, and responsiveness.
I also documented PDF versions of the charts — adding tables and alternative legends so the data stays accessible in a non-digital format.
Once designs were finalized, they were written into user stories that the team groomed once a week. I worked closely with development in refinement sessions, clarifying the complexities of the charts and graphs so nothing got lost in translation.
After development, QA tested the implementation against the designs and reached out whenever they found an issue — keeping the shipped product faithful to the system.
08 — Results
Within seven months the team shipped an MVP custom dashboard and data-viz library — letting users detect threats quickly, the problem that started it all.
It took time to reach the product — by launch, the team had rolled off.
But the experience is up and running today, a valuable part of the company's offering. We also handed off post-MVP flows exploring what custom dashboards could become, along with smaller updates the company could ship along the way.