×

InfoSec Dashboard

Finding the best way to visualize complex data patterns for an everyday user.

CI Security

  • D3.js
  • Data Visualization
  • Design

The amount of data that needed to be distilled into a user view was quite deep, and was handed to me in large JSON files, which then needed to be manipulated in order to show the relevant information. And, my first task was to design it.

Navigation

Introduction

I was initially hired by CI Security (Critical Informatics, at the time) as a contractor to design the first version of their web-based dashboard for clients to view. In the world of cybersecurity, most of the work that happens is behind the scenes and hard to visualize. Things like analysts monitoring packet data, investigating anomalies, and machines that ingest terabytes of data per month.

The lack of a portal creates a disparity between the client and the company. A communication issue can arise quickly. Conversely, the clients mostly don't want to be digging through data and trying to understand it. That is what they pay us to do. How do you show enough data to not make the client concerned while showing enough data to understand our company is working on things behind-the-scenes?

Details

The goal was to move quickly, as the product was already in-flight and needed a dashboard ASAP. Because of this limitation, I worked very quickly through some wireframes after doing competitive research. There were many things that the stakeholders didn't want to be incorporated into the design that I needed to be aware of. After a couple of meetings with stakeholders, I began the process and pushed out a very early draft to get a feel for which dataset needed the most "weight."

Through that initial concept, we were able to pivot quickly to a more refined view. In the end, we ended up modifying the charts to take up less space, utilizing a 2-D heat map concept to show a relative "activity level." Again, a key aspect of this project was that we did not want to give so much data that the client felt they needed to investigate.

During this project, I also designed a little Kraken logo, just as a fun thing. The company liked it so much that several employees have it tattooed on their bodies somewhere.

Conclusion

After completing the rounds of design and feedback, I developed a prototype built with HTML, CSS3 (SCSS), and D3.js. The prototype used scrubbed production data in the JSON formatting that the final development environment would be gathering, which meant I first needed to learn the custom API response that our company was creating, then figuring out how to apply that large dataset to multiple graphs, charts, and tables in the final output.

The final product passed to development was a fully-functional front-end adjusted to work in the production environment.