Network Asset Insights
TL;DR
View the fully-functional prototype I built using Claude Code and the Figma MCP server.
While employed at Infoblox, a SaaS IT administration company, I designed from end-to-end a product that provides network asset visibility for incident response and auditing, covering assets on-premises and in cloud infrastructure. As lead designer, I collaborated with PMs, engineers, and SMEs, creating UX for network discovery and asset inventory under a tight four-month MVP timeline. My iterative approach, leveraging existing UI patterns, weekly reviews and research into competitors, yielded a refined dashboard and an improved inventory table featuring a new slide-out details panel and a query builder.
Skip to the mockups
Introduction
Infoblox offers SaaS enterprise products for IT automation and cybersecurity. Infoblox's senior management spotted an opportunity to develop a new product that would provide detailed information about the devices (also known as assets) on their customers' networks, both in the cloud and on-premises. The purpose of this new product is for incident response and auditing.
My Role
I was the lead designer for this project, working with a less-senior designer, two product managers and an engineering team. I designed a first draft of the UX for network discovery, the process of scanning both on-premises and cloud networks to gather asset data. I handed that off to the less-senior designer to complete under my supervision while I worked on the asset inventory UX. Neither of the product managers I collaborated with had worked with a designer before, which meant I had to educate them on the design process and define the UX requirements for this new product.
Project Goals
The software would allow customers to import and view detailed information about:
- On-premises assets: Laptops, printers, WiFi security cameras, any connected device
- Cloud assets: virtual servers, load balancers, network gateways, any asset living in a cloud platform like AWS, Azure or Google Cloud Platform
Requirements for the new software product included:
- Summary data should be made available to provide insights into the customers' network assets
- Asset data should be searchable, sortable and filterable
- An MVP needed to be delivered in four months
The use cases that needed to be addressed in the new product included:
- Troubleshooting and Incident Response — Example: an IP address has been identified sending network traffic to an internet server associated with malware. Admins need a tool for looking up what devices that IP address has been assigned to and when, and where those devices are located.
- Auditing — Example: Determining attack surface by compiling a list of devices that have out of date operating systems or are known to be easily hacked (IoT).
Research
Given the short amount of time I had to work with I relied on internal knowledge, reviews of competing products and AI. What I learned using AI allowed me to be better informed from the start, to ask better questions when talking to SMEs and to better understand the answers I was given.
- Product Management - One of the product managers had previously been the head of IT at ExxonMobil. His boss had worked as a Network Engineer at Apple for many years.
- Infoblox's own IT staff - The company's own network engineers and administrators provided valuable insight into what they saw as necessary features.
- Infoblox's Professional Services Team - Subject matter experts who have worked in IT and possess an in depth knowledge of the pain points of Infoblox's customers.
- AI - I used AI to summarize information to learn about these kinds of products and who uses them, and who the major players in the space are.
Design Process
My process for creating the design of the asset inventory software was iterative. I worked within the limitations of Infoblox's existing pattern and component system. This meant that I could quickly put together high fidelity mockups by leveraging the UX team's existing UI kit, but due to time constraints, I couldn't update or create new patterns and components. I set up weekly review meetings with product managers, SMEs and key members of the engineering team to brainstorm and get feedback. Features I designed were broken up into feature stories by the product managers, as part of the Scaled Agile Framework process.
Process Flows
The functionality required for the asset inventory system includes both the import of the data, referred to as Asset Discovery, and viewing of summary and detailed data about assets on a customer's networks. Users are also required to create sets of credentials to allow the discovery process to communicate with the cloud platform (AWS, Azure, Google Cloud). The process diagrams shown here represent the high level process flows for the three processes.
Wireframes
For the sake of this presentation, I've focused on the Dashboard and Inventory screens from the process flows above. In order to maintain the confidentiality of the work, the designs shown here are not the actual mockups created for this project. What's presented here are wireframes that demonstrate a similar approach to solving the same problems.
Dashboard
The first screen represents an early draft of the dashboard. A lot of ideas are represented here that were deemed unfeasible or not practical. For example, the senior staff at Infoblox requested that the design incorporate icons to make the design more colorful and interesting. Ultimately I decided the icons added more noise than meaning. Another example of an idea that didn't make it to the final design were the category counts. This was another idea proposed by stakeholders that when I discussed it with product management, offered little value to the customer. Software engineering also wasn't confident they could accurately categorize the assets for the MVP.
The next screen shows a much cleaner and less noisy finished design. At the top there's a View menu to switch between the All Assets View, Cloud View and On-Prem view. From my discussions with the many stakeholders and SMEs I talked to, I learned that many network administrators specialize in either on-prem or cloud. This menu allowed users to filter the data to only on-prem or cloud KPIs and widgets. Each KPI and widget leads the user into the Inventory section, with filters put in place based on what the user clicked on.
Inventory & Details View
The inventory lended itself to a table based directory that could be searched, sorted and filtered. The first screen shown here shows the standard table design pattern that was used throughout Infoblox's products when I started designing this product. I saw room for improvement. The right panel showed detailed information about the selected item, but could not handle large amounts of attributes. The accordion sections required the user to click many times to see the attributes of an item and nesting them reduced the amount of space to use for each attribute. Users did like one aspect of this design pattern — they could click from row to row and the right panel would instantly update, allowing them to see attributes of each item very quickly.
I convinced the engineering team that, in spite of their insistence that no new components be created, that the right panel and the search and filter UX needed to be replaced. I designed a slide-out to replace the right panel that was larger and would allow for more attributes to be shown but also more types of information such as tables. For search and filtering I took inspiration from design patterns I'd seen in competing products as well as AWS and Google Cloud Platform and designed a query builder interface. The new design pattern allowed users to quickly search and filter the data in the table and use ANDs and ORs to create complex queries. The interface could be either mouse or keyboard driven. Both the slide-out and query builder design patterns became platform features that were used across products.
Post MVP
After the completion of the MVP I worked with a UX researcher to conduct an evaluation of the design with early access users to partly gauge the success of the UX and to also ask some of the questions to users that I would have asked during my initial research had time permitted. Users provided useful insights such as wanting to see security data both on the dashboard and in the inventory and wanting asset information that would help them reduce their costs. The two dashboards widgets shown in the prototype for utilization came out of the evaluation and were added to the product road map.