699976 - [Mobile] /Mobile Page Redesign

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jaclyn Fu]

Firefox for Android on tablets is going to be making a splash on Dec 20, and we would like to include tablets on the /mobile landing page.  Also, after doing some user study, we also found that the /mobile page was not helpful for users who were looking for more information on the product. 

Please see Bug 667554 for UX, but I will also attach the final wireframes and site map to this bug as well.  

Will it be possible for a Nov 30th design timeline?  

Please let me know if there's anything else I can provide, and I am also more than happy to set up some time to discuss. 

Thank you!
Jaclyn

Comment 1

[Tara (musingt)]

Jaclyn, can you please post the wireframes as soon as you can?  That'll help me understand what you guys are looking for and the related copy/design needs.  Thanks.

Comment 2

[Jaclyn Fu]

Hi Tara,

There's still some minor tweaks to be made, but this is the gist of it:

https://bugzilla.mozilla.org/show_bug.cgi?id=667554#c15 (Note: we will not be implementing #4, the email to phone functionality in Phase 1) 

I'll post the final wireframe as soon as it's finished. 

Thanks!

Comment 3

[Tara (musingt)]

Thanks Jaclyn, can you please put the link to the actual wireframe? not sure where to look on that bug :) I see sitemaps, but not wireframes.  Thanks.

Comment 4

[Jaclyn Fu]

Attachment: Wireframe #1

Comment 5

[Jaclyn Fu]

Attachment: Wireframe #2

Comment 6

[Jaclyn Fu]

Notes:
-Would like to use Wireframe #2, but with the icon navigation of Wireframe #1
-Only Android version of this redesign for now. When the iOS icon is clicked on, it will redirect to existing Firefox Home page (http://www.mozilla.org/en-US/mobile/home/)
-Instead of "All Systems and Languages" under the download button, change to "List of Supported Devices"
-Remove "More Information" in the Notes Block
-Add "Mobile Developer Resources" in Notes Block under "Future Releases"
-When item under in Notes Block is clicked on, it does some animation to reveal full text 
-Not implementing email to phone functionality

Comment 7

[Jaclyn Fu]

Hi Tara,

Wireframe #2 will be the final wireframe with the accompanying edits above.

Comment 8

[John Slater]

Hey guys. Per https://bugzilla.mozilla.org/show_bug.cgi?id=667554#c35, I'd like to talk a little bit more about the strategy here before we jump into a new design.

Comment 9

[Tara (musingt)]

Hey guys (Jaclyn) did you have further discussions around this?  Not sure where things stand.

Comment 10

[Jaclyn Fu]

Hi Tara,

This is the wireframe we're going forward with: https://bug667554.bugzilla.mozilla.org/attachment.cgi?id=574708 - we will be creating an Android specific product page and redirecting traffic from /mobile to this new page. 

Some questions:
1) What do you think about a slideshow of images for component #2 that would feature screenshots of both tablets/phones that users would toggle with arrows (example here: https://bug667554.bugzilla.mozilla.org/attachment.cgi?id=564931) 
2) Is there another place we can put the QR code? Seems a little out of place where it is now and I'm thinking it should be somewhere closer to download? 

Thanks

Comment 11

[Tara (musingt)]

Thanks Jaclyn.  I'll need some time to review this and digest the wireframe before answering those questions.  It would also help if you can set up a time for a walk through :)   and, please update the bug with your intended deadline (design handoff) so I know what we're planning towards.  Thanks!

Comment 12

[Jaclyn Fu]

Hey Tara - I need to double check with lofo, but I think if we have design by Dec 9, we can implement by Dec 20.

Comment 13

[Tara (musingt)]

Thanks Jaclyn.  That's a little tight... given the Holidays and the fact that we hadn't received an update on this bug till yesterday.  Lets review the wireframes together next week, and then figure it out together.  Could you please also add Lee to the meeting?  Thanks

Comment 14

[Jaclyn Fu]

Hi all,

Following up from today's meeting: 
-Goal is get a V1 up as soon as possible: QR code, and rotating banner of images are TBD 
-Toggle for iPhone users will be static -> points users to Firefox Home page 
-Possible idea to have images of features in detail in value props section
-Rotating banner of images will have same device layout, but show different sites 

Deadline for design hand-off for implementation: December 6 

