Brad Sarro | Prowler

Designing Insightful Cloud Security Tools For DevOps Engineers

Problem:

Prowler's first pass in the SaaS market was a result of design deliverables that lacked user empathy and full of designer bias.

Approach:

A rapid 5 week redesign I strategically structured my approach to include user discovery, validation, and systemic design delivery. The result is an impactful cloud security solution where usable insights drive user actions.

Just Keep Swimming

With only 5 weeks to deliver, I maximized impact and minimized design debt by working in an atomic framework, publishing iterative changes quickly across all feature works.

Week 1

Onboarding | User Discovery | Design Setup

Onboarding With A Product Audit

To quickly onboard into Prowler's product and problem space, I conducted a thorough product audit, prioritizing UX risks to tackle and formulate my user discovery questions.

I could see Prowler was a victim of outdated UI elements and dead-end navigation. This pointed to a high risk of frustrated users, trapped in siloed workflows.

Discovery From Conversations

I conducted user discovery workshops by having an open conversation with existing teams in Prowler's sales pipeline (Verica, Okta, and Fanatics).

Talking with these teams gave me a better understanding to the user's desired journey, jobs to be done, and the information architecture of findings data.

Streamlined With A Design System

With such limited time, I wanted to work fast and not break things.

I used Station UI as the foundation to Prowler's atomic catalog. This streamlined an established design system of common UI components, all customized for a unique Prowler identity in just under 2 days.

Weeks 2-3

Feature Design | Data Visualization | Rapid Validation

A Core Product Value

As its SaaS value, Prowler scans cloud environments and shows cloud threats to users. Each finding includes a lot of information, unmanageable in a traditional table view that requires lengthy horizontal scrolling.

I redesigned this feature to display identifiable data on the table's shorthand, and allow rows to expand and reveal all contextual information for each finding.

Validation by UAT proved this was a thoughtful solution for users. They voiced their excitement for an easy way to find actionable risks and a cleaner layout that visually simplified the full dataset without horizontal scrolls.

Diving Into Big Datasets

Each cloud scan provides information that show DevOp teams intuitive views into their cloud security.

I designed all charting widgets to show a unique angle on the dataset with hover-targets that display pop-out context without overwhelming the overall graph.

To make deep dives easier, I mapped interactive pathway paradigms to a filtered cohort on the Findings page. Pressing on general data points unlocked a deep dive for actionable outcomes while reducing implementation effort by encorporating existing features.

Merging Usability And Data Visualization

Real data differs from mockup examples. I introduced a flexible implementation strategy that reimagined their approach to interactive charts. Instead of literal displays of data, charts convey the data's meaning while allowing accessible user interactions.

For example, to give users a reasonable sized interactive target, pie charts maintain a minimum 5% slice size. At the opposite end, a 48% slice is shown as 45% to convey the meaning 'less than half'.

Weeks 4-5

Dashboards | Development Support | Design Handoff

Dashboards Should Drive Action

Towards the end of this engagement, I wanted to leverage the design system to help Prowler achieve many of their dashboard needs.

Simple Status by Service shows users all running cloud services, easily identifiable by their provider icon.

With accessibility in mind, failing service cards have a bold 6px red outline for color vision deficiency standards. This outline allows users to easily identify failing services regardless of their color perception.

Hey Designers, Always Document

Clear design documentation sets teams up for long term success and should evolve with growth.

I dedicated a documentation time block at the end of each day to update new design commitments and iterative changes. As pivots realistically happen, it is easier to capture and publish global updates across all existing feature work.

As I hit the dusty trail, they were able to own a complete design documentation all captured in Figma.