01

Overview

01

Overview

2025

2025

Akamai is a company that makes the internet faster and safer by helping websites deliver content quickly while also protecting them from cyberattacks. 


Guardicore , which is now part of Akamai, focuses on stopping hackers from moving around inside company networks if they manage to get in, using a method called micro segmentation.

👉 Together, they cover both keeping the bad guys out and limiting the damage if they get in.

Akamai is a company that makes the internet faster and safer by helping websites deliver content quickly while also protecting them from cyberattacks. 


Guardicore , which is now part of Akamai, focuses on stopping hackers from moving around inside company networks if they manage to get in, using a method called micro segmentation.

👉 Together, they cover both keeping the bad guys out and limiting the damage if they get in.

Akamai is a company that makes the internet faster and safer by helping websites deliver content quickly while also protecting them from cyberattacks. 


Guardicore , which is now part of Akamai, focuses on stopping hackers from moving around inside company networks if they manage to get in, using a method called micro segmentation.

👉 Together, they cover both keeping the bad guys out and limiting the damage if they get in.

Context

Akamai’s Guardicore Segmentation “Reveal Map” visualizes how servers, devices, and applications communicate across an organization, helping security and IT teams monitor traffic and define segmentation policies that reduce lateral movement risk.

Akamai’s Guardicore Segmentation “Reveal Map” visualizes how servers, devices, and applications communicate across an organization, helping security and IT teams monitor traffic and define segmentation policies that reduce lateral movement risk.

Problem

The existing interface had grown cluttered and visually outdated, making it harder for teams to quickly understand dependencies, spot issues, and confidently configure policies in complex environments.​

The existing interface had grown cluttered and visually outdated, making it harder for teams to quickly understand dependencies, spot issues, and confidently configure policies in complex environments.​

Role

I led Reveal Map's redesign to let security/IT teams quickly explore traffic, grasp relationships, and act on insights. Teaming with Senior Designer Tzlil Raz, Director Noa Karni, and Tech Lead David Epshtein, I handled flow mapping, feature prioritization, and research-to-scalable UI translation.

I collaborated closely with Tzlil Raz (Senior Product Designer) and Noa Karni (Director of Product Design) to clarify our core goals and redesign the main UI screens of the Reveal Map. 


Together, we identified the main pain points that needed improvement, with valuable technical input from 

David Epshtein (Tech Lead). 


As a team, we planned and prioritized the key features that Tzlil and I focused on throughout the project.

01

Overview

01

Overview

The initiative of this project began with comprehensive research conducted by the original Akamai team, which provided us with insightful findings to guide our design process.

The initiative of this project began with comprehensive research conducted by the original Akamai team, which provided us with insightful findings to guide our design process.

The initiative of this project began with comprehensive research conducted by the original Akamai team, which provided us with insightful findings to guide our design process.

Visuals misaligned to brand

Visuals misaligned to brand

Visuals misaligned to brand

The map UI no longer reflected Akamai’s current visual language, which hurt both usability and perceived product quality.

The map UI no longer reflected Akamai’s current visual language, which hurt both usability and perceived product quality.

Need strong, scable data design

Need strong, scable data design

Need strong, scable data design

The interface had to handle very large, complex datasets (many assets, labels, and flows) while staying performant and legible for users.

The interface had to handle very large, complex datasets (many assets, labels, and flows) while staying performant and legible for users.

Fragmented screen layout

Fragmented screen layout

Fragmented screen layout

Critical tools and insights were scattered across the screen, forcing users to hunt for controls and breaking the natural flow of investigation and policy creation.

Critical tools and insights were scattered across the screen, forcing users to hunt for controls and breaking the natural flow of investigation and policy creation.

02

The Goals

02

The Goals

To inform our redesign, we carefully analyzed the leading competitors to understand the UI and UX patterns that users find intuitive and valuable in their daily work. This research highlighted effective design strategies and common user behaviors, which helped us create a more seamless and user-centric experience.

To inform our redesign, we carefully analyzed the leading competitors to understand the UI and UX patterns that users find intuitive and valuable in their daily work. This research highlighted effective design strategies and common user behaviors, which helped us create a more seamless and user-centric experience.

03

Evaluating Competitors