Many thanks Lee!!

Comment 15

[Jaclyn Fu]

In the process of producing copy - Lee what other content pieces do you need?

For the rotating banner, do I provide screenshots only or screenshots within the  device?

Comment 16

[Tara (musingt)]

Not to speak for Lee here, but screenshots only are usually fine... he'll put them in the device graphics he has.  As long as the screenshots you've taken are from the device, of course.  Otherwise not sure how you'd do the device without photography.  Lee would need to hack it. 

I also suggest not having a "toggle" since that's not really the behavior we're designing, but some type of link/promo to point to the iphone page.  We should also see what works best for the download CTA, since it's not really a download button but really a link to the Android Market.

Comment 17

[Jaclyn Fu]

Ok sounds good to both! Thanks

Comment 18

[Lee Tom]

As Tara mentioned, screenshots will be fine Jaclyn. I'll just mask them into the devices. As far as the CTA, I'm currently mocking it up using the existing language we're using on the current page: http://www.mozilla.org/en-US/mobile/

Get Firefox for Android
Free from the Android Market

Comment 19

[Lee Tom]

Attachment: Mobile 01

*re-attaching here, to the Design bug*

Here's a mockup to see the copy in context. 

Also, I moved the CTAs below the subhead because they were looking really cramped in the top right corner under the Mozilla universal tab. I thought this also gave us more room to group the iPhone user button with the Android Market button, instead of scattering them out.

Comment 20

[Jaclyn Fu]

Awesome! Great stuff Lee

I like how this page also looks consistent with the Aurora mobile page (https://bugzilla.mozilla.org/show_bug.cgi?id=684632#c14) 

Would there be a way to make the iPhone button a little more discreet? Or perhaps a link instead of a button?

Comment 21

[Lee Tom]

Attachment: Mobile 02

New mockup with understated iPhone link

Comment 22

[Jaclyn Fu]

Love it! I'm in the process of taking the screenshots. The tablet screenshots are coming out fuzzy for me so I'm trying out a new process. Will attach the phone screenshots today (just checking, are we using the at&t branded phone in the final?)

Thanks Lee!

Comment 23

[Lee Tom]

(just checking, are we using the
> at&t branded phone in the final?)
> 
Jaclyn, I wasn't sure which phone to use here, so I grabbed one from ATT site. If there's a more appropriate model/device, please let me know.

Comment 24

[Jaclyn Fu]

Here's some nice plain ones: http://farm7.staticflickr.com/6119/6390166601_9aa61ab116_z.jpg

Comment 25

[Jaclyn Fu]

^but note that this device has native UI in it

Comment 26

[Jaclyn Fu]

Still having a bit of technical difficulty with some of the tablet screenshots - let me know what you think of the quality. Phone ones should be fine

I tried to use sites that would speak to use cases and some to weave our direction to focus on people/mozilla-mission, let me know if you have suggestions

For the rotating screenshots, I was thinking a set of 3:

First set:
Phone: http://postimage.org/image/7slp64jm9/
Tablet: http://postimage.org/image/ffcecnq45/ (is it still too fuzzy after you resize it down to fit the device? also, this one has "Beta" in the bar, can we do some magic to take it out to make it look like GA?) 

Second set:
Phone: http://s8.postimage.org/rwpku6deb/phone2.png
Tablet: http://postimage.org/image/bigoxpblr/

Third set:
Phone: http://postimage.org/image/om5t81cup/b2b5f88a/
Tablet: http://postimage.org/image/5gqz6szrd/ (was trying to go for e-commerce site. does it look too advertise-y?) 

My phone also has a bunch of icons up top, maybe it'll look cleaner if we crop the status bar out?

Comment 27

[Jaclyn Fu]

Following up from conversion w/ Lee:

-Not sure what benefit of having rotating screenshots are - keeping it simple with one static set
-Need something visually appealing + recognized use cases
-Currents ones might not do the trick 
-Need site's approval to display their site on ours 

Updated:
Phone: http://postimage.org/image/to99mhy5r/
Tablet: http://postimage.org/image/rcerwyzlj/

(we used wikipedia and flickr before, so I'm hoping this is ok. going to confirm w/ Jane)

Comment 28

[Lee Tom]

Attachment: Mobile 05

Attached is the latest mockup.

Comment 29

[Jaclyn Fu]

Hi Lee - the design is great! Confirmation final approval from PMM side. Let's hand it off for implementation! 

One note: let's remove QR code link for this iteration and keep it in mind for future iterations 

Thank you!!!

Comment 30

[Jaclyn Fu]

(Also note - in progress getting permissions for the sites features)

Comment 31

[Lee Tom]

Here's the PSD, Jaclyn:

http://intothefuzz.com/leetom/Mozilla.com/PSD/mobile_firefoxandroid.psd

Comment 32

[Tara (musingt)]

Hey guys.

Lee, this looks fantastic, great work.
Sorry I wasn't getting notifications re: bugs and didn't realize we had made it to the finish line with PSDs.  I think this looks great, but here's my only nit/thought:

* Since the media/market/ad space is so saturated with device images... I think it would help to connect the imagery to Firefox more clearly... or subtly the way we've done in the past with some ambient Firefox-ificaiton.  Both Ty and Lee have done this on photo-realistic device graphics we've done.

* So, while I think this looks crisp, clean, and fantastic as is... I think it would be nice to add that in.  Or at least try it and see how it looks.

* Lets also make sure we get approval for the sites we're displaying.

* GREAT WORK LEE. and MATEJ.  and JACLYN.

Comment 33

[Lee Tom]

Attachment: Mobile 06

Posting a version w/ more flair per Tara's request. I like to call it, Rainbow Sherbet Cascade. Let me know what you think. L

Comment 34

[Jaclyn Fu]

Wow Rainbow Sherbert Cascade makes such a cool difference! Love it! Let's PSD it 

Can we make a backup plan in case Nat Geo rejects us =( Maybe the Wiki red panda page or about:home for safety. What do you guys think?

Comment 35

[Tara (musingt)]

Thanks Lee.  
Jaclyn, when will you guys find out about approval to move forward on these sites?  I don't think it'll take tons of time for Lee to update the content since the rest of the design is done.. but just want to avoid having him to do extra work that may not be used.  :)

Comment 36

[Jaclyn Fu]

Yup totally understand. I already emailed them and am waiting to hear back...but I'm also going to find a phone number so I can follow up directly tomorrow. *crosses fingers*!

Comment 37

[mcbmoz]

(In reply to Jaclyn Fu from comment #36)
> Yup totally understand. I already emailed them and am waiting to hear
> back...but I'm also going to find a phone number so I can follow up directly
> tomorrow. *crosses fingers*!

Jaclyn, when you have approval, can you paste a link for the PSDs over in Bug 699985

Comment 38

[Lee Tom]

Refreshed PSD here:
http://intothefuzz.com/leetom/Mozilla.com/PSD/mobile_firefoxandroid.psd

I'll also paste to Bug 699985

Comment 39

[Jaclyn Fu]

One small edit to the copy under "Browse Quick and Easy". we got the OK to promote Sync for this, yay

"Features like Sync, tabbed browsing and one-touch bookmarking mean everything you want is close at hand."

Comment 40

[Tara (musingt)]

Hey Jaclyn, can we just update the copy in implementation?  Don't want to respin the design if we don't have to :)

Comment 41

[Tara (musingt)]

(closing)

Comment 42

[Jaclyn Fu]

Sorry Lee =( 

We don't have the green light for Nat Geo. Can we use the Red Panda wiki page instead? we thought it was too black/white before, but I think it might be better now with rainbow sherbert cascade in place

Comment 43

[Lee Tom]

would it be too Firefox-centric to screengrab the Firefox Live page as someone had suggested? It's got a nice orange background...and we could fudge the red panda image, so they stand out.

Comment 44

[Jaclyn Fu]

Using a red panda flickr image as the hero image instead: http://cl.ly/0I1A3h2k2W3x2H0h3w02

Contacted the photographer for permissions (this one should be OK, he gave permissions for a firefoxlive related blog post before)

New mockup: http://cl.ly/0K2Z0R2a042g313S2K2Z

Comment 45

[Jaclyn Fu]

Just confirmed permissions to use that photograph! woot! 

Lee - let's wrap it up with final PSDs! (again)

Comment 46

[Lee Tom]

Final PSD is here:

http://intothefuzz.com/leetom/Mozilla.com/PSD/mobile_firefoxandroid.psd