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.
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.
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