Case Study

Web Application: Observable Networks

I collaborated with a visual designer to bring richer data displays and more interactivity to the dashboard of Observable Networks’ principal product—network monitoring software that alerts users to potentially malicious activity.

Visual Design Concept

Visual design concept for the redesigned dashboard

My Part
  • UX Lead
  • Project planning
  • Peer review
  • Client status meetings & presentations
  • User Interview Planning & Facilitation
  • Workshop Planning & Facilitation
  • Wireframes & Data Visualization Concepts
  • Developer Collaboration
The Challenge

Observable Networks’ SaaS solution provides a one-stop look at network activity for clients, including alerts about unusual or questionable activity that may require action before turning into a serious threat. The software collects observations about clients’ network activity 24/7, but the dashboard display was not doing a good enough job of communicating this continuous analysis. In other words, it’s a cutting-edge network security solution that didn’t look like one.

Our task was to redesign the Observable dashboard experience to better communicate the power and value of the software. We needed to create an experience that would support common user tasks, as well as sales demonstrations, with dynamic data visualizations and actionable notifications for users of all levels.

The Story

To begin, we conducted several interviews with key leadership and technology stakeholders from Observable Networks. We learned about the rationale for the project, data visualization experiments on their side that hadn’t yet seen the light of day, and expectations around the business objectives for the project. Although this dashboard redesign had to support existing users, the goal was really to grow the user base by supporting the sales process.

We broke that goal down into several sub-goals the guided our design effort. The new design had to be visually eye-catching, and provide some dynamic animation even when not being interacted with. It also had to communicate scale by showing local as well as global traffic (as attacks may come from all over the world), and allow the user to scale up and down in their data (as they may have sub-networks, or want to zoom in on individual nodes within networks).

Our discovery effort also included several interviews with Observable users at a variety of businesses for whom security is a top priority (e.g. hospitals whose medical devices occupy space on the network). Although the dashboard would end up looking substantially different in the future, we knew that we couldn’t disrupt any of the things that loyal users loved about the current iteration. We collected information about common tasks and use cases, and validated the business direction communicated to us by Observable stakeholders.

Discovery culminated with a day-long, in-person sketching session where Observable stakeholders traveled to the Nerdery office. We reviewed some initial wireframe sketches of data displays, and brainstormed other options for data visualization based on the type and scale of data that the system requirements specified. We ended up with a Plan A: a tree map concept, with the polygons coded by size (amount of network activity) and color (amount and severity of alerts).

Wireframe Concept

Early treemap wireframe concept for dashboard

After estimates were finalized, however, this solution was found to exceed the allotted budget for development. The collaboration was largely internal from then on—we had additional sketching sessions with lead developers to find a solution that fit within budget and achieved all of the goals that our client outlined from the beginning. Eventually, we arrived at a winning solution: a chord diagram, with animations along the chords to show current activity between networks and/or nodes.

The team’s visual designer brought this solution to life with a modern look and feel, even prototyping some animations with After Effects to sell the solution to the client before development work could begin.

The Results

Members of the project team on both sides were skeptical that a solution could fit near budget and provide the “wow” factor that Observable needed to take their single-product business to the next level. That solution is now implemented and in testing.

❮ Back to projects

How can I help with your project?

Send me an email.

Connect on LinkedIn.

Follow me on Twitter.