Closed Bug 699976 Opened 13 years ago Closed 13 years ago

[Mobile] /Mobile Page Redesign

Categories

(Marketing :: Design, task)

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

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: jfu, Assigned: tshahian)

References

(
URL
)

Details

Attachments

(6 files)

Wireframe #1
132.19 KB, image/png
Details
Wireframe #2
124.70 KB, image/png
Details
Mobile 01
448.56 KB, image/png
Details
Mobile 02
447.22 KB, image/png
Details
Mobile 05
484.77 KB, image/png
Details
Mobile 06
563.04 KB, image/png
Details
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
Blocks: 699985
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.
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!
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.
Attached image Wireframe #1 —
Attached image Wireframe #2 —
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
Hi Tara, Wireframe #2 will be the final wireframe with the accompanying edits above.
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.
Hey guys (Jaclyn) did you have further discussions around this? Not sure where things stand.
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
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!
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.
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
OS: Mac OS X → All
Hardware: x86 → All
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!!
Depends on: 706260
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?
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.
Ok sounds good to both! Thanks
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
Attached image 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.
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?
Attached image Mobile 02 —
New mockup with understated iPhone link
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!
(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.
Here's some nice plain ones: http://farm7.staticflickr.com/6119/6390166601_9aa61ab116_z.jpg
^but note that this device has native UI in it
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?
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)
Attached image Mobile 05 —
Attached is the latest mockup.
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!!!
(Also note - in progress getting permissions for the sites features)
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.
Attached image 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
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?
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. :)
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*!
(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
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."
Hey Jaclyn, can we just update the copy in implementation? Don't want to respin the design if we don't have to :)
(closing)
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
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
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.
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
Just confirmed permissions to use that photograph! woot! Lee - let's wrap it up with final PSDs! (again)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: