Closed Bug 724056 Opened 13 years ago Closed 13 years ago

[NativeUI GA] Redesign firefox/mobile (responsive)

Categories

(Marketing :: Design, task)

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

Tracking

(Not tracked)

Status:
RESOLVED WONTFIX

People

(Reporter: jfu, Assigned: ltom)

References

(
URL
)

Details

(Whiteboard: Due: 6/22)

Attachments

(6 files)

Firefox/mobile Home - 01
505.86 KB, image/png
Details
Firefox/mobile Home - 02
436.97 KB, image/png
Details
Firefox/mobile Home - 03
439.16 KB, image/png
Details
Firefox/mobile Home - 04
438.79 KB, image/png
Details
Firefox/mobile Home - 04b
439.55 KB, image/png
Details
Firefox/mobile Home - 05
761.13 KB, image/png
Details
Hi Tara, We will need to update the hero image on /mobile with an updated native UI screenshot on the phone device. I will add the screenshot here after FF11 goes to Beta (next week). Design hand-off: March 1 Thanks!
Thanks Jaclyn. If you have the PSDs (or we can hung them down in other bugs) and this is just replacing the screenshot, I"ll assign to Rhonda and see if she can help us here. I also know that Ty was thinking of a more advanced way of doing these updates (based on how they are coded) Lets be sure to pull that conversation aside and see what his thoughts are sometime soon so we can help each other move faster.
Assignee: tshahian → rspencer
Status: NEW → ASSIGNED
Sounds like a plan! Rhonda - I'll dig around for the PSD and attach it here Thanks
Hi Tara/Slater - in addition to the screenshot update and some copy tweaks, this page should also have a responsive design. Will we have resources for the responsive design to be applied to this page by the launch in June?
(so should I open a different bug for that or just repurpose this bug for all the /mobile design needs?)
I guess it depends on your priorities. Slater can speak to the new request and timing. And you can let me know if you're able to wait to have everything updated at once, or if you prefer to split the bugs and tackle this one first.
I believe Slater mentioned the /m pages will be retired by the June release, so optimizing this page using a responsive design would be a high priority item. Let's do everything at once so we don't waste any efforts updating this current layout and then have to redo it for the responsive one. Just let me know what you will need from me
Assignee: rspencer → tshahian
Status: ASSIGNED → NEW
Summary: [Mobile] Update hero image on /mobile → [Mobile] Update /mobile hero graphic + responsive
Let's discuss this in the meeting I just set up for Friday. Thanks!
Status: NEW → ASSIGNED
Hi John - just wanted to check in on the status of the website projects for Firefox Android. We're about 2 months away from launch and wanted to make sure we have enough time to do the redesign and implementation. Thanks
Summary: [Mobile] Update /mobile hero graphic + responsive → [Mobile] Redesign firefox/mobile (responsive)
Blocks: 751730
Summary: [Mobile] Redesign firefox/mobile (responsive) → [NativeUI GA] Redesign firefox/mobile (responsive)
(changing this to a copy bug to kick off the process; we can move back to design when Matej is finished) The Android launch is coming up at the end of June, and we need to revamp the mobile presence on our site as part of that. This page is the main landing page for mobile, and we'd like to dramatically simplify it compared to what's live now...a relevant comparison might be http://www.mozilla.org/en-US/firefox/new/ in terms of amount of content, although that layout & design isn't necessarily correct in this case. The main items to be included in this page are: - headline/subhead. Per Jaclyn, the general message here is "Browse faster, smarter, and safer on your Android phone and tablet by synchronizing your desktop Firefox to your mobile device." - a link to the supported devices page - a link to the mobile features page - a link to the Firefox Home page for iPhone users Design requirements: - some sort of compelling hero image (using one of Ty's phone illustrations seems like a good place to start) - Android robot character needs to be prominently present - must be fully responsive Matej, if you could tackle this next week that would be ideal. We'll assign a design resource soon. Thanks!
Assignee: tshahian → Mnovak
Component: Design → Copy
OS: Mac OS X → All
QA Contact: design → copy
Hardware: x86 → All
On it. Should be fine to get it done this week.
I'm guessing the main link on this page will be a download button, so I added a "learn how" to the end of the subhead since it talks about synchronizing. Other than that, should be pretty straightforward. Let me know what you think. [HEADLINE] Fast. Smart. Safe. [SUBHEAD] Get the most out of Firefox for Android by synchronizing your desktop and mobile device. Learn how » [BUTTON] Download Firefox for Android [LINKS] Learn more about Firefox for Android » Find out if your device is supported » Get Firefox Home for your iPhone »
Thanks Matej. This looks good to me. To sum up the quick email exchange we just had offline, Jaclyn is doing some message testing around mobile that will likely influence the final direction of the text on this page. But, I think this is a good starting point, so I'm moving this bug over to design. We can come back and edit the copy more later if the testing indicates a better way.
Assignee: Mnovak → tshahian
Component: Copy → Design
QA Contact: copy → design
ding ding ding! welcome to the Design portion of this bug. Please meet designer extraordinaire... Lee Tom. My main comment here is that I'd love to incorporate some light animation into the hero graphic with the Android Character. This'll go a long way especially on a more simplified page and help make the Android release that much cooler :)
Assignee: tshahian → ltom
cc-ing MikeA and Steven. I've pinged them to inquire into the animation possibilities and process.
Blocks: 750459
Hoping we can do some simple animation with the Android dude (a wink and a wave etc) to give this hero some pizazz. John, you mentioned trying Ty's isometric illo, but I thought that the Sync message would be stronger showing both the phone and the tablet. This graphic would be consistent to what we've been showing on the other channels, but if it seems too 're-used' maybe we can show different screenshots again, or play up that animation.
Looks nice, but my main concern is that b/c the tablet is simply a bigger device, it dominates the page more than we'd probably want. In other words, although the tablet component is part of it, the phone remains a much larger piece of the puzzle...probably best to emphasize that a lot more. Jaclyn, what do you think?
Agreed. And I think we discussed that in an email thread few weeks ago... It would be nice if we could showcase the phone more (perhaps at a bigger size) and crop the tablet so we don't have to worry about squeezing the whole thing in. Just a thought.
Hi all, After some discussions with Engineering and Product, we're going to move in a direction that decreases attention on tablets until FN15 (when native UI comes to tablets) to align expectations. Can we take out the tablet entirely? I like the design though! Let's keep this in our back pocket until FN15. Until then, can we have the hero image focus on just smartphones? And we're also going to be EOL Firefox Home now, so we should take that out as well. Thanks Lee, looks amazing!
Sounds good, Jaclyn. I'll take the tablet out entirely. Is there any particular screen/UI/feature you would like to surface to replace the current Firefox Home page, or is it open?
Just to clarify... Jaclyn, do you mean we're EOL the Firefox Home app? My question was about the mobile start page, but I suppose it's also a good time to clarify if that's the page that should be showing on the smartphone. (In reply to Lee Tom from comment #19) > Sounds good, Jaclyn. I'll take the tablet out entirely. Is there any > particular screen/UI/feature you would like to surface to replace the > current Firefox Home page, or is it open?
We're EOL'ing the Firefox Home app. We can keep the screenshot of Firefox Android on the phone device, that's not changing Thanks!
Attaching new mockup here: - removed tablet > simplified, more prominent smartphone message - removed Home app from secondary content pods
Hi Lee, I dig the design! But now that I see everything together, I'm not sure if that line of copy matches with the header. Matej - do you think you can help align the copy? Something around mobile browsing with Firefox who has your back (speaking to the smart and safe) Lee - Also how do you feel about removing the buttons on the phone to make it look more generic looking? I don't want people to think we're available on ICS only. For the animations and design, how will that translate when users view on a mobile device? Thanks
Thanks Lee, looks great. I'm still figuring out next steps regarding animation. Looking to pull this and two other pages into a project with Particle who is handling the about:home takeover. I suspect we'll make some changes once we discuss animation possibilities but will keep it close to what you see here. So, let me get back to you on that. Meanwhile, lets tighten up the copy as requested. We'll also make sure this is mobile friendly. We may fall back to a static version for mobile views.
Here are a few new options for this: Fast. Smart. Safe. Firefox for Android puts the full power of the Web right in your hands. Fast. Smart. Safe. Firefox for Android keeps you and your browsing protected, even on the go. Fast. Smart. Safe. Get the mobile browser that's got your back. Also wondering if we should put Sync where Firefox Home was now that it's not in the top section. Could be something like: Sync your desktop and mobile device.
I like the Sync idea! Then we can link to the SUMO page there instead of putting it in the copy. "Learn how to Sync your desktop and mobile device."? I like the direction of "Firefox for Android keeps you and your browsing protected, even on the go.". How about wording it more along the lines of..browse with peace of mind (or a better phrase for worry-free) knowing Firefox has your back. I like the idea of being protected, but want to make it clearer what it means to a user's browsing experience and how they feel when they browse Lee - do you think it's better with/without the icons on the bottom? Thanks all
How about one of these? Fast. Smart. Safe. Get the browser that's got your back. Stay protected on the go with Firefox for Android. Fast. Smart. Safe. Firefox for Android gives you the latest in speed, security and worry-free browsing. Fast. Smart. Safe. Take the worry out of mobile browsing with the browser that's got your back.
Whiteboard: Due: TBD
Whiteboard: Due: TBD → Due: 6/22
Jaclyn, are speed and safety the key messages of this release? Should we adjust the EC1 script to match? I feel like we've been pushing a broader message than that up until now.
I feel like the EC1 script focuses a lot on online safety and core mozilla values already
It does, but it also has lines that are more general, like "All the good stuff you love about Firefox on your desktop is now available to you when you’re on the go." If we're focusing on speed & security here, that's fine...just wanted to double check. Re: the options in comment #27, I guess I'm not totally feeling any of them. The "Fast, Smart, Safe" headline is on point re: the main issues, but the subhead seems to more or less repeat that thought. And is "worry" about mobile browsing a pain point we need to address? Just trying to wrap my head around this... Personally, my favorite so far is this one from comment #25: Fast. Smart. Safe. Get the mobile browser that's got your back.
How do you feel about this tweak: Fast. Smart. Safe. Firefox for Android is the mobile browser that's got your back.
(In reply to Jaclyn Fu from comment #31) > How do you feel about this tweak: > > Fast. Smart. Safe. > Firefox for Android is the mobile browser that's got your back. That falls a bit flat for me. I like the get/got structure of the original. We have the button right below it that says "Firefox for Android." Do we have to repeat it in the line?
I'm fine with either, I was just imagining myself as a visitor who lands on this page out of context and how we can hit it home it's for Android
(In reply to Jaclyn Fu from comment #33) > I'm fine with either, I was just imagining myself as a visitor who lands on > this page out of context and how we can hit it home it's for Android I feel like the graphic and download button are enough to make it clear. What do others think?
(In reply to Matej Novak [:matej] from comment #34) > (In reply to Jaclyn Fu from comment #33) > > I'm fine with either, I was just imagining myself as a visitor who lands on > > this page out of context and how we can hit it home it's for Android > > I feel like the graphic and download button are enough to make it clear. > What do others think? I agree with Matej on this one.
Sounds good Since we have the screenshot for both /mobile and /mobile/features, I'm wondering if we should keep the screenshot for /features but have a blank screen with Firefox logo in the screen of the device to keep it clean looking and different from other pages. What do you think? Would it also be possible to remove the buttons on the device?
New mock up attached... - new subhead (I removed the "Learn how" link. Does this need to be there?) - regarding the screenshot - I like having actual UI in the device vs. putting another Firefox logo alone on the phone - it just feels more committal and less generalized to show real content. Also, we already have 2 stand-alone Firefox logos + 3 Android and more (Sync etc) logos on the page. - added the Sync link to the secondary content. Jaclyn, I think the small icons help contextualize the links so I left them in.
I agree with Lee that we should show "real" content. I'm also going to package this page up with a few other related ones and propose some light animations or hover states (which may or may not impact the contents of the phone). Are we okay using a phone graphic that has the battery and related status bars showing at so low?
I think the subtle animations are going to help make this page more visually compelling - right now, it almost feels "empty". Attaching a alt layout here, with the device centered on the page...
Thanks Lee, agree the animation will help quite a bit. Just so I know, how would this page view on a mobile device?
I haven't mocked it up, Tara - but I'm imagining it would look very similar to the /Features page mockup; prominent CTA, and secondary links. I'm not sure if that big device graphic holds any value (or worth the DL time) viewing from a smartphone, but from a tablet could be nice. https://bugzilla.mozilla.org/show_bug.cgi?id=724643
I like the original layout in comment 37 the best - I like that my eye is drawn to the Firefox download button first
I agree with Jaclyn on this one. I'm still a bit concerned that the page will feel too empty, especially when the animation ends (my understanding is that it's going to be pretty low key). Not that I'd want the page to be cluttered, but we do want this to feel substantial. Jaclyn, is there any other info you'd like to convey here?
Where to find help - a link to SUMO
Hi guys, Here's an alternative version of the page - with secondary content stacked next to the device graphic. This brings keeps all of the content higher up on the page and helps fill the void of the hero section. I added a link to "help" in the light footer underneath the hero. Let me know wht you think.
Love it!
+1!
me like!
Updated responsive grid system - new mockup attached. This does not reflect the screenshots we're planning to animate alongside Android guy.
Nice, thanks Lee.
Hi all. Per my comments in https://bugzilla.mozilla.org/show_bug.cgi?id=724083#c39, we're changing course for this page...instead of being the primary download page for the mobile Firefox it's going to be a more general page about our overall mobile strategy. Given that we're already 50+ comments into this one, I'm going to close this bug and start fresh with a new one. Stay tuned. (and note: this work isn't wasted, b/c most of it is going into bug 724083 instead) Thanks!
Status: ASSIGNED → RESOLVED
Closed: 13 years ago
Resolution: --- → WONTFIX
Btw, here's a link to the new bug if anyone wants to follow along there: https://bugzilla.mozilla.org/show_bug.cgi?id=763321
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: