Closed Bug 738358 Opened 12 years ago Closed 12 years ago

[NativeUI GA] Design new mobile/platforms page

Categories

(Marketing :: Copy, task)

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

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: jfu, Assigned: matej)

References

(
URL
)

Details

Attachments

(2 files)

Firefox Mobile Platforms page - 01
453.41 KB, image/png
Details
Screenshot of expanding/collapsing UI for devices list
171.58 KB, image/png
Details 
Hi Tara and John,

Chrissie and I started a project to redesign both the front-end and back-end for http://www.mozilla.org/mobile/platforms/. The back-end bug to create a new admin tool can be found here: Bug 694163. Chrissie was going to open the design bug for the front-end part since there were guidelines and specifics we needed to follow for the new mozilla.org layout. 

The brief for this redesign can be found here: https://docs.google.com/document/d/1K6Okh0p8M3tg6FGlUGQqkO_6pNLlbF53tveBCOcj3xY/edit

How should we start this off? 

Thanks!
Blocks: 719927
Seems like the content is the same but you're adapting this to the new design and responsive guidelines, right?  John, perhaps this can roll up into the larger plans around updating the various many pages to the new theme/platform?  I'm not sure what the best approach would be since I'm not involved with that.  Can you advise?  thanks.

Jaclyn, what was your desired timing here?
Yes same content, but organizing it in a different way. Instead of just a long list that visitors have to scan through, making the information much easier to find.

I was thinking a April 13 design hand-off, how does that sound?
Maybe it's best to have a quick chat, would you mind setting that up? Perhaps tomorrow. But seems fairly straight forward.
As mentioned yesterday, Slater is going to set up a chat to discuss next steps with PMMs  (regarding this and other pages that will be migrating to the new site, soon)
Whiteboard: pending meeting with Slater
Just set up the meeting for Friday.
Hey guys, I'll clear the whiteboard since you guys already met, and let John continue with next steps.  (thanks)
Assignee: tshahian → jslater
Status: NEW → ASSIGNED
Whiteboard: pending meeting with Slater
quick ping to see where we are with this

thanks!
Depends on: 742701
No longer blocks: 719927
Blocks: 751632
Blocks: 751730
Summary: [NativeUI launch] Design new mobile/platforms page → [NativeUI GA] Design new mobile/platforms page
(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. 

The goal of this page is to make it easy to quickly tell if your device (phone or tablet) supports Firefox for Android. The current page (http://www.mozilla.org/mobile/platforms/) does that ok, but as the list of supported devices grows it's going to get clunkier and clunkier.

So, we're going to need to move to some sort of dropdown system. The UX could be a little tricky, but Jaclyn and I had discussed something like this:

- intro copy says something to the effect of "Firefox supports a number of devices blah blah...to see if yours works, start by selecting the manufacturer from the list below."
- person clicks (desktop) or touches (mobile) a brand from the list, say HTC, and that expands the content to show the full list of supported devices 

Design requirements:
- should be simple, clean, functional.
- should be responsive and very mobile-friendly (i.e., supportive of touch gestures as noted above, when applicable)
Assignee: jslater → Mnovak
Component: Design → Copy
OS: Mac OS X → All
QA Contact: design → copy
Hardware: x86 → All
Just to be clear, we need a headline and intro copy for this? Anything else?
I think that's mainly it...may need some interaction text later, but headline and intro is the key stuff.

Thanks!
I think the headline as is (or even just "Supported devices") works, but I thought I'd try it a slightly different way. Let me know what you think.


[HEADLINE]
Firefox on your mobile device

[COPY]
Select a manufacturer from the list below to find out if your device is supported.
Thanks Matej. Ideally this might be a bit friendlier-sounding, but I don't have specific advice on how to do that.

Jaclyn, what do you think?
I wonder if "manufacturer" is still a bit unfriendly. What about along the lines of "Who makes your phone?"
How about this?


To find out if Firefox works on your phone or tablet, choose the kind you use from the list below.
from "choose the kind you use" -> will the next step be choose a phone or tablet or choose the device?
From John's description, it sounded like the next step would be to choose a brand and then get a drop down of all the supported devices.
Quick thought:

Is it worth having a design that reveals the full list (vs. hiding it all under menus) but allows for easy navigation? I know a long list is not the ideal browsing scenario, but is there something to be said about a long list of supported devices that's good? Like, at a glance I can see that Firefox for mobile *is* supported on a wide range of devices (cool!) Now... if I want to find something, sure.. I rather have drop downs and an easier way to find stuff.

What if we have a long list similar to what we have now, but use anchor links?  

For example, you can have it ask the user to pick their device (mobile/tablet) and it pops down to that section.  Within the section for mobile, you have a little list nav for specific brand - you click/touch and anchor links drop you down to the right section. 

Just a thought.
Good ideas...Jaclyn, what do you think?
Sounds good
Mockup attached... 

- using a recessed nav bar to toggle which device user wants to view with the options to see Phones, Tablets, or All devices
- repeating the nav bar below the device list, so there's no need to toggle back to the top of the page - user can re-sort from the bottom too
Thanks Lee...looks good. Jaclyn, what do you think?

Also, what does the "see all supported devices" link do? Doesn't this page cover all supported devices?
Looks good - copy edit for the system requirements on the side:

Android 2.2 and above
Requires 16MB internal
Looks like that link from the live page goes to the wiki where there may be additional info: https://wiki.mozilla.org/Mobile/Platforms/Android#System_Requirements

Should I go ahead and post the PSD? 


(In reply to John Slater from comment #21)
> Thanks Lee...looks good. Jaclyn, what do you think?
> 
> Also, what does the "see all supported devices" link do? Doesn't this page
> cover all supported devices?
Sounds good to me...Jaclyn, are we done here?
Lee - Sorry I meant the system requirements block that is on the right hand side. It should say we're compatible with 2.2 and above and require 16MB internal
Yup, I made those changes in my file! Just wanted to know if we're good to go from here. I can post the PSD, if so

(In reply to Jaclyn Fu from comment #25)
> Lee - Sorry I meant the system requirements block that is on the right hand
> side. It should say we're compatible with 2.2 and above and require 16MB
> internal
The green download button up top looks like it's a button for desktop. Should we should clarify it's Firefox for Android download from the Google Play Store?
(In reply to Jaclyn Fu from comment #27)
> The green download button up top looks like it's a button for desktop.
> Should we should clarify it's Firefox for Android download from the Google
> Play Store?

+1
Revised the CTA. PSD linked below - Thanks all!

http://cl.ly/353i0X1922311h3Z2y0l
Thanks Lee!
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Lee, we'll need to update this page to match the correct responsive grid that was finalized the other day.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Blocks: 763653
PSD posted at https://bugzilla.mozilla.org/show_bug.cgi?id=763653#c1 - marking this as fixed.

Thanks Lee!
Status: REOPENED → RESOLVED
Closed: 12 years ago → 12 years ago
Resolution: --- → FIXED
While working on the back-end management of the supported devices list, we have been using an expand/collapse UI for the manufacturers on this page.

Before we implement, I thought I'd share a rough screenshot of that UI to see if it was worth consideration vs. the Phone/Tablet/All filtered list UI presented in this bug.
I like it...Lee, what do you think?

How will the interaction work on mobile devices? Tapping on the + sign opens it up?
quick note that for FF14, we will only be showing phones only. Then for FF15 implementing the tablet section
Thanks for sharing this mockup, Steven. I think the expand/collapse works well for this use (esp if users will be exploring this page from their phones). Since we're omitting tablets for FF14, I guess we can just extend the row widths to 700px, then move back to 2 columns when tablets are supported.
(In reply to Lee Tom from comment #36)
> Thanks for sharing this mockup, Steven. I think the expand/collapse works
> well for this use (esp if users will be exploring this page from their
> phones). Since we're omitting tablets for FF14, I guess we can just extend
> the row widths to 700px, then move back to 2 columns when tablets are
> supported.

Jaclyn and I just discussed and we agree this would be a good fit for this use case.
(In reply to Lee Tom from comment #36)
> Thanks for sharing this mockup, Steven. I think the expand/collapse works
> well for this use (esp if users will be exploring this page from their
> phones). Since we're omitting tablets for FF14, I guess we can just extend
> the row widths to 700px, then move back to 2 columns when tablets are
> supported.

We do have a list of supported tablets on the current live page though: http://www.mozilla.org/en-US/mobile/platforms/

Will those be removed?
Yep, sounds like we need to remove all traces of tablets for this page with the 6.26 launch.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: