Closed Bug 724643 Opened 12 years ago Closed 12 years ago

[NativeUI GA] Redesign /mobile/features for Native UI GA to be responsive

Categories

(Marketing :: Copy, task)

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

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: lforrest, Assigned: matej)

References

(
URL
)

Details

(Whiteboard: Due: 6/20)

Attachments

(7 files)

Firefox for Mobile Features -01
620.92 KB, image/png
Details
Firefox for Mobile Features -02
529.45 KB, image/png
Details
Firefox for Mobile Features -03
498.96 KB, image/png
Details
Firefox for Mobile Features -04
497.63 KB, image/png
Details
Firefox Mobile Features - smartphone 01
175.38 KB, image/png
Details
Firefox for Mobile Features -05
793.99 KB, image/png
Details
Firefox for Mobile Features -06
810.41 KB, image/png
Details 
Please apply responsive design principles to: http://www.mozilla.org/en-US/mobile/features/

Let's coordinate this with the other changes happening on this page at this time which is getting this page updated for the Fx11 launch. 

The content changes for that product launch can be found in Bug 719930. 

Responsive design guidelines coming soon; assigning to me for now.  

Timing: make these tweaks while making content updates in Bug 719930
Laura,

Recommend using this as a 100% redesign (tip-to-tail) with points that Sean made on our call earlier this morning

Keep in mind that Tablet users will see the full site, but we're really optimizing for smartphones here.

This page will be rebuilt entirely on the new platform, so let's leverage what we can do there, and not be limited by what we can only do if we were updating the current page - please consult James/Steven throughout the design phase.

We need to remember to make a note to serve the right download button based on UA (currently, this is happening for tablet users hitting the page)

*****

4 pre-design guidelines to make the page more responsive:

****

1.) Reduce content before tackling design:

http://mozilla.com/mobile/features - Too much content per section, even if we were to create an expandable UI, recommend reviewing entire page and cleaning up content, consider bullet points that can link to developer.mozilla.org for richer content discovery (also very helpful for our own content relationships)

(Jaclyn's started an etherpad for this: https://etherpad.mozilla.org/IYBjmx3YBq )

****

2.) Improve hierarchy of content on page:

Explicitly determine the information hierarchy on the page. On small screens, vertically order the content according to that. Hide or remove any content that is not necessary. The sidebar is of ambiguous importance (remove it entirely). 

****

3.) Improve use of horizontal space:

The desktop convention of scrolling downwards on webpages is even more prominent on mobile, due to the limited horizontal space available on phones when held in portrait mode. Thus, interactions that require a lot of horizontal space to function will be frustrating to use on mobile. This is specific to the icons on this page that guide users to anchors deeper into the content. They won't be effective on a small screen.

****

4.) Hover will not work

Eliminating the sidebar should solve this, but in the redesign, avoid hover.
(In reply to mcbmoz from comment #1)
> Laura,
> 
> Recommend using this as a 100% redesign (tip-to-tail) with points that Sean
> made on our call earlier this morning

Agree, thanks. Changing this bug from "Updating" this page to a "Redesign" of this page. 
 
> Keep in mind that Tablet users will see the full site, but we're really
> optimizing for smartphones here.
> 
> This page will be rebuilt entirely on the new platform, so let's leverage
> what we can do there, and not be limited by what we can only do if we were
> updating the current page - please consult James/Steven throughout the
> design phase.
> 
> We need to remember to make a note to serve the right download button based
> on UA (currently, this is happening for tablet users hitting the page)

Can you define UA? And is this happening already, or as a new standard of every new Bedrock page, or should this requirement be added into each implementation bug?  

> *****
> 
> 4 pre-design guidelines to make the page more responsive:
> 
> ****
> 
> 1.) Reduce content before tackling design:
> 
> http://mozilla.com/mobile/features - Too much content per section, even if
> we were to create an expandable UI, recommend reviewing entire page and
> cleaning up content, consider bullet points that can link to
> developer.mozilla.org for richer content discovery (also very helpful for
> our own content relationships)
> 
> (Jaclyn's started an etherpad for this:
> https://etherpad.mozilla.org/IYBjmx3YBq )

This is a great start. I'm going to assign this bug to JFu for now since it seems like the next action is to figure out final content. Perhaps design work can start at the same time; I'll ask Tara. 


> ****
> 
> 2.) Improve hierarchy of content on page:
> 
> Explicitly determine the information hierarchy on the page. On small
> screens, vertically order the content according to that. Hide or remove any
> content that is not necessary. The sidebar is of ambiguous importance
> (remove it entirely). 

Sounds good - let's use that same etherpad to help define the information hierarchy. JFu - I made a note to that extend in the etherpad. The order should represent the importance of each category. 

I'd consider increasing the importance of Speed and also changing the title of/excluding entirely things that don't have clear immediate user value like "Universal Access" or "Friendly to the touch" (what do these actually mean?). I'm sure Matej can help out here too. 


> ****
> 
> 3.) Improve use of horizontal space:
> 
> The desktop convention of scrolling downwards on webpages is even more
> prominent on mobile, due to the limited horizontal space available on phones
> when held in portrait mode. Thus, interactions that require a lot of
> horizontal space to function will be frustrating to use on mobile. This is
> specific to the icons on this page that guide users to anchors deeper into
> the content. They won't be effective on a small screen.
> 
> ****
> 
> 4.) Hover will not work
> 
> Eliminating the sidebar should solve this, but in the redesign, avoid hover.
Assignee: lforrest → jfu
Summary: [OneMozilla] Update /mobile/features for Firefox 11 to be responsive → [OneMozilla] Redesign /mobile/features for Firefox 11 to be responsive
Blocks: 725353
Standing by as needed.
Hey Tara - throwing this over to you to help with the responsive redesign here. I think this can get started while the copy is still under way in bug 719930.

Let's use this bug to focus on the redesign.
Assignee: jfu → tshahian
Chrissie - based on the OneMozilla project and other responsive design needs, should we still proceed with this component of /mobile/features changes even though mobile has been delayed? 

