NGINX One case-study Cover Image

Simplifying Complexity: Designing the NGINX One SaaS Console

Overview

Role: Senior UX Designer
Timeline: October 2023 - August 2025
Team: 1 UX Designer (me), Product Managers, Front-end and Back-end Engineers.
Tools: Figma, FigJam, Lucidchart, Slack, JIRA, Confluence.

NGINX, owned by F5 Inc., is the world's most popular web server software, powering around 40% of the top websites globally.

NGINX One SaaS Console is a cloud-based management platform designed to simplify the deployment, monitoring, security and scaling of NGINX instances.

As the sole UX designer for NGINX, I owned the end-to-end design process of the entire product and collaborated with product management and engineering to take it from conception to launch and beyond.

Background

Prior to NGINX One, NGINX had UI-based products with various modules bundled in a product offering called "NGINX Management Suite". These products were primarily designed for on-premise deployments and had limitations in terms of functionality, ease of use, and integration with modern cloud environments.

In mid-2023, the F5 Leadership team suddenly decided to phase out the NGINX Management Suite and focus on NGINX One as the primary management solution for NGINX deployments. The decision was driven by the need to address customer demands and reduce bloat from the existing product suite.

The NGINX product team had 4 months: from October 2023 to February 2024, to design and deliver a Minimum Viable Product (MVP). Due to attrition and prior restructuring, I was the sole UX designer for the entire product unit.

With the pressure of time running out and the engineering teams waiting on designs to get started ASAP, I had to deliver fast while also ensuring the new product would solve the problems from the previous one. I collaborated closely with product managers and engineers everyday to define the product vision, gather requirements, and create user-centric designs that addressed the key pain points of our target users.

Key User and Business Problems
  • Configuration Complexity: Platform Ops and SecOps teams struggled to understand the full abilities of NGINX and safely edit powerful but intricate NGINX configurations. A single syntax error could lead to downtime.
  • Lack of Visibility: There was no easy way to effectively view and monitor the health, status, and performance of their entire NGINX instance fleet.
  • Operational Toil: Critical but repetitive tasks like certificate renewals and applying consistent security policies were manual, time-consuming, and error-prone.
  • Business Risk: Prior NGINX UI-based products were primarily designed for on-premise deployments and had limitations in terms of scalability, ease of use, and features. A significant percentage of customers were requesting a better management experience. The business needed to deliver a superior product to reduce churn, improve contract renewals, and attract new prospects.
  • Better Together: There was a need for tighter integration with F5's Distributed Cloud platform to provide a more cohesive experience for users managing NGINX instances alongside other F5 products.

How might we simplify the management and monitoring of NGINX instances, improve understanding of NGINX configurations, and reduce operational complexity for platform and security operations teams?

Challenges and Responsibilities

Some of my core responsibilities and the challenges I faced were:

  • Establishing design as the Source of Truth: I created and maintained cohesive UX designs as the primary reference for every UI feature. This brought clarity and alignment to executives, architects, engineers, and product managers, which was a significant cultural shift.
  • Scaling Myself: As the sole designer through most of this project, I proactively sought out technical expertise from product managers and engineers. For design critique and feedback, I sought out a network of front-end engineers, UX engineers, and UX professionals working on other products within the company.
  • Better Prioritization: Managing a high volume of incoming features and requests by developing a strong prioritization framework, communicating expectations realistically, and delivering on time.
  • Balancing Design System adherence: I advocated for and justified deviations from the existing design system (originally made for another product) when the unique use cases of this product demanded new, purpose-built patterns.
Solution: A suite of User-centric features

Problem: Users needed a centralized view of their instances' health and performance.

Solution: I designed a primary dashboard that provided an at-a-glance, holistic view of the entire NGINX fleet. This included visibility into key metrics like resource utilization (CPU, memory, disk), network traffic, and clear status indicators to immediately flag instances requiring attention. Additional visualizations at instance list and individual instance detail levels added to the overall experience.

Central Dashboard to monitor NGINX fleet
Central Dashboard to monitor NGINX fleet (click to enlarge)
Instance List with powerful filtering and visibility into status
Instance List with powerful filtering and visibility into status (click to enlarge)
Usage details show actual usage against license entitlements
Usage details show actual usage against license entitlements (click to enlarge)

Problem: Editing raw NGINX configuration files was intimidating and risky.

Solution: A multi-layered experience to build user confidence when editing. This included an editor with auto-completion, an integrated AI Assistant to understand and "chat" about the config code in plain English, helpful prompts and recommendations, and a version history feature that allowed users to see a log of changes and roll back to a previous state with a single click.

An editing experience with recommendations, auto-completion, and NGINX directive information
An editing experience with recommendations, auto-completion, and NGINX directive information (click to enlarge)
An AI Assistant that explains code snippets and answers questions about the configuration
An AI Assistant that explains code snippets and answers questions about the configuration (click to enlarge)
Access to configuration version history and easy rollbacks
Access to configuration version history and easy rollbacks (click to enlarge)

Problem: Ensuring configuration consistency across dozens or hundreds of instances was challenging.

Solution: The concept of "Config Sync Groups" allowed users to create logical groups of instances (e.g., "production-api-gateways") that shared a single NGINX configuration. A change made to the group's configuration is propagated to all member instances, eliminating the need for manual synchronization or external tools.

Config Sync Groups share a configuration - saving time, effort, and reducing errors
Config Sync Groups share a configuration - saving time, effort, and reducing errors (click to enlarge)

Problem: Manually tracking SSL/TLS certificate expiry is difficult, and can lead to security warnings and service outages.

Solution: A centralized certificate inventory where users could view all their certificates, see which instances or groups they were applied to, and receive prominent alerts for any certificates nearing their expiration date. I also designed a workflow for integrating the SaaS console with Let's Encrypt.

List of certificates
List of certificates showing validity and expiration dates (click to enlarge)
Certificate Details shows a list of instances using the certificate
Certificate Details shows a list of instances using the certificate (click to enlarge)

Problem: Applying and auditing NGINX App Protect security policies across a fleet was complex.

Solution: A system where security policies were treated as reusable, version-controlled objects. SecOps teams could define a policy once and then easily attach it to multiple instances or groups, ensuring uniform enforcement.

Policy Details shows a list of instances using the policy and it's versions
Policy Details shows a list of instances using the policy and it's versions (click to enlarge)

Problem: Poor visibility into which instances were affected by CVEs (Common Vulnerabilities and Exposures) made it hard to prioritize remediation.

Solution: Data visualization features and a security section that automatically correlated the user's instance fleet with a CVE database. It proactively flagged which specific instances were impacted by a vulnerability, presenting the information in a prioritized and easy-to-understand view.

Example of a widget shown on dashboards to highlight CVE exposure
Example of a widget shown on dashboards to highlight CVE exposure (click to enlarge)
CVE details with impacted instances
CVE details with impacted instances (click to enlarge)

Impacts and Outcomes

  • Delivered on customer promises: The launch of features like simplified security policy management, certificate management, and the configuration rollbacks fulfilled long-standing requests or generated renewed interest from key customers, strengthening those relationships.
  • Drove Business Growth: By successfully addressing major customer pain points, NGINX One became a powerful tool for the sales and retention teams. The platform was instrumental in attracting more prospective customers, reducing existing customer churn, and improving contract renewals.
  • Established a Design-Led Culture: The UX designs became the central artifact for planning and development, being referred to by several people in the company - like higher executives, architects, engineers, and PMs. This lead to a more aligned and efficient product development lifecycle.

Reflections and Learnings

This project was a period of immense professional and personal growth.
It was incredibly satisfying to see a large, technically complex product that I had designed come to life and be genuinely appreciated by customers. While working alone was tough, it exponentially improved my communication and time management skills. I learned invaluable lessons in UX-related diplomacy, coordinating across different roles and teams to build consensus and drive projects forward. Most importantly, it taught me how to communicate expectations realistically, how to strategically say "no" to protect product focus, and how to build a foundation of trust in the power of user experience.

356x280