Work at Neustar

Neustar is a "global information services provider", about 2000 employees. Most products/services boil down to a website where the user can manage marketing campaigns, domain name registrations, protect their sites from DDoS attacks, or monitor and test their websites. There's too many products to list here.

Most of my work has been in the Security Services division:

• Web Performance Management - monitor your website uptime, load test website, and integrate any alerts into your company's alert response system.
• UltraRecursive - a recursive DNS resolver where specific websites (by domain name) can be filtered out.

One of the many areas I worked on in WPM was UI, and especially the charting for the results, of Load Testing. Load Tests run for about an hour, and send the site you're testing masses of traffic as described by your settings and scripts. Traffic comes from one, or up to a dozen worldwide locations, where the service spins up dozens, hundreds or thousands of virtual servers on AWS or other cloud services focused on your site. Activity is dictated by one or more scripts, driving selenium on headless browsers, so that you can target specific interactions, as a real user would.

The space of data is multi-dimensional. A load test could run several different scripts from several locations. And there are several different metrics that were sampled during the run. I was tasked with making a page with a graph that could draw "all" of it. After realizing that the space was potentially seven dimensional, I narrowed it down to three dimensions, three variables.

The control panel in the upper right corner has four modes that the user could choose: an 'aggregate' mode that would give a quick summary, and then there were modes where one of the variables could be fixed, with the others available for choosing. Each of these limits the user to a plane of the data space, at different angles.

Remember, these controls are for viewing the data already collected. The system records six metrics for every minute of the test, for every step of every selenium script you choose to run, for every location you choose to attack your website from.

⇦︎ This mode lets the user choose one Metric, and then can freely turn on or off all locations and scripts. In this case, there's only one script.

⇨ This mode lets the user choose one Location, and then can freely turn on or off all metrics and scripts. Again, there's only one script.

⇦︎ This mode lets the user choose one Script, and then can freely turn on or off all locations and metrics. There's only one script so it's automatically chosen.

Most small widgets are done with Bootstrap; dropdown menus are by Chosen.js . Charting by nvd3 on top of d3 (I got a chance to fix things and add features in nvd3).

I was the only UI programmer on the DNS Nameserver project, working with a distant and understaffed UX department. Most of the UI was CRUD with a fair number of unobvious permission rules and object relationships.

One area that stepped away from the usual, is where the user choses 'categories' of domain names to block. There is another option, Warn, where the user would be warned about a site, but could click through. I made a 3-state button, which became multi-state as the product requirements changed. (A legacy version of the same product tried to use checkboxes.) Each of the columns is headed by another instance of this switch that could also assume the 'mixed' state; as you would expect, you could change a column at a time by clicking on it.

The three groups of categories, went under different names in our group, often even "categories", though they were really categories of categories. I coined the word "slate" to refer to these groups. I was the wordsmith for the group, as there was plenty of internal lingo that, otherwise, would have made it into the UI.

In the broader list of locations, the administrator can declare multiple locations, each with different category settings; this is how the list looks. Each category slims down to a single line; the result is that you can get a general sense of the setting without getting into the messy details.

The switch was also reused for other filtering mechanisms: blacklists and whitelists. For those, it's only 2-state, but the titles are different. This shows a whitelist choice dialog.