03

Evaluating Competitors

Key insights

Key insights

Solutions

Solutions

The side panel acts as a flexible, floating component that users can easily move and resize according to their individual needs.

The side panel acts as a flexible, floating component that users can easily move and resize according to their individual needs.

In the current design, the side panel is fixed and pushes all the information into a narrow space, which unfortunately reduces the size of the network map and limits visibility.

In the current design, the side panel is fixed and pushes all the information into a narrow space, which unfortunately reduces the size of the network map and limits visibility.

Most elements look similar and blend together visually. This makes it hard to quickly tell which nodes belong to different categories or functions, forcing users to read labels closely and slowing down their workflow.

Most elements look similar and blend together visually. This makes it hard to quickly tell which nodes belong to different categories or functions, forcing users to read labels closely and slowing down their workflow.

Competitors use vibrant color palettes to distinguish node groups, making maps easier to scan and understand at a glance. This approach simplifies analysis and improves the overall user experience.

Competitors use vibrant color palettes to distinguish node groups, making maps easier to scan and understand at a glance. This approach simplifies analysis and improves the overall user experience.

Tools and features are dispersed across the page without clear grouping or hierarchy.
This scattered layout disrupts user focus and forces additional searching.

Tools and features are dispersed across the page without clear grouping or hierarchy.
This scattered layout disrupts user focus and forces additional searching.

Competitors group related tools logically, creating a smooth, intuitive flow.

Competitors group related tools logically, creating a smooth, intuitive flow.

04

Key insights & Solutions

04

Key insights & Solutions

We explored several UI directions, each with its own advantages and disadvantages. Collaborating closely with developers from the early stages of the design process ensured that the final design direction we selected would be straightforward and efficient to implement.

We explored several UI directions, each with its own advantages and disadvantages. Collaborating closely with developers from the early stages of the design process ensured that the final design direction we selected would be straightforward and efficient to implement.

Brainstorming & Stakeholder reviews

Brainstorming &
Stakeholder reviews

After a few design iterations we want to gain more insights and get valuable feedback from relevant stake holders.

We had a meeting with the following colleges: 






David Epshtein - Tech lead at GuardiCore


Misha Yaverbaum - VP Product


Nov Dahan - Director of Product


Daniel Schwarzman - Senior Product Manager


Yaniv Zadok - Senior Product Manager

After a few design iterations we want to gain more insights and get valuable feedback from relevant stake holders.

We had a meeting with the following colleges: 






David Epshtein - Tech lead at GuardiCore


Misha Yaverbaum - VP Product


Nov Dahan - Director of Product


Daniel Schwarzman - Senior Product Manager


Yaniv Zadok - Senior Product Manager

After a few design iterations we want to gain more insights and get valuable feedback from relevant stake holders.

We had a meeting with the following colleges: 






David Epshtein - Tech lead at GuardiCore


Misha Yaverbaum - VP Product


Nov Dahan - Director of Product


Daniel Schwarzman - Senior Product Manager


Yaniv Zadok - Senior Product Manager

After stakeholder reviews, we aligned on the direction and prepared build‑ready assets.

05

UI directions

05

UI directions

The work paused due to a resource shift and prioritization (☹️) on the client side.
The team aligned on a clear path forward, end‑to‑end flows, components specs, and rollout plan are ready to pick up when resources return.
Pausing avoided partial implementation, the plan and specs let the team restart without rework.

In this pass we buttoned up the visuals and structure:
aligned icons, clarified node identity with a refined background, upgraded the side‑panel, and tightened the page header and legend for faster scanning.

The work paused due to a resource shift and prioritization (☹️) on the client side.
The team aligned on a clear path forward, end‑to‑end flows, components specs, and rollout plan are ready to pick up when resources return.
Pausing avoided partial implementation, the plan and specs let the team restart without rework.

In this pass we buttoned up the visuals and structure:
aligned icons, clarified node identity with a refined background, upgraded the side‑panel, and tightened the page header and legend for faster scanning.

Toolbar Icon Updates

Toolbar Icon Updates

The icons have been redesigned to align with the new icon style existing in the design system, creating a more cohesive and unified look throughout the interface.

The icons have been redesigned to align with the new icon style existing in the design system, creating a more cohesive and unified look throughout the interface.

Clarified Node Identity and Refined Background

Clarified Node Identity and Refined Background

A brand‑aligned color palette was introduced to clearly highlight and separate node groups, making it easier for users to interpret the map and track relationships across the interface, while subtle background color and pattern were added to enhance visual appeal and improve readability without distracting from the core content.

A brand‑aligned color palette was introduced to clearly highlight and separate node groups, making it easier for users to interpret the map and track relationships across the interface, while subtle background color and pattern were added to enhance visual appeal and improve readability without distracting from the core content.

Upgraded side-panel

Upgraded side-panel

The side panel now matches the platform’s updated design system. It’s more flexible and readable, supporting personalized workflows and cleaner information hierarchy.

The side panel now matches the platform’s updated design system. It’s more flexible and readable, supporting personalized workflows and cleaner information hierarchy.

The side panel now matches the platform’s updated design system. It’s more flexible and readable, supporting personalized workflows and cleaner information hierarchy.

Page Header

Page Header

The new header divides actions clearly into top and bottom sections, improving usability and focus.

The new header divides actions clearly into top and bottom sections, improving usability and focus.

  • The top line represent primary actions: the map selection dropdown uses a the primary brand color, the save button now has an icon, and the "Create New Map" button is placed directly on the header for quicker access.

  • The bottom line is reserved for filters and search, organizing key tools logically and separately.

  • Unused actions like the "Skip forward" icon button were removed.

  • The layout button was moved down to the bottom toolbar, grouping related options together and reducing clutter.

  • The top line represent primary actions: the map selection dropdown uses a the primary brand color, the save button now has an icon, and the "Create New Map" button is placed directly on the header for quicker access.

  • The bottom line is reserved for filters and search, organizing key tools logically and separately.

  • Unused actions like the "Skip forward" icon button were removed.

  • The layout button was moved down to the bottom toolbar, grouping related options together and reducing clutter.

Legend

  • Align the design of the icons to new icon style implemented in the map.

  • Added a few more icons that were missing from the legend that do exists in the map like: application, Internet, Environment, and Role.

  • Over all updated the design too design system guidelines and style.

While working inside real product files, I identified recurring pain points in component sources and proposed a focused plugin to remove this friction at the source; I then defined a lightweight flow that captures elements from screenshots and specified behaviors that arrange sampled components, generate consistent links and pages, and standardize usage.

06

Build‑ready Outcomes

06

Build‑ready Outcomes

Exploring multiple design directions
is valuable.

Exploring multiple design directions
is valuable.

Exploring multiple design directions is valuable.

Interestingly, the design version I thought would be least likely to succeed became the team’s preferred approach and led the project’s ideation and redesign.

Interestingly, the design version I thought would be least likely to succeed became the team’s preferred approach and led the project’s ideation and redesign.

Interestingly, the design version I thought would be least likely to succeed became the team’s preferred approach and led the project’s ideation and redesign.

Continuous communication between designers and developers is key to a successful project.

Continuous communication between designers and developers is key to a successful project.

Continuous communication between designers and developers is key to a successful project.

Iterative feedback loops allow for quick adjustments and improvements.

Iterative feedback loops allow for quick adjustments and improvements.

Iterative feedback loops allow for quick adjustments and improvements.

07

Main reflections

07

Main reflections

Design System Mastery

Design system

Web Platform

B2B DevOps

Driving efficiency and scalability at Jfrog

Design System Mastery

Design system

Web Platform

B2B DevOps

Driving efficiency and scalability at Jfrog

Design System Mastery

Design system

Web Platform

B2B DevOps

Driving efficiency and scalability at Jfrog

From Opportunity to Impact

UX design

Internal Figma Tool

Plugin

Turning scattered JFrog screens into Kido’s plugin for clean mapping and reuse

08

Next Project

08

Next Project

Say HELLO 👋🏻

If you’ve read this far, the next step is to connect!

© Ira Zubarev 2025

Say HELLO 👋🏻

If you’ve read this far,the next step is
to connect!

© Ira Zubarev 2025

Say HELLO 👋🏻

If you’ve read this far, the next step is to connect!

© Ira Zubarev 2025