2025
Data Visualization Explorer for NGINX Open Source & NGINX Plus
DELIVERABLES
UX strategy
User Flows
Wireframes
User Experience
User Interface
TIMELINE
4 months
Modernizing Data Visualization
This project reimagines the way engineers monitor, compare, and diagnose NGINX instances across fleets. I focused on designing a unified visualization language that transforms metrics—CPU, latency, requests, and connections—into clear visual signals for faster decision-making.
The goal wasn’t just to make charts—it was to craft a data story system that balances depth, scalability, and visual calm, supporting both open-source and enterprise users within NGINX One.
FINAL DESIGN
NGINX One Instance Metrics
As part of the broader NGINX One observability initiative, I led the design exploration for an Instance Metrics Dashboard that visualizes health, performance, and configuration insights in real time.
Through iterative sketches, layout experiments, and visual hierarchy studies, I developed a dashboard structure that emphasizes:
-
Glanceability — critical signals like CVEs, certs, and traffic patterns are surfaced first.
-
Consistency — shared scales and semantic colors ensure accurate comparisons across metrics.
-
Explorability — interactive hover states, scrubbers, and filters reveal context without overwhelming.
The final visualization system introduced a cohesive rhythm between tiles, charts, and tables, bridging open source flexibility with enterprise reliability. It not only modernized the aesthetic language of NGINX dashboards but also demonstrated how data visualization can embody clarity, trust, and craft at scale.
THE PROBLEM
How can complex infrastructure data feel intuitive, modern, and trustworthy?
The current NGINX Plus dashboard surfaces massive amounts of system data—connections, upstreams, caches, SSL stats—but presents them in dense tables that are difficult to scan, interpret, and act on.
IT Engineers struggle to answer simple questions like “Is everything healthy?” or “Where is the issue coming from?” because there’s no clear hierarchy or visual rhythm to guide their attention.
The result: users spend more time parsing numbers than understanding system health.
⚠️ Key Problems in the Existing Product
1. Information Overload
All metrics are displayed at once, with equal weight. Users must manually hunt for what matters.
2. Low Glanceability
Dense tables and small text make it hard to identify trends or anomalies quickly.
3. Unclear Relationships
Data points exist in isolation—users can’t easily connect a failing zone to its root cause.
4. Outdated Visual Language
The UI looks technical but not trustworthy; inconsistent visuals reduce confidence in the data.
5. Inefficient Troubleshooting
Without clear visual cues, diagnosing and resolving issues takes longer than it should.
THE GOAL
Turning Complex Data into Confident Decisions
The NGINX dashboard showed valuable data, but users struggled to make sense of it quickly.
Our goal was to bridge that gap — turning technical metrics into clear visual signals that help engineers spot issues, trust what they see, and act with confidence.
This meant tackling both the product challenge of organizing complex information and the UX challenge of presenting it without adding visual noise.
Product Challenge
Build an intuitive metrics and health monitor for NGINX One that allows users to take a glance of the system health.
UX Challenge
How can complex infrastructure data feel intuitive, modern, and trustworthy?
KICKING OFF
Iterative Co-creation Workflow
This project began as a cross-functional design exploration that brought together PM insights, engineering prototypes, and design experimentation. Instead of a fixed scope, we adopted an iterative co-create workflow to define priorities, validate feasibility, and refine visual patterns in real time.
We ran iterative design sprints with short feedback loops:
-
Align on priorities — which metrics truly drive action for users.
-
Prototype and test early — explore different visualization patterns and load behaviors.
-
Balance consumption vs. performance — optimize what’s shown by default vs. on demand.
-
Experiment & refine — validate chart types, states, and hierarchy directly with stakeholders.
This workflow allowed us to co-create a solution that was both technically feasible and experientially modern, keeping data accuracy, usability, and visual trust aligned throughout the design process.
How We Worked
🎨 Design
From exploration to clarity
I led end-to-end UX design—synthesized cross-team ideas, ran iterative design sessions, and simplified complex data into a clear, actionable experience without visual clutter.
⚙️ Engineering
From hackathon to reality
Engineers evolved a hackathon prototype into a working system, testing data refresh rates and technical limits in real time.
💬 Product
From feedback to focus
PMs synthesized customer pain points to define which metrics mattered most and what glanceable really means.
Context
Understanding Users
Target Users
System administrators, DevOps engineers, and site reliability teams managing large NGINX deployments.
They need to understand system health at a glance, quickly diagnose anomalies, and validate solutions after making changes.
User Journey
-
Observe – Identify abnormal patterns or potential risks through clear visual signals (e.g., spikes, error trends, CVE alerts).
-
Diagnose – Drill into specific instances or metrics to uncover root causes, with contextual views and linked data.
-
Resolve – Provide direct links to relevant solutions or knowledge base articles, enabling faster, confident action.
DEFINING TASKS
Job stories:
“As a [user role], When I [job step + circumstances], I want to [new capability], so I can [need outcome].”
THE DESIGN
NGINX Open Source & NGINX Plus Metrics
Key Features:
-
A clean, easy-to-scan combined view of traffic, health, CVEs, and resource usage.
-
Clear hierarchy, color, and compact charts make key information instantly visible.
-
Users can jump from a quick overview to detailed instance views to investigate issues.
-
Each metric is linked to possible causes and solution resources, helping engineers resolve problems faster.
NGINX Instance Dashboard
Overview of the instance status, utilization trend, and network traffic trend sparklines.
Instance Metrics View
The combined metrics view enables users to visualize multiple trends together and compare any two metrics to uncover correlations and performance insights.
View Switcher
Each metric view comes with a time range selector
Detailed Metrics Views
Traffic bytes in/bytes out
Latency
CPU Utilization
Memory Utilization
Disks Utilization
Active/Idle connections
Accepted/Rejected connections
Future
Upstream Map – Sankey Concept
Future
Upstream Server Health
Challenges
CHALLENGE 1
What Stories Can Complex Data Tell?
Building a Mental Model
We collaborated with PMs to study how users interacted with the existing NGINX Plus dashboard and partnered with engineers to explore the underlying code and data structure.
Through these sessions, I mapped out the relationships between metrics, components, and data flows to understand how NGINX observability worked at its core.
This mental model became the foundation for aligning the team on what to visualize, how to prioritize metrics, and where to simplify complexity.
Which metrics matter the most?
Code based Sitemap and Concept Map
To clarify how data, features, and navigation tied together, I worked with Engineering to create a detailed sitemap and concept map outlining the relationships between metrics, user actions, and system components.
This helped the team visualize the flow from instance-level data to dashboard views, identify dependencies, and align on what to surface at each layer of observability.
DEFINING SCOPE
From Hackathon Prototype to Product Vision
The project began by evaluating an internal hackathon prototype built by the frontend engineer. The prototype demonstrated strong data-handling potential but lacked visual hierarchy and user flow.
Through scope definition sessions with PMs and engineers, we clarified what to keep, refine, or remove — balancing data ambition with usability.
The two hackathon UIs show the starting point of the exploration, capturing early ideas for layout, filtering, and chart display that later evolved into the final visualization board.
Exploration 1 – Individual Server Zone
Server zone map
Traffic health
Exploration 2 – Infinite Map
CHALLENGE 2
Where Design Connects All the Dots
How to balance tech, massive data, and user needs in one design?
Designing for observability meant navigating across three forces — product milestones, engineering feasibility, and user needs.
With massive data complexity and competing priorities, UX played a key role in synthesizing all perspectives into one cohesive, usable solution.
This balance ensured that what we delivered was not only technically feasible and aligned with business goals, but also intuitive and valuable to the people using it every day.
Potential Directions
Most effort
Option 1 – Infinite Map
👍 Pros: All-in-one solution
👎 Cons: Scalability, Performance
least effort
Option 2 – Simple Charts
👍 Pros: performance
👎 Cons: not much added value compared to third-party platforms
Balanced
✅ Option 3 – Data Explorer
👍 Pros: Fits all user needs, Flexible.
👎 Cons: Requires future improvements to support cross-instance metrics.
Finalized User Journey
Using the F5 distributed cloud (XC) design system as a foundation, I refined the user journey to align with real user needs, product milestones, and what was technically achievable.
CHALLENGE 3
Beyond the Design System – Evolving existing patterns to meet new visualization needs and future scalability.
Building on the F5 design system, I explored how to adapt and expand its components for data-intensive visualization needs.
Through iterative design studies, I created and tested new data card and chart patterns that maintained consistency while addressing unique requirements of the NGINX Data Explorer.
The goal was to evolve the system—not just reuse it—by designing scalable, future-proof patterns that balance clarity, hierarchy, and visual rhythm across complex datasets.
CHALLENGE 4
Clarity, Clarity, Clarity
Clarity wasn’t just a goal—it was the rule.
Every pixel, chart, and label had to justify its presence.
The challenge was creating a dense, information-rich dashboard that still felt effortless to read and navigate.
To support dense data visualization in the NGINX One instance dashboard, I focused on achieving clarity through hierarchy, scale, and spacing.
Data Trends Matter More Than Real-Time Numbers
Real-time data gives instant feedback but often lacks context. For system observability, users needed to identify patterns, anomalies, and changes over time, not just momentary values.
Through user feedback and engineering discussions, we learned that:
-
Engineers diagnose issues by comparing timelines, not by watching a number fluctuate in real time.
-
Historical trends reveal root causes, correlations, and capacity planning opportunities.
-
Real-time data alone created noise—users couldn’t tell whether a spike was a transient blip or part of a larger problem.
By prioritizing trend-based visualization, we enabled users to:
-
Recognize performance changes and degradation across hours or days.
-
Understand system health trajectories at a glance.
-
Make informed, data-driven decisions without cognitive overload.
Exploration 1 – Status Check
An aggregated metric and health status card
Exploration 2 – Clean Card Layout
Provide a simple view of the system summary
Exploration 3 – Condensed Layout
A combination of the charts and numbers
Final Dashboard Design
Functionality
-
Introduced linked metrics and charts to let users explore detailed data without crowding the main view.
-
Structured information into modular cards (Health Status, Utilization, Traffic) for faster scanning and contextual understanding.
-
Ensured logical grouping and hierarchy to support quick diagnosis and navigation across system states.
Visual
Data Visualizations & Charts
I explored three layout directions to balance clarity, scale, and usability:
-
Dashboard cards — compact summaries for glanceable monitoring.
-
Drawer view — contextual expansion for detailed metric comparison.
-
Full-page layout — deep-dive exploration with full data range and interactions.
Through iteration and feedback, we identified trend-based charts as key to helping users connect short-term performance with long-term health, while keeping the design lightweight and consistent across views
Exploration 1 – Dashboard Charts
An aggregated metric and health status view
Exploration 2 – Drawer Layout
Drill-in view from the dashboard cards
Exploration 3 – Full Pgae Charts
Most details with customizable views
Final Combined Metrics Design
Functionality
-
Combined multiple metrics (CPU, memory, traffic, etc.) into a single, interactive chart to make correlations visible at a glance.
-
Enabled cross-metric comparison with toggle and hover interactions for deeper insight without cluttering the view.
-
Integrated a timeline selector for exploring historical trends and identifying performance changes over time.
-
Added linked metric groups (e.g., Traffic, Utilization) for quick filtering and efficient drill-in workflows.
Visual Design
-
Designed a balanced chart layout that visualizes trends clearly while maintaining spatial simplicity.
-
Used subtle color hierarchy and lightweight gridlines to highlight trends without overwhelming users.
-
Applied consistent sparklines and metric cards on the right panel to keep the focus on key system indicators.
-
Maintained a clean, data-first aesthetic that supports both quick scans and analytical exploration.
Final Individual Metric Design
Functionality
-
Focused on a single metric category (e.g., Response Codes) to help users analyze detailed patterns and pinpoint anomalies.
-
Combined bar charts and summary counts to show overall distribution while supporting deep-dive analysis.
-
Integrated a timeline navigator to explore different time ranges and understand changes over extended periods.
-
Added an interactive table that connects each data point to its corresponding server and request path for quick troubleshooting.
Visual Design
-
Used color-coded categories to communicate status at a glance while maintaining visual consistency across the dashboard.
-
Balanced chart density and whitespace to present detailed information without overwhelming the user.
-
Designed hover interactions and tooltips for contextual exploration without losing focus.
-
Ensured a cohesive visual rhythm with the overall dashboard, maintaining alignment with F5’s data visualization system.
COLLABORATION
Designing with Everyone in the Loop
Throughout the design process, I collaborated closely with multiple teams to ensure the solution was both technically feasible and strategically aligned with company goals.
-
Design Team: Shared the prototype with the broader UX community across F5 to gather feedback on information hierarchy, accessibility, and overall consistency.
-
Design System Team: Partnered with the dedicated design system designers to validate visual patterns and propose scalable extensions for data visualization.
-
Engineering Teams: Collaborated with both frontend and backend engineers to review feasibility, ensure data integrity, and refine technical constraints.
-
Product Management: Worked with PMs to align on milestones, user needs, and success metrics for release readiness.
This collaborative review process helped secure stakeholder buy-in early, ensuring design decisions were both user-driven and execution-ready.
LAUCH & IMPACT
Launch & Future Improvements
The design exploration received positive feedback from stakeholders across design, engineering, and product management. The new metrics dashboard and data visualization patterns were praised for their clarity, scalability, and thoughtful information hierarchy.
Since this was an exploration effort, the current solution serves as the foundation for ongoing refinement. The next phase will focus on:
-
User research and feedback collection from real NGINX customers.
-
Performance validation of data visualizations under large-scale workloads.
-
Design system integration to expand future visualization use cases.
This iterative approach ensures that future versions of NGINX One Observability will continue to evolve based on real user insights and measurable product impact.
TAKEAWAYS
Lessons Learned
Clarity Over Complexity:
When visualizing large-scale data, clarity is more valuable than visual novelty. Clear hierarchy, consistent scales, and recognizable patterns help users act faster and trust the system.
Start with What’s Feasible:
Early alignment with engineering ensures that design exploration stays grounded. Start small, validate ideas, and scale only after confirming performance and data constraints.
Design Systems Are Evolving Tools:
A design system isn’t a rulebook—it’s a living framework. Extending it for new visualization needs keeps consistency without stifling innovation.
Data Has a Story to Tell:
UX design plays a key role in uncovering meaning from massive, complex data. Helping users see trends and connections turns raw telemetry into insight.
Collaboration Builds Clarity:
Cross-functional reviews with PMs, engineers, and designers strengthen both design quality and decision confidence. Getting buy-in early leads to faster iteration and better outcomes.