724083 - [NativeUI GA] Design for /fx page

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jaclyn Fu]

Hi Tara,

We are planning to replace the current tablet promo with one that focuses on the new native UI phone version for the upcoming FF11 launch in late March, and will need some help for a spiffy new design.

Look and feel:
-New and shiny: want to catch the visitor's attention that this isn't the same browser they've seen before 
-phone + tablet: more emphasis on phone, but also want to make the connection between Sync 
-maybe a mix of real images and drawn/cartoony stuff? 

Copy coming soon in another bug!

Deadline: Waiting to hear back on implementation deadline, but let's say March 5 tentatively

Comment 1

[Laura Forrest]

Two additions from the website end of things:

Look and feel:
-Please keep in place the core functional text of this page, which is the "Your Firefox is up to date" copy that's currently at the top of the page
-Also at this time let's change the Affiliate promo at the bottom of this page to a Beta promo, rough copy to match the rest of Grace's campaign with the CTA to download Beta. 

Implementation Deadline:
-Creative hand-off due to webdev on March 14th since this campaign goes live March 30th.

Comment 2

[Tara (musingt)]

Thanks guys, could someone (so kindly) please add a link to the current design for reference?

Comment 3

[Jaclyn Fu]

Hey Tara - the current design can be found at http://www.mozilla.org/en-US/firefox/fx/

Comment 4

[Jaclyn Fu]

Hi Lee,

Copy:

Your Firefox is up to date.
Now discover the new Firefox for Android and take your Web with you, anywhere
you go.

It's a little longer than usual for a /fx promo, so we can tweak as needed.

Comment 5

[Jaclyn Fu]

Hi all, the final release launch for native UI has been pushed back to early June - we can adjust this deadline accordingly for a late April hand off

Comment 6

[Jaclyn Fu]

Copy tweak: 

Your Firefox is up to date.
Now discover the latest Firefox for Android and take your Web with you, anywhere
you go.

Comment 7

[Jaclyn Fu]

Ping Lee - do we have any updates for this?

Comment 8

[Lee Tom]

Attachment: Firefox /fx promo

Taking cue from a recently designed /central page, I thought it might be informative and visually compelling to use the Firefox for Android video instead of a static graphic of a mobile device. I know there're some snags regarding the video, but let me know what you think of this idea and how you'd like to proceed.

Comment 9

[John Slater]

I like the idea...which video would we use though?

Comment 10

[Jaclyn Fu]

Hi Lee,

Now that I see it all together, I'm not sure if the copy fits with the video. Depending which direction the video goes, it might not strongly support the "take you Firefox with you" message that's in the promo.

Can we also tweak the copy to say "now discover the LATEST Firefox for Android" instead?

We might need a contingency plan and not bet on the video for this promo

Comment 11

[Lee Tom]

It would be great if we can avoid doubling the design work for this. Should we decide to go forward with either

A: a static image with existing copy, or
B: the video with revised copy

Comment 12

[Tara (musingt)]

I vote for static image (a nice promo featuring Firefox on Mobile + Android Character).

Comment 13

[John Slater]

