Joey Kilrain

UX & Visual Design

Ghostery's TrackerMap

Overview

Ghostery's Trackermap displays and maps every JavaScript tag associated with any single webpage. This feature is useful for publishers with sluggish websites because it reveals tags' impact on load times. It's also useful to ad-tech businesses seeking sales leads because it reveals relationships between publishers and other vendors.


The Challenge

Ghostery's Trackermap was already on the market prior to my joining. My first impression of the trackermap was that it was awesome but in need of desperate redesign.

The original look of Ghostery's Trackermap

The activity of a large media company such as Dose.com could have up to 50+ related trackers on any given page of their site.

My Process

Instead of my usual protocol to interview users, etc. I decided to learn what each tracker type meant. This researched triggered a series of sketches that helped visualize the data.

During the process I invisioned the trackermap as a 'universe' with the respected company at the center. The trackers would revolve around the company as planets do our sun. When I shared this concept with my teammates we saw how we could intertwine the trackermap to existings products.

The first challenge was to bring clarity to the page. I wanted to limit the amount of nodes visible at first. A funny idea crossed my mind, Six Degrees of Kevin Bacon, which I used as inspiration. This thought led to me to question how many child nodes could fit comfortably around a parent node? Incidentally this started the styleguide for the Trackermap too.

This led to a back-and-forth of styleguide and layout construction. The size of fonts and spacing became more critical than ever. Also, the differentiate of lines became a tool in combating the clutter.

Solution

I tweaked the styleguide and layout concurrently to find the right balance between form and function. It lead to an intuitive interface that solved a difficult task. The styleguide inspired greater details such as; Page Latency, New and Non Secure Tags, Whitelist / Blacklist, (to name a few) which was accessed by a simple filter option.

The new look of Ghostery's Trackermap

Viewing the latency of tags

Filtering New Tags from your Whitelist

Viewing Non-secure tags

Double-clicking a node revealed greater details