Closed Bug 724083 Opened 13 years ago Closed 13 years ago

[NativeUI GA] Design for /fx page

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Platform:
x86
macOS
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: jfu, Assigned: ltom)

References

(
URL
)

Details

(Whiteboard: Due: 5/4)

Attachments

(18 files)

Firefox /fx promo
464.62 KB, image/png
Details
Firefox /fx promo - 02
529.64 KB, image/png
Details
Beta screenshot
321.50 KB, image/png
Details
Firefox /fx promo - 03
529.01 KB, image/png
Details
tablet about home
189.07 KB, image/jpeg
Details
Firefox /fx promo - 04
459.18 KB, image/png
Details
Firefox /fx promo - 05
538.28 KB, image/png
Details
Screenshot of various mobile download button styles
22.27 KB, image/png
Details
Firefox /fx page - 03
980.88 KB, image/png
Details
Firefox /fx page - 04 Mobile
491.93 KB, image/png
Details
Firefox /fx page - 04 Mobile
489.79 KB, image/png
Details
Firefox /fx page - 05 Mobile
487.87 KB, image/png
Details
/fx page - Desktop Tab - user is up to date
518.05 KB, image/png
Details
/fx page - Desktop Tab - user is not up to date
580.96 KB, image/png
Details
/fx page - Desktop Tab - user is not up to date ALT version
501.09 KB, image/png
Details
/fx - Desktop Tab - user up to date
520.24 KB, image/png
Details
/fx - Desktop Tab - not up to date 2-column
582.53 KB, image/png
Details
/fx - Desktop Tab - not up to date stacked/centered
509.42 KB, image/png
Details
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
Depends on: 724090
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.
Whiteboard: Due: 3/14
Thanks guys, could someone (so kindly) please add a link to the current design for reference?
Hey Tara - the current design can be found at http://www.mozilla.org/en-US/firefox/fx/
Assignee: tshahian → ltom
Status: NEW → ASSIGNED
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.
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
Summary: [Mobile] Design for FF11 /fx promo → [NativeUI] GA Design for /fx promo
Copy tweak: Your Firefox is up to date. Now discover the latest Firefox for Android and take your Web with you, anywhere you go.
Whiteboard: Due: 3/14 → Due: 5/4
Ping Lee - do we have any updates for this?
Attached image 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.
I like the idea...which video would we use though?
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
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
I vote for static image (a nice promo featuring Firefox on Mobile + Android Character).
(In reply to Tara (musingt) from comment #12) > I vote for static image (a nice promo featuring Firefox on Mobile + Android > Character). +1
great lets move forward with a static image!
Attached image Firefox /fx promo - 02 —
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.
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]
Attached image 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?
Attached image 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...?
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.
Jaclyn, do you want to showcase a non-Flickr page (if so, what would appropriate) or think we should update the Red Panda picture?
Attached image tablet about home —
We can show the default about:home start page since we show the start page on the phone
Attached image 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.
I dig it!
Chatted with Mike: adding Mike and Steven to help us with the light animation :) wohoo !!!
Nice work Lee...looks good.
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.
Thanks, John and Jaclyn! Tara - woohoo! Should I go ahead and post PSD?
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
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!
Attached image 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.
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?
Good catch, Jaclyn. Here's the PSD: http://cl.ly/3J3t2p3G091z3E2u3Y0H
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).
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...
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.
(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.
Quick note: we shouldn't be showing a tablet in any of the materials for the upcoming Android launch. Phone only.
Blocks: 751730
Summary: [NativeUI] GA Design for /fx promo → [NativeUI GA] Design for /fx promo
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)
Summary: [NativeUI GA] Design for /fx promo → [NativeUI GA] Design for /fx page
Blocks: 763648
Attached image 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
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
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?
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.
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!
I really like this!
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.
+1 to fast smart safe
(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.
It's a tad small, but I think it could work...? I do like how simplified the read is > very direct
New mockup replacing Sync link with Google Play link
Looks good! Ping me when you're free to talk about the desktop tab.
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...
Desktop / Not up to date version - Download CTA
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!
/fx page - Desktop Tab - user is not up to date ALTERNATE version Desktop / Not up to date version - Download CTA
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.
Thanks, Matej! New mockups below...
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.
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.
This looks great to me. Agreed that the stacked version from comment #59 is the way to go.
a big post here: http://cl.ly/3d3x140J0e2A2Y0D221c
Status: ASSIGNED → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: