Product Design
Open For Work
UXUI Design
Visual Design
Product Design
Open For Work
UXUI Design
Visual Design

Improving Efficiency & Usability:
‍Security Dashboard Redesign

Web Application Design
Dashboard Design
Product Design
Product Management
IntroInitiativesUser InterviewsInformation Hierachy
Customization
Video Demo
Conclusion & Impact
Design

Principal Product Designer

2022-2024

After a merger with Edgecast, the edge computing, CDN and streaming delivery service formerly owned by Yahoo!/Verizon Media, we took a hard look at the UX of the now legacy platform that offered the critical protection many large enterprise companies relied on. With this merger, the Edgio platform gain a robust catalog of cybersecurity and bot mitigation products and a reimagined UIUX was needed to reflect this new chapter.

The dashboard is a critical part of Edgio's security offering, monitoring and detecting anomalies. Shortly after the Security Application Manager redesign, we began reimagining the dashboard.

// Intro

The Challenges

Security data is often complex and highly technical. While we recognize that most users will likely have moderate to advanced cybersecurity knowledge, we aimed to design an experience that is accessible to non-experts as well. Given that this data will be used for high-level decision-making by our customers and partners, we wanted to ensure the interface is intuitive and easy to understand for all users, but that posed some challenges:

Reorganizing and Prioritizing Large Amounts of Data

Overhauling Old UIUX

Considering Different Workflows and User Roles

Offering Detailed Filters to Parse Through Information

Visualizing Complex Data

// Intro

The Initiatives

Because the mobile application was is the beginning stages, there was a lot things that needed pioneering:

Better Understand Complex User Stories and Workflows

We aimed to gain a deeper understanding of the specific use cases and workflows of the users who rely on the dashboard daily to monitor and detect security anomalies in their application and sites.

Improve Information Hierarchy

We needed to highlight key data points so users could make more informed decisions quickly.

Enable Dashboard Customization

Probably our most ambition initiative, we created a modular dashboard with various data visualization options. Users would be able to tailor the interface to highlight the most relevant information and optimize their workflow for greater efficiency and insight.

Harmonize Design System

This was a part of a larger initiative to harmonize and add interactivity to our component library.

View Project

Initiative Solution

Conducting User Interviews

Our Solution Engineers were a great internal resource to better understand the improvements we needed to make for this dashboard redesign.
// Conducting User Interviews

Identifying the Main Painpoints

Through interviews and user demos, I was able to pinpoint two key improvements to the pain points that came up repeatedly in these interviews:
‍
Balanced Depth and Overview: Once a security anomaly was detected, users needed to "drill down" and explore the specifics of the threat. This highlighted the need for a dashboard that was both broad in its overview and focused enough to drill down into details when necessary.

Improved Filtering: The existing filter system needed better categorization to make it easier for users to select the right filter type from the dropdown menu.
Regular check-ins occurred to review changes, gather feedback and and test prototypes
Initiative Solution

Establishing Clear Information Hierarchy

While the backend had a clear hierarchical structure that organized the data and allowed engineers and users to 'drill down' into details, this hierarchy wasn't reflected in the previous UI. We redesigned key UI components to be more visually engaging, aiming to make the information hierarchy more intuitive and empowering users to navigate and utilize our dashboard more effectively.
Redesign
Old UI
// Establishing Clear Information Hierarchy

Clearer Global Filters

To optimize the use of our Dashboard, users must understand how global filters work. These filters, such as time frame, impact all queries and content across the dashboard. Any filter applied by the user also affects the data displayed in the stat boxes, which also served as Data Source filters. We redesigned the layout to emphasize a clear top-down information hierarchy, making the Data Sources more prominent for better user interaction and accessibility.

Data Sources: Total Events, WAF Events, Bot Events, Rate Events and Client-side Event.
Data source component states. Data sources doubled as a quick stat box and a filter.
// Establishing Clear Information Hierarchy

Header Condense On-Scroll

To preserve contentunitey, we condensed the header so Users will always know what filters are influencing the dashboard while minimizing the space it took up on the screen.
// Establishing Clear Information Hierarchy

Toggle-able Filters

We made it easier to quickly toggle filters on, off, equals to and does not equal to with hot keys. Filter badges also had different UI states depending on the value.
Initiative Solution

Dashboard Customization

Customization empowered our Users to prioritize the most relevant data, adjust layouts for better accessibility, and enhances usability by giving users the flexibility to tailor the interface to their specific needs and workflows.
// Dashboard Customization

Modular Design

The more modular, card-like design allowed the dashboard to be more flexible, allowing users to add multi or single columns based on their preference.

Conclusion & Impact

Through regular feedback loops, aligning on technical constraints, and ensuring design solutions were both user-centered and feasible, the frontend developers and I created a collaborative environment where both design and development could thrive together, fostering a strong sense of communication and trust.

After 3 quarters of designing, feedback sessions, iteration, and scoping, the redesigned dashboard was released on February 22, 2024 (my birthday!) After release, users reported:

Additional Data Visualization Made Identifying Security Threats and Abnormalities Easier

Improved Filtering Capabilities Made Troubleshooting More Efficient

Greater Ease of Use and Understanding

More Trust In Edgio Products, Because Of The Improved Look and Feel

I look forward to hearing from you
gaby@mexi.design