(In reply to Tara (musingt) from comment #12)
> I vote for static image (a nice promo featuring Firefox on Mobile + Android
> Character).

+1

Comment 14

[Jaclyn Fu]

great lets move forward with a static image!

Comment 15

[Lee Tom]

Attachment: Firefox /fx promo - 02

Comment 16

[Tara (musingt)]

Looks good to me.  Jaclyn?

Note for future:  Perhaps we can explore showcasing other sites (like Instagram or Pinterest) vs. Flickr.  The latter being very recognized but also somewhat outdated.  Just a thought.

Comment 17

[Jaclyn Fu]

Hi Lee - looks cool! I like the Android guy peeking out from the back. The only thing is the screenshot in the phone is the old version and we need to update it [will provide the new screenshot]

Comment 18

[Jaclyn Fu]

Attachment: Beta screenshot

Hi Lee - attached is the updated screenshot. Except in the URL bar there's an Aurora icon, can you swap it out with a Firefox logo?

Comment 19

[Lee Tom]

Attachment: Firefox /fx promo - 03

Thanks for the updated screenshot, Jaclyn. 

I agree that the flickr + red panda screen looks outdated. I'm not sure if we wanted to open up that can of worms - I know that it prompts a lot of other considerations that go beyond visual design ie: sites that we want/have permission to showcase, which sites would best highlight our improved functionality etc. At very least, maybe we could change the Flickr image we're showing...?

Comment 20

[Tara (musingt)]

Can we animated the Droid character?  he slides out from behind the devices, blinks once, or twice and then becomes static.  Perhaps on hover he blinks too?  

I agree that the site content (the Panda) is outdated.  I also feel like the red Panda is so dominant that it takes the attention away from the Droid.... so, I'd vote to have another picture in there even if we keep it on Flickr.

Comment 21

[Lee Tom]

Jaclyn, do you want to showcase a non-Flickr page (if so, what would appropriate) or think we should update the Red Panda picture?

Comment 22

[Jaclyn Fu]

Attachment: tablet about home

We can show the default about:home start page since we show the start page on the phone

Comment 23

[Lee Tom]

Attachment: Firefox /fx promo - 04

Thanks for attaching that screenshot, Jaclyn. After replacing the Flickr page, it looked a little bit empty so I tried seeing what the Android dude looked like peeking into the screen - I like Tara's idea about light animation (comment 20) but if we don't have the resources to make that happen, this could be a viable (static) option.

Comment 24

[Jaclyn Fu]

I dig it!

Comment 25

[Tara (musingt)]

Chatted with Mike:  adding Mike and Steven to help us with the light animation :)  wohoo !!!

Comment 26

[John Slater]

Nice work Lee...looks good.

Comment 27

[Tara (musingt)]

It's great Lee, thank you.  fwiw I'm not a huge fan of the startpage screenshot direction.  I like that the Android character gets more visibility, but the page itself feels rather bland to me.  I preferred Lee's previous version (without the red Panda).   Are the devices showing different screens intentionally?  Why not have the same screen that's on the phone displayed in the tablet? Would be cool if we did something like showing our Youtube channel (or maybe it's back to Flickr or twitter or something) but we put the Android character into the video box (or it's a flickr photo of the droid, etc) and he waves his hand or something.  

Just sharing some thoughts / nits.

Comment 28

[Lee Tom]

Thanks, John and Jaclyn! 
Tara - woohoo! Should I go ahead and post PSD?

Comment 29

[Jaclyn Fu]

The tablet and phone UI are intentionally different (tablets haven't been updated to native UI yet). 

Let me know what would look best and I can get the screenshot for it

Comment 30

[Lee Tom]

Hi Jaclyn, 
Tara and I brainstormed some ideas for a more visually compelling image in the tablet. We're thinking about leveraging imagery from the Firefox for Android video (green Android guy on orange background) to keep consistent to the campaign. I'd like to see what a screenshot of that looks like within a YouTube player page. Would you mind sending a screenshot of a YouTube page on your tablet for me? Thanks!

Comment 31

[Lee Tom]

Attachment: Firefox /fx promo - 05

Here's a version with YouTube on the tablet screen. I took a still from our Firefox for Android movie, so we get more Android-dude presence and color into the promo. I think I might be overkill on a static promo to have Android dude peeking out from behind devices (with him on the tablet and CTA) but if he's animated and pops out, and maybe away - it could work.

Comment 32

[Jaclyn Fu]

Really cool! 

Only nitpicky thing would be on the tablet, the Youtube tab thumbnail has a "this plugin doesn't work" image. Can you replace that with the screenshot of the video?

Comment 33

[Lee Tom]

Good catch, Jaclyn. 

Here's the PSD:
http://cl.ly/3J3t2p3G091z3E2u3Y0H

Comment 34

[Steven Garrity [:sgarrity]]

Attachment: Screenshot of various mobile download button styles

We've got a couple of different mobile download button styles going and I'd like to sort out which is the One True Button style.

The attached screenshot shows (A.) the download button from the PSD for the /firefox/fx promo (this bug), and  (B.) the button on the newish http://mozilla.org/firefox/channel page.

There are probably meaningful differences between the two, given the context, but I'd like to make sure the differences are intentional and worthwhile.

Here's a quick (mostly obvious) list of differences that we should try to reconcile:

1. Button text
   A. "Get Firefox >> for Android"
   B. "Download for Android"

2. Arrows
   A. Text-based double chevron "»" on right
   B. Image-based white arrow on left

3. Text alignment
   A. Centered
   B. Left-aligned

4. Border-radius
   A. About 6px
   B. About 4px (as per smartell's Sandstone designs)

5. Additional links
   A. nothing
   B. Systems & Languages, What’s New, Privacy
   I presume we need these links with all download buttons?

We ended up with a smattering of different buttons styles on the old PHP site, so now seems to be the time to make sure we keep the variations to a minimum. That said, the buttons can certainly be changed for different contexts. For example, the download buttons on the /firefox/channel page don't have a Firefox logo on them, which probably makes sense since there are several download buttons display and already a row of logos above them (which may apply on this /fx page too).

Comment 35

[Lee Tom]

Thanks for bringing this up, Steven. I had a feeling we were going to cross this bridge soon. The good part is that the layouts/grids that Sean had been developing for responsive design are solidifying - this should help inform consistent button widths etc. 

Hopefully, I can carve some time out with Sean, John and Ty to figure these out soon, unless Sean already has these in his back pocket...

Comment 36

[Tara (musingt)]

Hey guys, just wanted to note that this page isn't ready to be implemented quite yet.  The design is actually still in discussion and we were planning on having some light animations added to this page. 

I think there are still various things we can do to crisp up the content and design overall.  For example, there are two download buttons stacked on top of each other that feels weird.  If I arrive here from my desktop, see the "hooray you're updated" message, and then another promo asking me to "get Firefox" it's pretty confusing.  

The graphic should also probably focus only on the mobile device vs. the tablet.  That's how we've done it on other pages and it's also a better way to highlight mobile vs. scaling it down to fit a tablet. 

Animation will be light, and we're actually thinking of handing that off to an outside agency to help lighten the burden on webdev to implement this and other pages for release - (I dropped a note to MikeA and Chris More about this) 

So, in short:  please place a slight pause on this bug while we figure out next steps.

Comment 37

[Steven Garrity [:sgarrity]]

(In reply to Tara (musingt) from comment #36)
> So, in short:  please place a slight pause on this bug while we figure out
> next steps.

Sure, thanks.

Comment 38

[John Slater]

Quick note: we shouldn't be showing a tablet in any of the materials for the upcoming Android launch. Phone only.

Comment 39

[John Slater]

Exciting change of direction on this page!

We're now going to have a single download page for desktop & mobile (the current /mobile page will remain, but is going to be more focused on our general mobile activities rather than acting as a specific page). In the new configuration, /new will be geared towards desktop downloads (with a mobile link) and /fx will be heavily emphasizing mobile (with a desktop link). 

So, the basic content outline discussed in the earlier comments remains, but Lee is shifting around the look of the page (incorporating more of the style from bug 724056) as part of this.

Lee, I know you made some good progress on this on Friday. When you feel like you have something worth sharing, please post here and we can assess what the next steps are. Matej, some new copy will likely be needed here & there, but let's see what Lee comes up with before determining what exactly that is.

(also changing the name of this bug to reflect that it's now about the whole page, not just the promo)

Comment 40

[Lee Tom]

Attachment: Firefox /fx page - 03

Attaching what I *think* we had sketched out last Friday - but this definitely needs some clarity around content and hierarchy of content. Reflecting our conversation last week you will find:

- 70/30 split of hero section (mostly FFx for Mobile to the left, with general "Firefox for the Web" links and attributes of both FFx for Desktop and Mobile, in the right column)
- I'm assuming the 3 links that I had initially mocked up on the Mobile homepage would need to be coupled with the smartphone/hero area
- Desktop users section beneath main section. This would confirm users' version is up to date, offer a link to DL a "fresh copy" of FFx, Beta link, and link to see all Desktop features

Comment 41

[Lee Tom]

also, I forgot to add that the video thumbnail in the right-hand column would open a lightbox/play the new Mobile video that's being worked on currently

Comment 42

[Matej Novak [:matej]]

I don't know what you guys discussed last week, exactly, but I think it's looking good over all. My biggest question is about the headline. Is there a reason we wouldn't want to use "Fast. Smart. Safe." here?

Also, does this need an actual desktop download button? I'm wondering what happens in the bottom area if the user's Firefox isn't up to date. Do they get served /new instead?

Comment 43

[John Slater]

Agreed that the headline should be shorter...Lee and I are going to work out a few more layout-related things on this page soon and then we'll come back to it.

Comment 44

[Lee Tom]

Attachment: Firefox /fx page - 04 Mobile

Attached here is a new version of the page combining both Mobile and Desktop DLs. From what I understand, the toggling buttons used on our Release pages were a little confusing to our users, so I'm trying a tabbed system here to toggle from Mobile to Desktop. 

Please take a look at the content, and let me know if the right links/copy are presented well here. Thanks!

Comment 45

[John Slater]

I really like this!

Comment 46

[Matej Novak [:matej]]

Love it, Lee! Looks amazing.

John, I agree that Firefox for Android is a good headline for this page, but do we want to stick with that more general subhead or go with something from the most recent stuff? Maybe one of the following:

Firefox for Android
Fast. Smart. Safe.

Firefox for Android
Get the mobile browser that's got your back.

Firefox for Android
Put the power of the Web in your hands.

Comment 47

[Jaclyn Fu]

+1 to fast smart safe

Comment 48

[John Slater]

(In reply to Jaclyn Fu from comment #47)
> +1 to fast smart safe

Agreed, although there's a chance that could look too short when we put it in layout.

Comment 49

[Lee Tom]

Attachment: Firefox /fx page - 04 Mobile

It's a tad small, but I think it could work...? I do like how simplified the read is > very direct

Comment 50

[Lee Tom]

Attachment: Firefox /fx page - 05 Mobile

New mockup replacing Sync link with Google Play link

Comment 51

[John Slater]

Looks good!

Ping me when you're free to talk about the desktop tab.

Comment 52

[Lee Tom]

Attachment: /fx page - Desktop Tab - user is up to date

Attaching 2 new mockups below: the Desktop tab versions that identify

- users up to date
- users not up to date

Please review content on both versions, and let me know your thoughts. Matej, I think we're going to need some word-wizardry from you here...

Comment 53

[Lee Tom]

Attachment: /fx page - Desktop Tab - user is not up to date

Desktop / Not up to date version - Download CTA

Comment 54

[John Slater]

Thanks Lee! 

Matej, the copy on both pages (comments 52 & 53) is almost there, but definitely needs a final look-through by you before we call it final. Some of it was put in as a placeholder, so don't be shy about calling out anything that feels weird and replacing it with something better. Also, there's a bit of greek in there that obviously needs to be replaced. Appreciate it!

Comment 55

[Lee Tom]

Attachment: /fx page - Desktop Tab - user is not up to date ALT version

/fx page - Desktop Tab - user is not up to date ALTERNATE version

Desktop / Not up to date version - Download CTA

Comment 56

[Matej Novak [:matej]]

For the users up to date version:

• I think the headline and subhead look great.

• Here's some updated copy for the promos along the bottom (note the change in capitalization on the first headline):

Need a fresh copy?
You've come to the right place!
[Download button]

Try Firefox Beta
Get a sneak peek at the latest features and innovations coming soon to Firefox.
Download now »

• The mobile promo felt a bit choppy, so here are two new versions to consider:

Get Firefox for Android
Get the mobile browser that's got your back free from the Google Play Store »

Fast. Smart. Safe.
Download Firefox for Android free from the Google Play Store »


For the users not up to date version:

• Over all it looks good, just wondering if we want to bring in any of the language from the /new page. Here's what I was thinking:

Different by Design
Get the latest version of Firefox. It's fast, flexible and secure.

• Some changes to the promo slots:

Learn more about the latest Firefox features »

Customize your Firefox with add-ons »

Get Firefox for Android free from the Google Play Store »


Thanks! Let me know if you have any questions.

Comment 57

[Lee Tom]

Attachment: /fx - Desktop Tab - user up to date

Thanks, Matej! New mockups below...

Comment 58

[Lee Tom]

Attachment: /fx - Desktop Tab - not up to date 2-column

Comment 59

[Lee Tom]

Attachment: /fx - Desktop Tab - not up to date stacked/centered

For the Not Up To Date state of this page, I think I'm preferring this layout. The CTA has more immediate presence to me.

Comment 60

[Matej Novak [:matej]]

Thanks Lee, I think these look great (I agree about the second version of the not up to date page). Let me know if there's any more copy feedback on these.

Comment 61

[John Slater]

This looks great to me. Agreed that the stacked version from comment #59 is the way to go.

Comment 62

[Lee Tom]

a big post here:
http://cl.ly/3d3x140J0e2A2Y0D221c