763317 - [NativeUI GA] add mobile promo to First Run page

Status: RESOLVED FIXED

(Marketing :: Copy, task)

Description

[John Slater]

We'd like to add a mobile promo to the First Run page, or at least pump up the existing one a bit.

Will need to strategize about the content on Monday. For example: do we replace the brand video with the new mobile one for a few weeks?

Assigning to Matej for copy at first, then will transition to Lee for design.

Comment 1

[Matej Novak [:matej]]

Since we're pretty heavy on the message on this page (and we're already talking about keeping the power of the Web in users' hands), I think we could keep this pretty simple:


Big ideals. Small screen.
Download Firefox for Android »


We could either keep it where it is, or put social in that space and then bump up the mobile promo. What do you think?

Comment 2

[John Slater]

I like the copy. What exactly did you have in mind for where to put it, though? I'm not following that part...

Comment 3

[Matej Novak [:matej]]

If it doesn't just stay where it is now, I was thinking it could go under the video, probably centered, so it would be bigger and more prominent. Then Twitter/Facebook/Join could go where the mobile promo is now (in this grouping: http://www.mozilla.org/en-US/firefox/9.0/whatsnew/).

Comment 4

[John Slater]

Has there been a request to add social back to this page? I can see the value in it, but it's not currently on there (https://www.mozilla.org/en-US/firefox/13.0/firstrun/).

Comment 5

[Matej Novak [:matej]]

