Kadence Tang

Work

About/CV

Infoblox’s Search Experience

Redefine search experience in Infoblox’s BloxOne for easier navigation and access to granular information, empowering users to take immediate actions.

Challenge

Users struggle to locate objects in the context and are confused about the distinction between global and local search. Global search lacks clickable links and relevant information about the user's search, resulting in “click fatigue” as users must manually drill down in the network hierarchy.

Impact

Developed a new search and filter experience that improved discoverability of the search features and sped up the time needed to locate an object by more than 3 times.

Role

Lead UX Designer & Researcher,

January 2023 - April 2023

PROBLEM SPACE

Users struggle to find objects within platform

Current global search allows users to view and edit results but do not bring them to the object’s context.

It requires at least 10 clicks to locate and drill down to an object, even after a search.

[fig 1 - Interaction map showing the process of locating an IP Address]

CHALLENGE

Crafting a single solution for diverse personas

BloxOne is a DDI (DNS, DHCP, IPAM) network security product that caters to a wide variety of personas. (i.e. network administrators, network engineers and security analysts) The challenge is to develop a comprehensive search pattern that would work for a spectrum of use cases.

RESEARCH

Conducting 16 customer interviews

I created the research plan by collaborating with the product managers and engineer leads to incorporate different perspective. As our team did not have user research program set up, I established a process within the team and recruited current users through Gainsight PX engagement survey.

I screened, recruited and interviewed 16 Infoblox customers to gather their thoughts on the current search experience.

Approach

Focusing on user goals and critical workflows

The Pareto Principle deeply influenced my approach to this project. Given the broad scope, I had to maximize the benefits of this feature by identifying the primary personas, most frequently searched objects, and essential workflows. I created interaction maps and task flows to capture the paths that users take and to help stakeholders visualize existing inefficiencies.

[fig 2 - Documenting user scenarios]

dISCOVER

Network Persona’s Expectations

We decided to focus on network administrators' use cases due to a couple of factors. The majority of their daily operational tasks involve configuration, resource management, and troubleshooting, often requiring the location of specific objects that exist in a nested list.

Here are their expectations for global search:

[fig 3 - User Expectations]

EXPLORATION

Facilitating Co-Design Sessions with Skateholders

After I worked closely with the team and facilitated a co design session where to use crazy 8s to explore design ideas. From the team activity, we came up with several next steps and picked a few ideas that we want to expand on.

Evaluation

Starting small, testing fast

I conducted 8 rounds of usability tests with 65 participants, including 49 external IT professionals and 16 Infoblox users. Each test focused on a different aspect of search, such as navigation behavior, search results page, input behavior, filters, and search box visibility. Insights from each test were shared with the team and feedback incorporated into the next design iteration.

[fig 4 - Snapshot of test plan & analyzed data]

This series of tests also uncovered additional usability issues we addressed in the final design:

The search input box occupied too much space, causing users to lose context of where they are.

Non-Infoblox customers often missed the search icon unless prompted.

Participants struggled to differentiate between local and global search functionalities due to their proximity.

Introducing Global Search 2.0

A new global search experience enables easier navigation, and finding relevant information with fewer clicks

[fig 5 - Delivered Search Result Page Design]

Simplified Navigation

Users can jump to the object or parent object to perform actions within 2 clicks, reducing the amount of time needed to locate an object by 4 times.

[fig 6 - Clickable hyperlinks]

Tailored Object-Specific Data

Users want search results to use consistent terminology and show contextual information about specific objects so that they can drill down and take action more efficiently.

The new design displays consistent naming conventions and object specific information to provide better context for various operational use cases such as troubleshooting. For instance, we would include FQDN for DNS records, and IP utilization info for subnets, lease information for DHCP Leases.

[fig 7 - Tailored object specific information]

Search without losing context

Search box takes up too much space and users lose context of where they are. Reducing the width of the search box while keeping the same amount of content and allowing users to return to their recent search results quickly.

[fig 8 - Smaller search input box]

Improved visibility of global search

After testing 4 different header designs with 16 participants, we settled on this final one, which boosted the discoverability of the global search feature from 25% to 100%.

[fig 9 - Improved page header]

Addressing additional usability issues

Accompanying this change, we also addressed a number of product usability issues, such as missing page headers and the lack of distinction between local search and global search.

[fig 10]

Delivery

Deep-linking Guide

The most important fix for this feature was ensuring that all objects are transformed into clickable links.

Through conversations with customers, I've learned about their expectations for hyperlink behavior. For instance, an object that is not a container would be linked to the object details page, while a selected container object would direct users to a list of child objects.

I created a comprehensive guide outlining where to direct users when they click on specific objects, establishing a repeatable pattern. This deep linking guide served as a single source of truth for PMs and engineering teams during the implementation stage.

[fig 11/12/13 - Object destination documentation]

Search Style Guide

It was important to provide a High Level Design document for our developer, so that I can elaborate on the macro and micro interactions for molecular pieces. I also wanted to create a consistent pattern of expected search behaviors for users.

[fig 14 - Sample of Style Guide]

Impact

Data-Driven Design to garner support from stakeholders

Revamping the search function involves overhauling the database and changing how objects are indexed.

As one of our first UX-led improvements, we used data to drive design decisions and demonstrated the project's importance to PMs and Engineering teams, securing their support. This product feature successfully went live in mid-November 2023. 🎉

Faster Navigation, Smarter Insights

We not only reduced the time taken to locate an object in context by 1/3, but also displayed relevant, essential object specific information that would aid user’s operational workflow. Here’s what our customers said about the new designs:

“

If a security person comes to me to check on a particular IP Address, if I just typed it in, this (search results) page alone gives me all kinds of information that I can really just give this guy a really good report.

”

“

At any certain time, we can have almost 50,000 wireless clients on the campus, if they’re doing hacking, we have to go and use the search to find them. This allows me to find the MAC Address and trace him down efficiently.

”

Reflections

Including engineers earlier in the process reduces resistance.

Next Project