Let me know what you think and we can route/prioritize accordingly. I think it would still be good to make this page responsive and slim down the content, but want to prioritize accordingly.
(In reply to Laura Forrest from comment #5)
> Chrissie - based on the OneMozilla project and other responsive design
> needs, should we still proceed with this component of /mobile/features
> changes even though mobile has been delayed? 

YES!

> Let me know what you think and we can route/prioritize accordingly. I think
> it would still be good to make this page responsive and slim down the
> content, but want to prioritize accordingly.

This is a P1 for migration, so I'd keep it high up there, especially because its content promotes mobile - it should render flawlessly on mobile devices.

Additionally, we can't retire the /m site until this and a few other pages in the suite are optimized.
Just to chime in here, this page shouldn't be rebuilt before the redesign of the full /firefox site. There will be a major disconnect as this will use Less CSS and the rest wont.
 
Am I right in saying that is the request here - having this page from the /firefox site fragmented with it on the new style while the rest is on the old templates?
Yes, this should be lined up with Firefox 12.
Hey guys, what is the next step here?
Jaclyn - What's the new timing on this?
Assignee: tshahian → jfu
early June launch.
Hi everyone - the GA launch for NativeUI is now end of Q2, roughly using Firefox 14 as the ship vehicle
Summary: [OneMozilla] Redesign /mobile/features for Firefox 11 to be responsive → [OneMozilla] Redesign /mobile/features for Firefox 14 to be responsive
Status: NEW → ASSIGNED
Hi all, wanted to see where the redesign for mobile/features is at. This page will also need to be responsive and ready for the Native UI GA launch in June. 

The content:

[FAST]
-Get to the Web quickly with speedy start up and page load times

[SMART]
-The Awesome Bar gets to know you as you browse so you can search easier and get to your destination faster
-_Sync_ your desktop history and passwords to all your devices for a painless browsing experience on mobile
-Effortlessly switch between tabs with live thumbnail images that show you updated snapshots of your sites

[CUSTOMIZABLE]
-Personalize features and functionality with _add-ons_
-Control your _privacy_, _security_ and how much data you share on the Web

[POWERFUL]
-Experience the unlimited possibilities of the mobile Web with full support for HTML5 and Web APIs _link to developer tools_
Summary: [OneMozilla] Redesign /mobile/features for Firefox 14 to be responsive → [OneMozilla] Redesign /mobile/features for Native UI GA to be responsive
Blocks: 751730
Summary: [OneMozilla] Redesign /mobile/features for Native UI GA to be responsive → [NativeUI GA] Redesign /mobile/features for Native UI GA to be 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 will cover the main features in more detail than the new landing page (bug 724056), but will still have *much* less content than the current page (http://www.mozilla.org/en-US/mobile/features/).

Per Jaclyn, the key points to be conveyed are as follows (and each of these could be broken into its own little section on the page, potentially with a screenshot or some other visual to accompany):

Fast:
- Get to the Web quickly with speedy start up and page load times (no specific feature needs to be called out here, but we do want to tout the browser's speed in general terms...should make this concept relateable to typical uses, such as being able to quickly find the info you need when you're on the go, etc)

Smart:
-The Awesome Bar gets to know you as you browse so you can search easier and get to your destination faster
-Sync your desktop history and passwords to all your devices for a painless browsing experience on mobile
-Effortlessly switch between tabs with live thumbnail images that show you updated snapshots of your sites

Customizable:
-Personalize features and functionality with add-ons
-Control your privacy, security and how much data you share on the Web

Powerful:
-Experience the unlimited possibilities of the mobile Web with full support for HTML5 and Web APIs (link to developer tools)

Design requirements:
- we don't need a hero image on this page, but each section should be accompanied by some visual. Screenshots are fine when applicable.
- Android robot character needs to be 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: jfu → Mnovak
Component: Design → Copy
OS: Mac OS X → All
QA Contact: design → copy
Hardware: x86 → All
Hi guys. This looks like the copy I worked on in bug 719930, which was then pasted into comment 13. Does it need to be further revised?
Oh, didn't realize that. Jaclyn, can you weigh in?
d
hmm, sorry about that :)  not sure what happened.
Design-wise, could we just follow the same CSS/styles as our desktop features page? 
http://www.mozilla.org/en-US/firefox/features/

Do we need to mock this up?
Yeah, we do need to mock this page up. For one thing, the content here is a lot lighter than what's on that features page, so it will need some design attention to make it fit in the space properly.

Beyond that, though, one of the key parts of this assignment (and all the mobile-related design bugs) is making sure the new pages are fully responsive. So, part of the design goal is to make sure everything fits into the proper grid, etc.
Hey all, here's a mockup based on our revised (Frameless) grids. This should be responsive and display well for mobile. Some open issues are what screenshots/graphics to show to best describe features (Jaclyn, I pulled these off of the existing Mobile Features page, but let me know if you like to update. Feel free to send screenshots, if you have something particular in mind)
Looks great, Lee. Just two small things:

The B in "Tabbed browsing" should be lowercase.

Seeing them in context, I think it would make more sense to put periods on the ends of all the lines.

Thanks!
Looks good, thanks Lee. My only note is that some of the lower sections look a little empty...not that we want to add content just for content's sake, but Jaclyn is there anything you'd want to add to those areas that would be relevant?
Thanks guys. Matej, I made those copy revisions. John, I agree that there's room for more content at the bottom of the page. Jaclyn, let me know if there's more content you'd like to supplement those sections with.
Jaclyn is reviewing this bug and will follow up with next steps / more direction.
Whiteboard: Due: 6/20
Sorry for the late response, didn't realize I wasn't on the cc list!

Because of the shorter copy, how do you feel about removing the screenshots? I'm not sure if it adds a ton of value since we already have screenshots on the Google Play Store. 

Thoughts?
hmmm, I tend to agree with Comment #26... I'm not seeing these screenshots add a ton of value.  They are hard to read and don't necessarily communicate the information clearly... in fact, they overshadow the text a bit and can be distracting IMO.  What do people do if they want to learn more about each feature? is there a link we can add for these? 

Also, the graphic next to "fast" is a generic mobile graphic that has nothing to do with being fast... just a thought.  That said, we should update the mobile graphic to align it with the illustration we've been using elsewhere.  It's a different device illo.
I actually like the screenshots as is - feels like the page would be really empty without 'em.

Agreed that we should add a bit more speed to the 'fast' graphic if at all possible.
Would it help if we spread out the blocks of text to make it feel less empty? Since some sections have fewer points (e.g "Customize" has 2, and "Smart" has 3, it accentuates that we have fewer features for the sections. Is there a way to spread it around so it doesn't draw attention to that?
I guess I just don't see the screenshots add much value, not to say that I prefer a more empty page, but I (personally) don't find all those to be very strong screenshots.  That's all. I much rather have an icon representing each piece, vs. a relatively big screenshot that doesn't really tell me much.  Like: the add-ons screenshot, sync, etc.  Awesome bar is good, Tabbed browsing is good (though I wish those x-marks weren't there)...
Looking at the copy in comment 13 again, it didn't originally have the extra subheads that are in the layout. I feel like they're just repeating words from the blurbs, which are already pretty short, and in a couple of cases I don't think they're telling the whole story of what we're trying to say. Would it still work without them?

I also wonder if the link in the Powerful blurb could just be "Learn more" so we're not adding too much extra copy.
Sorry guys, one more thing: Because the top section (Fast) has a large image instead of a smaller thumbnail, it makes that section look like an intro to the whole page rather than one of the sections. I also just noticed the "lorem ipsum" copy there. I'd rather not be adding info just to pad out the section. Could we stick with the original text? Thanks.
Hey guys, thanks for all the great feedback and consideration. Attaching a new mockup here which addresses some of the above, and hopefully offers a new approach to the page. I simplified the page overall, losing the screenshots and focusing on one central smartphone graphic - the idea that all of these features revolve around one device/graphic. 

Fast - If we're touting speed, we should have the stats to back it up. I FPO'd a comparison graphic here. Jaclyn, do you have any impressive numbers we can proudly display here? 

Speedy subhead - Is our speed based on using the native UI etc.? Can we nod to this in the subhead? 

Smart (Awesome Bar, Sync, Tabbed browsing)
I think all of these features can be referenced to in that main graphic. If users want to learn more, we can link them to more info in those blurbs, perhaps? 

Customizable & Powerful
I think we should link to "Learn More>" on all 3 of these features for additional information. No need to clutter the page with noisy screenshots. The icons can provide visual anchor-points/eye-candy to represent each idea.
love it !
I like this! Jaclyn, do we have any stats that quantify the speed improvements? Something like that is pretty necessary to make this version of the page hang together.
Looks awesome, Lee!

My concern with calling out native UI in the speed section is that the term probably doesn't mean a lot to the average user. I'm still wondering if we need the subheads at all.

A question for Jaclyn: Don't we usually refer to the Awesome Screen on mobile instead of the Awesome Bar? Is there a reason we're not doing that here?
I like it! 

Our performance is comparable to all the other browsers, and the numbers are very marginal. I don't think it's worth putting metrics here. 

I would refrain from using "native UI" because it really doesn't mean anything to a user. 

Good catch! Yes, should be "Awesome Screen" not "Awesome Bar"
So wow, this page is getting more and more streamlined with every iteration. Matej, I think the page works well without subheads, as you suggested. 
Jaclyn, would it be helpful to hyperlink point in Fast and Smart, so uses can learn more? 

ie: 
Awesome Screen, Sync and Tabs?
Looks great Lee!

Good idea to link to Awesome Screen, Sync, tabs. 

For the "Learn more" link for add-ons, how do you feel about "Get add-ons"? Would also like to move the privacy block above add-ons.

Under the green download button, can we also change "other systems and languages" to "Supported Devices"? 

Thanks!!
No problem, Jaclyn - new mockup for desktop with changes attached.
...and here's a version formatted for smartphones. 

Responsive!
(In reply to Lee Tom from comment #41)
> ...and here's a version formatted for smartphones. 
> 
> Responsive!

Woo hoo!
sweet!

Maybe I'm misinterpreting what responsive design is, but it means desktop and mobile viewers get served the same page right? How come the download button looks different on the mobile view? Thanks for the clarification
Updated responsive grid system - new mockup attached
Looks awesome! Are designs and copy finalized? I see due date says 6/20 but with the new launch date of 6/26 we'll need to handoff PSDs to web dev ideally by 6/12.
No, we're probably going to make a few more tweaks. Stay tuned...
Lee, based on our conversation with Pete on Friday I'm pretty comfortable marking this one as finished. What do you think?

If you agree, let's pass it over to the Web team on Monday so they can get a head start on building this out.
Blocks: 763650
PSD is here:
http://cl.ly/2S2L1T3v2N0l2D3u2F0f


* This page is updated to our new 12-column responsive grid (940px wide) 
Graphic pads (backgrounds in white) extend to width of 1000px wide, but page should be coded to allow for scrollbar at 1024
Thanks Lee!
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Hey guys. Reopening this b/c we decided to rearrange some content.

Matej, I may ping you tomorrow to discuss a generic blurb about mobile security features (basically distilling the content from http://www.mozilla.org/en-US/mobile/features/#advancedsecurity into 1-2 sentences).
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
OK. Standing by! Mostly not sure if this replaces the current security blurb or if it will be in addition to that one.
It's in addition to the existing one. Could you go ahead and write that? Would be a big help.

Thanks!
(In reply to John Slater from comment #52)
> It's in addition to the existing one. Could you go ahead and write that?
> Would be a big help.
> 
> Thanks!

Can do. Will this still go under "Customizable" or will it be its own section under a new heading (which I would probably call "Safe")?
It'll go in a new section called Safe...we decided yesterday to orient the text on this page around Fast, Safe & Smart to match the headline on the download page. A couple of the other blurbs are being shifted as well, and in the process we decided that we need this additional one.

Don't worry about rearranging the rest of the copy, though...Lee can do that directly in the PSD.

(Also, one other note, possibly more for Lee...we need to add 'bookmarks' to the list of things you can sync.)
I feel like the current blurb covers both security and privacy, so I rewrote it and created two new blurbs to go under Safe:


Control your privacy and how much data you share on the Web with features like Do Not Track.

Enjoy the latest in security preferences to easily customize the settings for your passwords, private data, cookies, images and add-ons.
Thanks Matej, that looks good.

Lee, I think you should have everything you need on this now. Let me know if you have questions though.
How's this, John?
Looks good - ship it!
Link to PSD is here:
http://cl.ly/3D192H0r0p44461X3H2u
Thanks Lee!
Status: REOPENED → RESOLVED
Closed: 12 years ago → 12 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: