Mozilla Firefox
Project
2015
What I did
- Illustration
- UI
- Art direction
Firefox with Tracking Protection
I was asked to take on the visual lead for the brand launch and new browser feature, Tracking Protection. The winning concept was to introduce a visualization of what online trackers look like without looking too sinister in nature, with that, the tracking critters were born. The critters were meant to depict a pesky group of online trackers equipped with camera eyes and flashing red lights, watching your various online moves. The tracking shield with the privacy mask sits firmly blocking their field of view. When a user clicked the ‘Try Private Browsing’ CTA, the critters would disappear with a poof, revealing the Private Browsing with Tracking Protection feature in the browser chrome itself. From here a user could open an anonymous window and start browsing…critter free.
Landing Page
The goal of this site was to give a user the ability to use the new Private Browsing with Tracking Protection feature almost immediately. A simple click of the main CTA would allow them to locate where the browser feature was located, giving many users an easy introduction to a new feature where they may not have otherwise had the chance.
Flow
I worked closely with our lead UX designer to bring the full vision to life. Here are a few examples of the initial flow.
Critter poses
The final version of the website had a few simple animations of the critters restlessly positioning themselves behind the shield. Here are a few exploratory poses. Note the Flynoculars on the right 😀
Storyboarding
Here are examples of some storyboards for the new Tracking Protection feature. The critter concept was born out of these early sketches.
