890117 - design and copy: update /whatsnew to promote fx os

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jennifer Bertsch [:jbertsch]]

Hi-

We'd like to update http://www.mozilla.org/en-US/firefox/whatsnew/ to feature a Fx OS call to action similar to the Fx OS banner and text on the mozilla.org homepage.

The CTA will point to the /firefox/os page

Thx,
Jen

Comment 1

[Jennifer Bertsch [:jbertsch]]

Additional info:
1.  screenshot of existing whatsnew attached to this bug
2.  background will change from orange to the same blue bakcground now on /new and /firstrun
3.  this will only be live in countries where the phone is available for sale

Comment 2

[Jennifer Bertsch [:jbertsch]]

Attachment: existing whatsnew

Comment 3

[Jennifer Balaco]

Thanks, Jen. 

I'm going to assign this to Matej to start to look at the text for the page. This banner will be similar to the FxOS one done for mozilla.org.

Cheers, 
Jennifer

Comment 4

[Matej Novak [:matej]]

How about this:

Hooray! Your Firefox is up to date.

Now get a smartphone that let's you live every moment to its fullest.

Get Firefox OS

Comment 5

[Grace Jimenez :grace]

Thanks Matej!

Quick question, do we want to maybe make a connection from Firefox desktop to Firefox OS? 

Since they are already Firefox desktop users, can we use our #3 messaging more? More about Firefox, making the connection of firefox desktop going to mobile and our mission? 

Thanks!

Comment 6

[Matej Novak [:matej]]

That sounds good to me, Grace. I've added a few options in that area below. I wonder if we could do some testing to see what resonates the most on this page.


Hooray! Your Firefox is up to date.

Now get a Firefox OS smartphone and help build a brighter future for the Web and users everywhere.

Learn more


Hooray! Your Firefox is up to date.

Now get the same level of choice, innovation and control in a smartphone.

Get Firefox OS


Hooray! Your Firefox is up to date.

Now transform the future with a smartphone that makes a difference, not a profit.

Get Firefox OS

Comment 7

[Jennifer Bertsch [:jbertsch]]

Hi-

I like all three of these - thanks, Matej.  Let's definitely test which one drives the highest click through to the page.

Grace - if testing these three is OK with you, I'll open an L10N bug with Pascal for translation into Spanish and Polish.

Thx,
Jen

Comment 8

[Matej Novak [:matej]]

Should we test the one in comment 4 and maybe two of the ones from comment 6 to see if there's a different not just in wording but in message as well?

Comment 9

[Jennifer Bertsch [:jbertsch]]

That's smart, Matej.  Yes let's do that.

Comment 10

[Jennifer Bertsch [:jbertsch]]

Maybe one of these two? 

Hooray! Your Firefox is up to date.

Now get the same level of choice, innovation and control in a smartphone.

Get Firefox OS


Hooray! Your Firefox is up to date.

Now transform the future with a smartphone that makes a difference, not a profit.

Get Firefox OS

We could also test Learn More vs Get Firefox OS

Comment 11

[Matej Novak [:matej]]

+1 to testing different CTAs

Comment 12

[Jennifer Balaco]

Assigning design over to Matt.

Comment 13

[MT]

Attachment: firefox_firstrun

Comment 14

[MT]

Attachment: firefox_firstrun_v2

Comment 15

[MT]

Hi guys, 

I've posted a couple of options using Matej's copy. One thing that may need to be clarified for me is with the CTAs. I have included both options Learn more vs Get Firefox OS.  I'm assuming both will lead you to the same page? Should Learn more be a blue hyperlink as opposed to a button? Let me know what you think of these layouts.

Thanks!
Matt

Comment 16

[Matej Novak [:matej]]

Hey Matt, that's a good start, but I think we need to dial the Firefox OS branding way up here. Not all the lines say Firefox OS, so we'll need to include at least the wordmark, but I think we should also use the unleashed fox (and probably a phone image). And as far as I know, there won't be a video on this page anymore (but someone please correct me if I'm wrong) so you'll have more room to work with.

There's also one more line we want to test:


Hooray! Your Firefox is up to date.

Now get a smartphone that let's you live every moment to its fullest.

Get Firefox OS


Any other thoughts from anyone?

Comment 17

[Jennifer Bertsch [:jbertsch]]

Hi Matt-

Thanks for sharing these. 

I agree with Matej about really upping the amount of Fx branding on the page.

We'll be removing any Android images/references from the page and would like a fabulous Fx OS unleashed fox graphic with a phone.

Thanks for your help,
Jen

Comment 18

[MT]

Attachment: firefox_firstrun

Comment 19

[MT]

Attachment: firefox_firstrun_v2

Comment 20

[MT]

Attachment: firefox_firstrun_v3

Comment 21

[MT]

Attachment: firefox_firstrun_v4

Comment 22

[MT]

Thanks guys, I've re-worked a few of the original options as well as added a few more based on Matej's copy variations and ctas.  I think the fox and phone lockup gives it that more obvious FxOS connection...do you feel that we need to include any of the logo and wordmarks beyond what I have on the phone?

Comment 23

[Matej Novak [:matej]]

These are great, Matt. I think it totally works to keep the branding on the phone screen. I particularly like the version in comment 21 as it keeps the image above the fold and creates more visual intrigue. Would that layout work for all the copy variants?

Comment 24

[MT]

Attachment: firefox_firstrun_v4a

Thanks Matej, I've attached another option using the v4 layout along with your longest headline.  The other ones are a bit tighter since they aren't as lengthy, but I still think this could work.

Comment 25

[Matej Novak [:matej]]

I think that still works nicely. What does everyone else think?

Comment 26

[Jennifer Bertsch [:jbertsch]]

I like it.  Thanks!

Grace, Chad, Dan, and John S - we were asked by Dave S to update the /whatsnew page to promote Fx OS in countries where it is on sale.  We want to test the following text for click thru with images v3, v4, and v4a above:

#1
Hooray! Your Firefox is up to date.

Now get a smartphone that let's you live every moment to its fullest.

Get Firefox OS (Polish only) or
Learn More (Spanish only)

#2
Hooray! Your Firefox is up to date.

Now get the same level of choice, innovation and control in a smartphone.

Get Firefox OS (Polish only) or
Learn More (Spanish only)

#3
Hooray! Your Firefox is up to date.

Now transform the future with a smartphone that makes a difference, not a profit.

Get Firefox OS (Polish only) or
Learn More (Spanish only)


Please send us any feedback by end of day on Thursday.

Thx,
Jen

Comment 27

[Chad Weiner [:chadw]]

I like.  Thanks, all.

Comment 28

[John Slater]

Copy options look good, thanks all. (One note: option 1 should be "lets you" rather than "let's you"...please make sure that gets fixed in the actual tests.)

Can you clarify the testing plan for me? Is the idea that copy option 1 would be paired with design v3, copy option 2 with design v4, etc or is it more multivariate than that? I ask b/c two of the design options seem to be using the same text.

Related, is this more of a design test or a copy test? I may have some more design feedback in particular depending...

Comment 29

[Matej Novak [:matej]]

(In reply to John Slater from comment #28)
> Copy options look good, thanks all. (One note: option 1 should be "lets you"
> rather than "let's you"...please make sure that gets fixed in the actual
> tests.)
> 
> Can you clarify the testing plan for me? Is the idea that copy option 1
> would be paired with design v3, copy option 2 with design v4, etc or is it
> more multivariate than that? I ask b/c two of the design options seem to be
> using the same text.
> 
> Related, is this more of a design test or a copy test? I may have some more
> design feedback in particular depending...

My understanding is that it's a copy test and all versions will be using the same design, the one in comment 21 (and comment 24).

Can someone confirm?

And good catch on "let's." I totally owe you one for that.

Comment 30

[Dan Horner]

Hey all, these look great. Also wondering if we could try some copy that references the Carrier and or OEM-

i.e. 

[...] Get Firefox OS from T-mobile

[...] Get the Alcatel One Touch Fire® [from T-mobile].

Would definitely be interesting to test.

Comment 31

[Jennifer Bertsch [:jbertsch]]

Matej and John - yes, a copy test only.  I'd like to pick just one design.

Dan - let me confirm that we can serve the page by country (carrier/oem) and not just by language (Spanish)

Comment 32

[John Slater]

Got it, thanks. That was my favorite of the designs (the one in comment #21 and 24), so good to hear.

Should we make the CTA button green?

Comment 33

[Holly Habstritt Gaal [:Habber]]

It's looking really great. The challenge we have is that there are 2 important messages to communicate. Confirmation that the user is now up to date, and the next action (FxOS messaging). 

One comment I'd make regarding the design in comment 24 is that the font size and weight in the FxOS messaging in the page is identical to the banner message on the top of the page. The hierarchy and balance of all the messaging on this page could be benefit by having variation in the font styles between "Hooray! Your Firefox is up to date." and the secondary (but still important) message below.

Comment 34

[Matej Novak [:matej]]

(In reply to Jennifer Bertsch [:jbertsch] from comment #31)
> Matej and John - yes, a copy test only.  I'd like to pick just one design.
> 
> Dan - let me confirm that we can serve the page by country (carrier/oem) and
> not just by language (Spanish)

Doesn't the button link the FxOS page? I think it would be confusing to mention a carrier or device and then redirect the user to a page that doesn't talk about either.

Comment 35

[Matej Novak [:matej]]

(In reply to Holly Habstritt [:Habber] from comment #33)
> It's looking really great. The challenge we have is that there are 2
> important messages to communicate. Confirmation that the user is now up to
> date, and the next action (FxOS messaging). 
> 
> One comment I'd make regarding the design in comment 24 is that the font
> size and weight in the FxOS messaging in the page is identical to the banner
> message on the top of the page. The hierarchy and balance of all the
> messaging on this page could be benefit by having variation in the font
> styles between "Hooray! Your Firefox is up to date." and the secondary (but
> still important) message below.

I totally see your point, but I wonder how much we can do while not deviating from our style guide.

Matt, John, any ideas?

Comment 36

[MT]

Thanks guys. With regards to Holly's comment about messaging hierarchy, the challenge with this layout is the addition of the phone and fox lockup.  I had a look at some of the previous /firstrun pages, and they mostly appear to make use of a headline that spans across the full width, which allows for a larger font size (probably around 72pt), this gives a distinction between the two messages. Due to the narrow width to work with, we are limited to the size, especially with the longer headlines. Here is an example of what the FxOS message appears like at a bumped up font size.  http://cl.ly/image/0Y3K2U0A3v2Y

Comment 37

[Jennifer Bertsch [:jbertsch]]

Thanks, Mat.

Could I ask you to please show us one more version?  For the next one, could you take the "Now get a smartphone" text down like one-two sizes to make is just the tiniest bit smaller than the "Hooray" text?  And make the CTA button green?

Comment 38

[John Slater]

(In reply to Jennifer Bertsch [:jbertsch] from comment #37)
> Thanks, Mat.
> 
> Could I ask you to please show us one more version?  For the next one, could
> you take the "Now get a smartphone" text down like one-two sizes to make is
> just the tiniest bit smaller than the "Hooray" text?  And make the CTA
> button green?

+1

Thanks Matt!

Comment 39

[MT]

Attachment: firefox_firstrun_v4

Hi Jennifer,

Here is an updated v4 with the changes you've requested.  I've had to slightly reposition the fox and phone lockup, by moving it inward to fill in the space. Let me know what you think of this layout.

Comment 40

[Jennifer Bertsch [:jbertsch]]

Thanks Mat!  I think this look great.

John, Matej, Holly - what do you think?

Comment 41

[Matej Novak [:matej]]

(In reply to Jennifer Bertsch [:jbertsch] from comment #40)
> Thanks Mat!  I think this look great.
> 
> John, Matej, Holly - what do you think?

+1 — I like it a lot!

Comment 42

[John Slater]

+1!

Comment 43

[MT]

Thanks guys,

Here is a link to the PSD:

https://www.dropbox.com/s/mpzhcikex7atu5x/firefox_firstrun.psd

Comment 44

[Jennifer Bertsch [:jbertsch]]

An additional clarification on the text.  We have to turn it on for all Spanish speaking locales, but can geo-target the Get the Phone CTA for Spain, Colombia, and Venezuela, and Poland and use Learn more for all other Spanish speaking locales.

Therefore, Dan, we can use the partner's name as you suggested.  Just note that this will get more complicated once we have countries with more than one provider.

Comment 45

[Holly Habstritt Gaal [:Habber]]

Looks great! Thanks for doing a few iterations for us to check out.

Comment 46

[Matej Novak [:matej]]

(In reply to Jennifer Bertsch [:jbertsch] from comment #44)
> An additional clarification on the text.  We have to turn it on for all
> Spanish speaking locales, but can geo-target the Get the Phone CTA for
> Spain, Colombia, and Venezuela, and Poland and use Learn more for all other
> Spanish speaking locales.
> 
> Therefore, Dan, we can use the partner's name as you suggested.  Just note
> that this will get more complicated once we have countries with more than
> one provider.

I would still rather avoid this since we're pointing to our page and not a partner site.

Comment 47

[Dan Horner]

(In reply to Matej Novak [:matej] from comment #46)
> I would still rather avoid this since we're pointing to our page and not a
> partner site.

Ok - will concede this. Thanks Matej.

Comment 48

[Jennifer Balaco]

Jen, 

Can this bug be resolved now? Thanks for any update.

Comment 49

[Jennifer Bertsch [:jbertsch]]

Hi Jennifer B-

Do MT and Matej have any time to do a little more work on this one in September?

The requests are:
1.  Prioritize the "Your Firefox browser is up to date" over the "Fx OS message" (design task)
2.  Change the "Hooray your browser is up to date" message to something more along the lines of "Congratulations, your browser is safer and more secure" (copy task in consultation with Laura Forrest about Fx 25 release content)
3.  Change the main text about Fx OS to better reflect the connection between what a great product the desktop browser is desktop and why Fx OS is also great.  Could be from a mission POV or a features POV. (copy task)

Thanks for your help,
Jen

Comment 50

[Jennifer Balaco]

Hi Jen, 

I'm checking in to see if that timing works for them. I know they are both busy with other projects right now. Hopefully I'll have an update by the end of the week. 

Cheers, 
Jennifer

Comment 51

[Jennifer Balaco]

Matej can get copy finalized by September 30. Once that's done Matt can get to work. So it won't be quite the end of September. Also, just a FYI - there is chance that this could get pushed to after the Summit, depending on how Matt's work for that is going when the copy's done.

Comment 52

[Jennifer Bertsch [:jbertsch]]

Great!  Thanks for the update Jennifer B!

Comment 53

[Matej Novak [:matej]]

Here are a few options for this. The first have the same lead line, but the third is different. There may be a way to mix and match, but I was trying to avoid repeating the word "now," so try to read them as individual units.


[OPTION 1]

Congratulations! Your browser is now safer and more secure than ever.

We're bringing the same superior browsing experience to smartphones with Firefox OS.

Learn more »


[OPTION 2]

Congratulations! Your browser is now safer and more secure than ever.

Take control of your life online and get the best the Web has to offer no matter where you go.

Get Firefox OS »


[OPTION 3]

Welcome to a safer and more secure browsing experience.

Now get the same level of choice and innovation in a smartphone.

Get Firefox OS »

Comment 54

[Jennifer Bertsch [:jbertsch]]

Thanks, Matej.  I really like the "Welcome" opening line.  And all 3 options for the second line.

Laura - what do you think?

Comment 55

[Laura Forrest]

Feedback:

1. Number 1 and number 3 do a great job connecting the desktop experience with the Phone, since there's more of a clear bridge within the copy. That connection is there in #3, but not as obvious. Making it obvious is important so it doesn't seem like an unrelated ad. Use one of the more obvious, shorter lines. 

For reference: 
"We're bringing the same superior browsing experience to smartphones with Firefox OS." or 
"Now get the same level of choice and innovation in a smartphone."

2. "Welcome" seems a bit odd since they're already current users. Let's go with one of the "Congratulations" line. 

3. Considering the above, I prefer this variation since it's more focused on the user ("now get") vs. talking about us ("we're bringing"). That makes my top choice:

Congratulations! Your browser is now safer and more secure than ever.
Now get the same level of choice and innovation in a smartphone.
Learn More

Comment 56

[Matej Novak [:matej]]

If we're going with a "learn more" CTA, I'd recommend "Learn more about Firefox OS" since the name of the product isn't anywhere else in the copy. Otherwise that combination looks great to me.

Comment 57

[MT]

Attachment: firefox_firstrun-2_v1.jpg

Comment 58

[MT]

Attachment: firefox_firstrun-2_v2.jpg

Comment 59

[MT]

Attachment: firefox_firstrun-2_v3.jpg

Comment 60

[MT]

Attachment: firefox_firstrun-2_v4.jpg

Comment 61

[MT]

Attachment: firefox_firstrun-2_v5.jpg

Comment 62

[MT]

Attachment: firefox_firstrun-2_v5a.jpg

Comment 63

[MT]

Hi guys, I've attached a few layout variations based on Matej's copy.  If there are any copy lines you would like to see in a certain layout please let me know.

Thanks!
Matt

Comment 64

[Matej Novak [:matej]]

Hey Matt, these look great, but I particularly like the one with the blue box. It still gives prominence to the upgrade message yet keeps the two thoughts separate. Nice.

Comment 65

[MT]

Thanks Matej. The blue box one was a last minute thought, but I do think it gives a good separation to the two messages.  Also keeps the page from looking too stark in my opinion.

Comment 66

[Laura Forrest]

(In reply to Matej Novak [:matej] from comment #64)
> Hey Matt, these look great, but I particularly like the one with the blue
> box. It still gives prominence to the upgrade message yet keeps the two
> thoughts separate. Nice.

+1.

Comment 67

[Jennifer Bertsch [:jbertsch]]

Thanks Matej, MT, and Laura.  I like the blue box version too.

My only thought on the text is that maybe we don't need the word "now" in the second sentence if we have it in the first.

I'll share with Asa via email for any feedback from him.

Comment 68

[Jennifer Bertsch [:jbertsch]]

Hi Team-

We have sign-off to move forward with the following text:

Congratulations! Your browser is safer and more secure than ever.
Get the same level of choice and innovation in a smartphone.
Learn more about Firefox OS

And image firefox_firstrun-2_v5a.jpg

MT - could you please provide a PSD in this bug?

I'll tell Jon Petto that we are ready to code.

Thx,
Jen

Comment 69

[MT]

Attachment: firefox_firstrun-2_FINAL.jpg

Hi guys, I've attached a jpg of the final first run layout, based on the v5a look. I will post a link to the PSD shortly as well!

Comment 70

[MT]

Here is the link to the first run PSD:

https://www.dropbox.com/s/rrxgpk52fq119zy/firefox_firstrun_FxOS.psd