Stealth Startup

Product Design
project-hero

OVERVIEW

Cloud-based IT security product. I re-designed the beta product, created new data visualizations, and added a notifications section. (Company name and other proprietary information withheld.)

ROLES

Wireframing
Visual Design
Prototyping
Copywriting

DETAIL

Topology

section-detail-1
Opportunity

How do we show connections between components in a way that can be seen no matter where its connected component is?

Goals
  • Create a visualization that works no matter which component is selected
  • Increase visibility of proprietary security setting for each component
  • Make it easy to understand and edit for improved security
Pain Points

Visually displaying connections between components was a challenge. Not only did we need to show a connection but also whether the connection, in relation to the selected component, was either an inbound or an outbound connection.

section-detail-1

It was important to display as much data as possible for the topology visualization.

section-detail-1

An early diagram helped solve the challenge of dynamically displaying connections between components.

An early prototype shows a sample connection animation.

DETAIL

Notifications

section-detail-1
Opportunity

How do we display all issues in one place? How do we make notifications easily actionable?

Goals
  • Simplify user actions
  • Easily filter and sort items
Pain Points

The sheer amount of data required to display was a challenge to organize. Including editability within a notification further increased complexity.

section-detail-1

The notification card had to display a lot of data and clearly show 1) the component status and 2) the component path and service affected.

Deprecated UI shows the comments toggle. Here, a user can comment on any action they may have taken.

DETAIL

Icons

section-detail-1

Icons represent the different security settings.

section-detail-1

Some explorations and work-in-progress icons.