NetBeez

NetBeez

Overhauling B2B network analytics tool

Product Design Director

2022—now

Website

NetBeez is a network inspection tool backed by YC.
I have enjoyed developing the plan for its redesign and overseeing its implementation, collaborating closely with the founders.

The service lets engineers investigate network issues by helping them create, run tests, and analyze results. This involves looking at system parts like Agents, Targets, and WiFi, considering how they interact with other network components.

Scheme with Netbeez system main variables
Tests show the health of system component relationships.

After establishing a strong presence in the market and experiencing growth over the past decade, NetBeez approached O0 to create a new brand and landing page. Once it was done, they sought our help in exploring options for redesigning their product. That’s where my team stepped in, proposing ideas and forging a partnership.

Audit

Screen map in FigJam

We took screenshots of all the screens and assembled a map of them. Then we identified the main problems of the service, which were inconsistency in the behavior of similar elements across the service, and inconsistent navigation patterns. Additionally, while investigating, users could go so deep into the interface that previous context is no longer present on the screen.

Every screen we needed to redesign was estimated in hours.

This exercise also gave us a better sense of the number of individual elements to develop and an approximate time for it. It was bold to believe that we could do everything with such precision. However, no battle was ever won according to plan, but no battle was ever won without one.

Layout

So we knew that engineers needed to dive deep inside entities, go back easily, and be able to compare data quickly.

Hands holding a book
Photo: Unsplash

This brought to my mind the analogy of when you’re holding a book with footnotes on another page and you put your fingers between pages to be able to go back and forth and compare information quickly.

Semi-modal mode for incident inspection

So I came up with this concept where during the investigation, users open a semi-modal overlay and are able to go deep there, or select another flow. This behavior makes it easy to compare data.

Visual Appearance

We extended our brandguide pallette with colorblind friendly colors which was crucial for the product with this amount of charts and visual data.

Extended NetBeez Palette
Brand color on the left and center, new colors are on the right.

With that we redesigned all the charts to be stylistically coherent. Each chart had surrounding components so we also were building a lot of components on the fly and figuring out elements relationships possibilities in a form of prototypes. It was as I call it a confusion state, where you try things out constantly and initially find universal rules for the universe of the product.

Example of charts with accessible colors
Some examples with charts using accessible colors.

Out of this exercice we went out having a good amount of components in all states, all the charts and table elements which is a good amount of building blocks in a product like that.

Agents

An overview of Agent contents.

The Agent tab has a table with all the agents, or in other words, users of the internet network. Agents with issues appear at the top. By clicking on a row, a semi-modal view appears, showing general data about an agent’s ‘health’, and more specific information such as what their IP is or how their Wi-Fi signal strength is.

General Agent logs inspection flow.

The main behavior while troubleshooting is to get to the logs. To make it easier, we utilized widgets to serve as filters and save some clicks for engineers. Also, we limited navigation with a second level maximum. To make it possible, all the elements behaved in inline-mode and expanded as users clicked on them.

Targets

Target inspection flow.

Targets inherited a similar design. On top, there’s a table with all websites users reach during the day. NetBeez performs tests around these targets and gets their ping, latency, or understands the path signal needs to follow to reach the target.

Wi-Fi

Wi-Fi inspection flow.

At this point, Wi-Fi follows the same design patterns.


Built With