A clearer path from finding to fix

Oxeye is a security platform for cloud applications. It shows how vulnerabilities in code connect to running services and whether an attacker could reach them.

As Oxeye’s product designer, I led the design of the compliance heatmap, attack-map sidebar, and scan workflow. I built the shared design system and reviewed the implementation with engineers.

Security teams could see which apps needed attention, investigate an attack path without leaving the issues list, and follow a scan while they worked. Reusable components and documented interaction states gave engineers a consistent way to build those flows.

Product design · Interaction design · Design system Acquired by GitLab ↗

Oxeye compliance heatmap and vulnerability management screens

What is Oxeye?

Oxeye helps security and engineering teams work out which software vulnerabilities need attention first. It shows how an issue in code connects to the running application and whether an attacker could reach it.

See how the layers connect
  1. Connect isolated findings into one route from weakness to impact.
  2. Rank by exploitability and business exposure, not by raw count.
  3. Turn findings into tasks engineering teams can act on.

From issue to investigation

I designed how users move from the issues list into an investigation, check the risk, and decide what to do next. I built shared components so the same patterns worked across the dashboard, packages, and attack paths.

Oxeye issue list, attack map, and security factors shown in overlapping product screens
From finding to exposure. The issues list, attack path, and security factors shown together. Figma mockup ↗
Oxeye code issues list filtered by application
Issues. Every finding in one list, filtered by application, with status, service and last-seen context.
Issue detail opened over the list, showing the attack path
Attack path. Opening an issue shows how it travels from the entry point to the vulnerable service.
Packages view with CVE detail panel
Packages. Vulnerable open-source packages with the fix, owner and ticket in one panel.
Oxeye dashboard and code issues screens
Dashboard. Open risk at a glance, then straight into the issues behind it.
Attack path map with security factors on hover
Security factors. Hover a node to see what makes it exploitable.
CVE detail panel with responsibility and ticket fields
CVE detail. Severity, risk factors, file path and owner, ready for a ticket.

Compliance at a glance

Users had to filter and open several screens to understand where compliance issues were concentrated. I designed one overview so they could spot the areas needing attention before opening the details.

Heatmap of applications by compliance framework, with a hover tooltip
The delivered feature. Applications × frameworks in one view. Color reveals where attention is needed; a hover explains the affected requirements.

Why a heatmap?

A heatmap fit the question: which apps have issues, and against which standards? Rows and columns make that comparison easy. Color shows severity, counts show how many issues there are, and hover reveals the requirements behind them.

Users could start with the full picture and choose where to investigate, rather than build that picture through filters.

Explore the design studies and supporting screens

Complexity

GDPR, HIPAA and PCI DSS all tracked at once.

Visibility

No at-a-glance status across frameworks.

Prioritization

Critical issues buried in healthy data.

Usability

Competitor tools were dense and hard to learn.

Start with the application.

The tools I reviewed started with a standard. Developers often needed to start with their application. I connected the two so they could see which code issues affected which requirements.

Payment app · detected

SQL injection · CriticalXSS · MediumWeak cipher · Low

Compliance impact

PCI DSS 6.5.1GDPR Art. 32SOC 2 CC6.1

Three ways to show the same information.

Tree view

Clear hierarchy, detailed drill-down

No high-level overview

Dashboard

Familiar, good for reporting

Weak cross-framework view, scales poorly

Heatmap Selected pattern

Instant pattern recognition across frameworks

Needs a clear color legend

Keep scan progress clear

I designed the dynamic application security testing (DAST) flow from starting a scan to opening its findings. I mapped the loading, running, and result states and reviewed them with engineering during implementation.

The scan action changes to a running state in the same place. The radar icon animates to show activity, and the finding count links to the results. I used motion to make those changes noticeable while users continued working.

Oxeye’s DAST empty state alongside an issues view with no matching vulnerabilities
Before the first scan. The empty state points users to the application in Inventory to start a scan. Figma mockup ↗

Scan interaction decisions

01 / Start a scanLaunch DAST from the application row.
  1. Reveal actions on hover

    The row menu appears on hover, keeping the applications list easy to scan.

  1. Put Run DAST first

    The scan action leads the menu. Its radar icon returns in the running state.

  2. Raise priority in place

    Mark as critical lets users flag an application from the list.

Watch the recording
02 / Follow the scanKeep status and results in the app header.
  1. Show observer connection

    Users can check the connection beside the scan status.

  2. Replace the action with status

    The radar animates beside “Running” in the same place the scan started.

  1. Link to live findings

    The count updates as findings arrive and opens the filtered issues list.

Watch the recording

A system engineering can build

I documented the screens, interactions, loading states, and edge cases, then reviewed the implementation with engineering. The handoff pointed to shared components so the team had one reference for how they should behave.

Across all three features, I kept asking the same questions: what does the user need now, what can wait until they interact, and what should they do next?

Handoff board for the requirement list, with review labels
Review board: hover, open and empty states for the requirement list.
View handoff boards and component specifications

One design system behind every handoff

I organized colors, type, spacing, and components in one library. Handoffs reused those components and their states, with extra notes for new behavior or exceptions.

View the product UI system

Color

  • Deep navy#020058
  • Primary blue#103AA0
  • Blue#284EA9
  • Accent pink#F63BA2
  • Purple 200#D9DAFC
  • Blue 100#F3F5FA

Typography

Aa

Inter for everything. Light weights for headings, regular for body.

Oxeye line icon set on a 24 pixel grid
Icons: 24px grid, 1.5px line.
Public product context

In Oxeye’s published customer story, Inspectiv’s CISO described spending less time assessing issues manually. That feedback is about the wider platform, not a result measured for these individual features.

Read Oxeye’s Inspectiv customer story ↗

GitLab’s acquisition announcement describes the value of Oxeye’s runtime context and code-to-cloud tracing.

Read GitLab’s product announcement ↗

Across the compliance heatmap, attack paths, and scan status, I designed each view to answer a different question: where should I look, how did this happen, and what’s happening now? I documented the interaction states and reusable components so engineering could carry those decisions into the product.

Open original