Release Channel Redesign

We're Getting Bigger and Better
Over the past 6 months our humble product website has grown significantly due to the launch of four new core products: our Beta and Aurora release channels which come in both desktop and mobile flavors. 

That's 4 more products!

These channels are vitally important; we rely on the bugs reported by users on these front lines to make Firefox better. In return these users get a special build of Firefox where they can enjoy the coolest new features first.

To make sure we created a nice new home for them within mozilla.org/firefox - our main consumer facing website - we've done a ton of work: phase one consisted launching a main channels landing below (picture below) - really - just getting the basics live:

Phase two - just completed - launched the second phase of the channel project meant to provide more of a brand identity. 

We want to make sure we're clearly communicating the difference between the Beta and Aurora builds (screenshot below) while enabling the same download ease we see with our GA browser ("general availability").

The Results

• Better Discoverability: After conducting using testing via www.usertesting.com to measure the before and after we learned that users are better able to find these new products, especially from natural search. 
• We saw through user testing that people now have a clear sense of the differences between the different builds. This was severely lacking before and clarity around this was one of our main goals.
• More robust experience: We went from having one main channel landing page to adding an entirely new section on our site consisting of four distinct landing pages and a redesigned landing page

Next Steps

• We still have a long ways to go adjusting the usability on the /channels page - see Bug 725808 for the gory details!
• User testing made it painfully clear that the post download experience is less than ideal: we don't do a good job communicating to these VIP users how they can provide feedback, or what features are ready to be tested. That will be tackled during Q2. 

What do you think? Are there any more improvements you'd like to see on our site? If so, leave comment away!




  

Different By Design

Firefox is a different type of browser. Mozilla is a different type of company. You can see that from our founding story, the way we work, our priorities, our non-profit status and more.

When it comes to marketing at Mozilla - which, hey remember how we're different? -  we call "Engagement" not "Marketing," we think long and hard about how to communicate this difference. 

After all, living and breathing an authentic story is the best way to spread the word about a product and our story is nothing but authentic.

These factors led to the launch of our recent brand campaign. Checkout this smattering of creative and notice its boldness, authenticity, and ability to set us apart from the crowd:

The Web Launch

When it comes to our main user-facing channel -- our website (one of the most viewed sites in the world) here's the creative we launched to get this message across:

And some localized versions... (finals are not this neon of a orange)

The "before" shot (Notice how we hint at, but don't really show our difference):

 
Here's What Happened

With the help of a simple survey we were able to measure the affect this new creative had on overall brand awareness. The shift was significant -- now the majority of all new Firefox users know Firefox is made by a non-profit. 

Before we launched this campaign the opposite was true. We crossed well over the 50% threshold and increased awareness over 20% all without hurting download conversion rate.

Next Steps & Bottom Line

We will continue to do more of this and will roll-out this campaign worldwide. And for now, we know we're on the right track and that aligning our outer 'presentation-layer' with our inner values helps us communicate what matters most to us in a way that resonates with our users.

Droid Vs. FoxDroid Death Match

The snippet channel allows the Engagement department to rapidly test concepts and questions that arise. 

One such question was what sort of graphic we should be using to represent our Android Mobile product. Hypothesis: the existing brand equity of the Droid logo may do a better job attracting and converting qualified visitors than the generic mobile phone we've been using.

Here's a short recap of what we found - perhaps there are other community sites or companies out there that can apply these learnings as well:

Result:
The pure Droid graphic was the most successful at driving people to the Android store. It worked a full % point over the generic phone graphic, and .3 points above the FoxDroid graphic.

Learnings:

• Clearly signaling platform from the graphic increases amount of qualified traffic at basically no harm to clicks
• Cute FoxDroid received slightly more interest (2.5% more clicks), but slightly less qualified interest; cuteness = clicks and interest, but not always highest quality clicks
• People are probably tired of the original mobile graphic - let's change that up
  

Test: Ran three different graphics below through the snippet channel and measured both clicks and conversion. In this case the "conversion event" was a click the the "Get Firefox for Android" button on /mobile.

Conversion Rates:
Android - 2.3%
FoxDroid - 2.0%
Default Phone - 1.3%

I was a tad surprised since I though the customized FoxDroid would resonate with users the most. Are you surprised? Why or why not?

How to Increase Onsite Newsletter Signup Conversion

You've heard it before, small optimizations can have huge impacts that increase conversion numbers. It's true! What follows is the story of one such optimization that my team at Mozilla recently released that increased our daily newsletter signup rate by 25%. 

We Want to Date You
One question always on our minds is how to form lasting relationships with our website visitors. I'm sure many of you have the same question and fear people visiting your website once and moving onto the next sexy thing, never to come back again.

Dumped.

It's a busy inter-webs out there! It happens all the time!

We've recently launched a fantastic email program that allows a deeper connection between Mozilla and our users to be formed. Our web team has worked closely with Winston Bowden (@winstonbowden), our email program lead extraordinaire, to make sure site visitors have a chance to signup for our newly launched monthly newsletter. (sign up here)
 

Launchin' and Learnin'
When the first iteration of newsletter signup form launched it went like this: user clicks signup option in footer and gets linked to a landing page where they can fully register. Can you spot the inefficiency?

 

Above: "Get Monthly News" links to this main Newsletter signup page:

We decided to make this process easier by allowing inline signups. Stripping down the signup form and embedding only the bare-minimum fields within the site footer accomplishes this. It also helps the user experience in two ways: whittles down the signup process, and allows the site visitor to remain on the same page.

Here's what it looks like now:

 

Above: Email signup field is open by default within the footer of every page. Clicking the small tabbed button reveals the other data fields needed for complete signup, as seen below:

Hot or Not?
This slightly more advanced technical implementation did take some time out of our normal release cycle. But was it worth it? Sure was... 

This small change increased the daily signup rate by 25%, or 1,000 incremental new subscribers every day. This will result in an additional 365,000 email subscribers a year!

The Bottom Line
Although next time we launch similar site functionality it should contain the most streamlined user flow from day one, it's never-the-less interesting to see just how big of an effect a small change like this can have.

Do you see other ways we can improve the user experience on Mozilla.com? I'm sure you can. I'd love to hear your ideas in the comments below.