Firefox Private Network

From concept to rollout, keeping the internet safe.

Overview

From early concept exploration and testing, we fully fleshed out the new Firefox Private Network. We continued to push on our original hunches and landed on full-fledged style guide across mobile and desktop platforms.

Role

Design Lead

Duration

6 weeks

Hitting the ground running.

Just months before kicking off this project, I had the chance to concept and prioritize a suite of consumer security offerings for Firefox. Ranging from cloud storage, password protection, and seeing if you’ve been “pwned”, we had both low hanging fruit and longer term ambitions. After helping launch Firefox Monitor, we had a clear target in mind.

Experience Map

The Challenge:

Ship a Firefox VPN.

fpn-callout-bg Created with Sketch.

Starting with a hunch.

With a mighty and nimble team of myself, a designer, and a ux researcher, we picked up with some unanswered ideas from our last project:

Combined Shape Created with Sketch.

VPN isn’t a household term or easily understood.

Combined Shape Created with Sketch.

A visual metaphor can overcome the technical hurdle of understanding.

Combined Shape Created with Sketch.

There is a broad range of motivations for using a VPN.

Our first week focused on three things:

Hot on the trail.

As we progressed into the early stages of this project, I helped lead client expectations as well as goals for the ZURB team. The best part about this role - I also get the chance to do design and ux research work.

Using our platforms Enroll and Helio, we were able to foster 5.6k people that fit targeted behaviors. These included Privacy-focused Internet Users, Security Conscious Internet Users, and Savvy Media Streamers.

We also pushed the envelope with opportunity sketches - helping us get yes’s and no’s:

Picture this.

After gaining more focus and momentum with the teams, we explored and tested different user journeys and use cases.

With a lot of positive signals from our audiences, we jumped right into lo-fi sketches and wireframes. We learned pretty quickly we might have been adding technical complexity around items like speed and location selection.

To mascot or not?

As we continued to iterate on our user flows and wireframes - ending with nearly 100 screens, we had a suspicion that a friendly mascot would boost the overall experience. Here’s what we found:

Combined Shape Created with Sketch.

Many people are aware of VPNs through work, and have a vague understanding of it.

Combined Shape Created with Sketch.

Using a mascot proved to be polarizing. Some loved it and some hated it, while a safer, inanimate object elicited less emotion.

Combined Shape Created with Sketch.

Motivating statements created a higher intent to purchase over threatening or educational verbiage.

21

Targeted Surveys

2k

Respondents

Tying it all up.

With our findings in line from 21 surveys with 2,000 respondents, we were ready to polish and define style guides in Zeplin. We tested variations of pricing models using SUS and landed on the current pricing scheme and platform release schedules.