(In reply to John Slater from comment #4)
> Has there been a request to add social back to this page? I can see the
> value in it, but it's not currently on there
> (https://www.mozilla.org/en-US/firefox/13.0/firstrun/).

Not that I know of. That was just me coming up with something to put in that space if we move the mobile promo, since you suggested making it more prominent in comment 0.

Comment 6

[John Slater]

Got it! I like the idea.

Comment 7

[Lee Tom]

Attachment: First Run - 01

Hi guys! I may be mistaken to where you thought this content should go - I've been cross referencing the live page w/ some new files, and the copy you've been discussing in this thread, and here's what I came up with!

Comment 8

[Matej Novak [:matej]]

Looks great, but it's missing the copy from comment 1:

Big ideals. Small screen.
Download Firefox for Android »

Without it, I feel like there's an abrupt transition from the brand statement to the mobile video. And since this is a promo, should the CTA be a link rather than the download button (keeping in mind that people seeing this screen have just downloaded Firefox for the first time, so another download button might be confusing or even off-putting)?

Comment 9

[Lee Tom]

Attachment: First Run - 02a

Sorry about that, Matej - I was a little bit fried by last Friday, and couldn't quite stay on the mark. To make up for this, I made 2 different versions for us to look at: 

version 2a
- This is inline with your copy. Not as forceful with the new DL button etc

version 2b
- puts newsletter sign-up and Android DL in the two buckets underneath the video. Both have strong CTA buttons. 

Note: if we'd like to have the social links on this page, we could do a combination of the 2 versions, by leaving the Android link below the video and putting both, newsletter and social links in the buckets. (My intuition tells me that doing all 3 will look quite noisy)

Comment 10

[Lee Tom]

Attachment: First Run - 02b

Comment 11

[John Slater]

I like the download button in 2b, but am not really feeling the small phone. 

The idea is to put the upcoming mobile video in that featured slot, is that right? If so, shouldn't we also have some copy leading into it?

Comment 12

[Matej Novak [:matej]]

(In reply to John Slater from comment #11)
> I like the download button in 2b, but am not really feeling the small phone. 
> 
> The idea is to put the upcoming mobile video in that featured slot, is that
> right? If so, shouldn't we also have some copy leading into it?

There was a question about doing that, yes, but seeing it in layout, I'm worried it might be confusing, at least the way it is now. Users have just downloaded the desktop browser, we're giving them copy about the desktop browser, then there would be a video about mobile and a mobile promo in another location.

I'll try to think of a good lead-in to the video that would make sense tomorrow, but is there anything else we could do from a layout perspective to connect the video and the promo more?

Comment 13

[Matej Novak [:matej]]

What if we lose the "learn more" link (at least while running this expanded mobile promo) from the top blurb so we're not giving users too many CTAs? Then we could put a line like this on top of the video so it's clear what people will be watching (and leave the actual promo in the bottom right, like option 2b):

Fast. Smart. Safe. Learn about Firefox on your phone:


I feel like the other way to approach this is to keep the promo copy, video and download button all together, but separated somehow from the desktop copy at the top. Then the mobile section could go something like this:

Big ideals. Small screen.
See how Firefox keeps you in control of your mobile browsing:
[VIDEO]
[DOWNLOAD BUTTON]


What do you guys think?

Comment 14

[Jaclyn Fu]

If we go with this line "Fast. Smart. Safe. Learn about Firefox on your phone" would prefer if it was phrased "Fast. Smart. Safe. Learn about Firefox for your Android phone"

Comment 15

[Matej Novak [:matej]]

(In reply to Jaclyn Fu from comment #14)
> If we go with this line "Fast. Smart. Safe. Learn about Firefox on your
> phone" would prefer if it was phrased "Fast. Smart. Safe. Learn about
> Firefox for your Android phone"

I'm good with that.

I want to confirm, however, that we're OK using the word "phone." I already mentioned this in another bug, but when I started, it was Mozilla style to say "device" (or "mobile device") instead of "phone" (I'm guessing to distinguish from feature phones), which is what it currently states in the style guide. I know we're now trying to distinguish between phones and tablets, but I wanted to make sure we're all OK using "phone" in these cases. Thanks.

Comment 16

[Jaclyn Fu]

we usually do say mobile device, but because this release is for phones only I don't want to mislead people into thinking it's for tablets as well

Comment 17

[John Slater]

I'd like to see how this looks in layout before approving for 100% sure, but let's give it a try.

Comment 18

[Lee Tom]

Attachment: First Run - 03

New mockup attached. Thanks for the alt versions, Matej. John's going to jump in here and explain our thoughts behind this iteration...

Comment 19

[John Slater]

Thanks Lee. Matej, as we were looking at the page it really felt like there was too much copy. Also, I've been having conversations with the product folks about making sure this page is appropriately welcoming.

So, with all that in mind we played around with some things and came up with the version in comment #18. I think it works better, but please weigh in as well. Also, we might need your help with that subhead - is it "A better browser for the greater good", or "A better browser. For the greater good.", or "A better browser, for the greater good."? 

Thanks!

Comment 20

[Matej Novak [:matej]]

This looks great. I didn't think it was even a possibility to lose the desktop copy given the whole download and installation flow, but I think this is a lot cleaner and has more focus.

The only thing I'm missing now is the "Big ideals. Small screen." copy, but I understand it might be hard to work another headline into this layout.

I wonder if we could change the copy above the video to use some mobile copy from elsewhere (I didn't suggest this earlier because the same line was already in the desktop copy):

"See how Firefox for Android keeps the power of the Web in your hands:"

As for the subhead, I think it should be:

"A better browser, for the greater good."

I feel like the periods would break it up to much as a subhead, but it definitely needs something.

One question about style: Now that we've given this page a pretty big overhaul, should the line above the video still be in Georgia?

Thanks guys!

Comment 21

[John Slater]

(In reply to Matej Novak [:matej] from comment #20)
> The only thing I'm missing now is the "Big ideals. Small screen." copy, but
> I understand it might be hard to work another headline into this layout.

Yeah, I like the line but our thought upon looking at it was that there was one tagline too many on the page, and this was the logical one to cut.
 
> I wonder if we could change the copy above the video to use some mobile copy
> from elsewhere (I didn't suggest this earlier because the same line was
> already in the desktop copy):
> 
> "See how Firefox for Android keeps the power of the Web in your hands:"
> 
> As for the subhead, I think it should be:
> 
> "A better browser, for the greater good."

Sounds good to me, thanks.
 
> One question about style: Now that we've given this page a pretty big
> overhaul, should the line above the video still be in Georgia?

Lee, want to take this one?

Comment 22

[Lee Tom]

Attachment: First Run -04

Before Matej injected the video header with "...the power of Web in your hands:" it felt more like a caption or thought, which felt better as Georgia. Now that it's got JUICE, I think Open Sans works fine. Overall, I'm liking the simplicity of the page now - it feels so much more digestible.

Comment 23

[Matej Novak [:matej]]

I think this looks great. Nice work, team!

Comment 24

[John Slater]

Looks good - let's PSD it!

Comment 25

[Lee Tom]

Look out now! 
PSD here:
http://cl.ly/1a2a2k1U1t1r1e2T1F2M

Comment 26

[John Slater]

Thanks Lee!

Comment 27

[Laura Forrest]

A concern here: it seems like a really confusing user experience to show a mobile video as your first interaction with your new desktop browser. 

Am I mistaken, or will the Android video replace the Mozilla brand video here? (maybe the mocks are from the What's New page?).

Comment 28

[John Slater]

That was the plan, yes. Do you think the current copy is a sufficient way of easing into it? If not, any other ideas on how to make it a smoother fit?