Mozilla VPN
European Product Launch
2021
Role: UX Designer
Team: Designer • Copywriter • Developer • PMM
Timeline: 2 months
Tools: Figma • Miro • Google Suite • Usertesting.com
Overview
Mozilla launched its first paid privacy product, the Mozilla VPN, to a set of English-speaking countries. A year after the launch, the European Marketing team worked to bring this product to Europe, starting with the German and French markets. Our team was tasked with creating localized product pages for France and Germany, accounting for the needs of users in those markets.
Metrics
150K subscribers globally
60K subscribers in the EU
Outcome
Through user testing of the page, we unveiled the desire for a variable pricing model and delivered users with more choice and clarity surrounding VPN cost.
PHASE I: DISCOVER
Lack of feature differentiation
Mozilla’s VPN lacked many features provided by other competitors in the market, so we needed to find other solutions to differentiate our product and attract users.
Visual Audit
To better understand the competitor landscape, I conducted a visual audit of common VPN brands to understand patterns and best practices.
Testimonials
Competitors boosted credibility with press and customer logos
Prominent Pricing
Pricing across sites was boldly displayed at the top of the page
Clear CTAS
CTAs used the word ‘Get’ to show a direct offering to the customer
PHASE II: DEFINE
Audience Insights
To define the right audience and positioning of the VPN in Europe, we hired an external agency, The Mix to audit research on Mozilla’s existing audience segments. They defined two audiences for the VPN: existing Firefox users (Caring Confidentials) and a target audience (Adventurous Amplifiers).
Caring Confidentials
“I am very skeptical when I go online. I am reluctant to give my data. Security is important.”
WANTS: Control • Brand Alignment
Adventurous Amplifiers
“I know that data security is a big issue but I don’t have time to really get into the matter.”
WANTS: Ease • Personalization • Trust
Testing Methodology
I developed a user testing plan on the content and messaging of the existing landing page to discover user impressions and pain points. Our in-house copywriters then translated the landing page and test questions to German and French. We launched our test on usertesting.com, gathered feedback, and synthesized findings in a collaborative workshop.
Locales: France, Germany, UK
Participants: 10 per locale
Platform: UserTesting.com
Findings & Recommendations
Finding 2
Need for Use Cases
“I feel like you could tell me a little bit more for other reasons that I don’t use it that I don’t know”
Recommendation
• Explain use cases in the FAQ section
Finding 4
Desire for Proof of Trust
“I needed more assurance on why it’s so secure.”
Recommendation
• Add a section about Mozilla’s nonprofit status
• Add press logos
Finding 1
Interest in Pricing
“I would like to know what the overall price is if you’re going to have a monthly bundle or a yearly bundle”
Recommendation
• Introduce more pricing options
• Move up the pricing section
Finding 3
Confusion About CTA
“Does ‘Try Mozilla VPN’ mean it’s free?”
Recommendation
• Update CTA w/clearer language
• Add a money-back guarantee beneath CTA
Visual Research
Because of the strong interest in pricing seen from users in our qualitative testing, we decided to implement a variable pricing model into the VPN landing page. By conducting an audit of competitor and comparator sites, I identified patterns and best practices in variable pricing models.
Highlight top plan
I discovered that recommended plans were emphasized through color, hierarchy, or small banners indicating ‘best value’ or ‘top plan.’
List Features
Features were listed within individual plans if offerings varied or beneath plan options if offerings were the same for all.
Limit Choices
Among the plans audited, no more than four subscription choices were presented. This signaled to keep options minimal.
PHASE III: DESIGN
Visual Exploration
I designed a variety of layouts, experimenting with treatments for the emphasis of a selected plan through visual hierarchy and language, and considered various placements of the feature offerings.
Final Pricing Model Design
The final design I landed on boldly presented all of the features the plans offered upfront, bringing attention to the recommended plan through the language, color, and CTA treatment. The visual treatment of the cards ensured consistency.
Mozilla.org Migration
By working closely with the developer on my team, we adjusted the landing page to fit within the ‘Protocol’ design system on Mozilla.org. The original site was built externally, requiring integration into Mozilla’s ecosystem. By adjusting the grid system, CTAs, and other site styles, we established consistency on the site.
PHASE IV: DELIVER
Product Launch
With our content changes, the introduction of our variable pricing model, and the migration to Mozilla.org in place, we were ready to launch. Our strategy for phase I. was to cross-sell to existing Firefox users through our owned channels.
Revised Landing Page Design
A/B Testing upon Launch
There were still some things we wanted to discover from our users in terms of our pricing model, our CTA copy, and headline messaging. We launched three separate A/B tests, each running for two-week periods.
Pricing Placement
Users clicked on the variable pricing model most when it was placed in the middle of the page. They were interested in learning about the VPN’s offerings before clicking to sign up.
CTA Placement
The winning ‘Get Mozilla VPN” CTA demonstrated that our users preferred language that was direct and succinct.
Headline Messaging
Users’ preference for Headline B. validated our research results, showing that users were more likely to subscribe if we showed that the VPN would provide them with a sense of control.
Falling Short of our Goal
The post-launch results didn’t deliver as we’d hoped. This could be attributable to the low awareness VPNs as a category, or Mozilla VPN’s lack of feature differentiation.
42K
European Subscribers
100K
Global Subscribers
PHASE V: REFLECT
Final Thoughts
Despite not hitting our goals, we created growth in new European markets and contributed to a new revenue source for Mozilla. We addressed our user needs through clear language, leaning into security and trust, and Mozilla’s credibility in the privacy space. We created a variable pricing model, providing our users with choice and control.
We delivered thoughtful work in a condensed timeframe, collaborated well with cross-functional Product partners, and gelled as a team. Through the implementation of the variable pricing model in both Europe and English-speaking countries, we made a global impact for Mozilla.