684078 - [Firefox Channel Page] Design Firefox Channel Landing Page Desktop

Status: RESOLVED FIXED

(Marketing :: Design, task, P3)

Description

[Grace Jimenez :grace]

Hi Tara,

Initially, we were thinking of just doing a dedicated Firefox Aurora page (bug 679285 ) and Firefox Beta page (bug: 679286). After collaborating with you team, we decided to go ahead and do a landing page. Basically, revamping/redesigning the current channel page. 

Chrissie is in the process of finalizing the wireframe and will update the bug as soon as the wireframes are finalized. 

We are also working on updating the copy (bug

please let me know if you have any additional questions.

Comment 1

[Grace Jimenez :grace]

this is in addition to the firefox aurora and firefox beta page.
thanks!

Comment 2

[Grace Jimenez :grace]

hi tara,

attached is the final wireframe for the new channel landing page.
there are also brief descriptions provided in the file.

Chrissie, please feel free to add any additional directions that we might have missed.

I am working with Matej in finalizing the copy.  (bug 684077) 

hope this is sufficient to get the design started.
do you think we can have a design completed by end of this week? Sept. 9th?

Thanks!

Comment 3

[Grace Jimenez :grace]

Attachment: Channel Landing Page Wireframe

Comment 4

[Grace Jimenez :grace]

Attachment: Rapid Release Page Flow Diagram

Comment 5

[Sean Martell]

should we create a layout for a mobile version of this page too? what would the wireframe look like for that based on priority of information?

Comment 6

[Sean Martell]

Just noticed the mobile design bugs for these pages also. it seems as if the wireframes are the same on mobile. Should we craft new ones for smaller real estate?

Comment 7

[Grace Jimenez :grace]

(In reply to Sean Martell from comment #5)
> should we create a layout for a mobile version of this page too? what would
> the wireframe look like for that based on priority of information?

hi sean. the design should be the same as the desktop one but with mobile contents (copy, logo etc).

Comment 8

[Grace Jimenez :grace]

(In reply to Sean Martell from comment #5)
> should we create a layout for a mobile version of this page too? what would
> the wireframe look like for that based on priority of information?

hi sean. the design should be the same as the desktop one but with mobile contents (copy, logo etc).

this page is a mobile page viewed in desktop just like this one: http://www.mozilla.org/en-US/mobile/features/

i have opened a bug to get this new landing page for mobile also optimized for mobile viewing and assigned it to Jason Grlicky. Bug: 684614

Comment 9

[mcbmoz]

Ty,

Jaclyn would like to include QR codes for each in the design:

GA: http://bit.ly/fiP8C9.qrcode 
Beta: http://bit.ly/mjWqJU.qrcode
Aurora: http://bit.ly/aurora8.qrcode

can go next to or alongside the download button, similar style as http://bit.ly/nEnN4T

Comment 10

[Jaclyn Fu]

Or to reduce clutter, how about having it show up only when a link is hovered over? Since there's going to be so many QR codes on one page, it might be nice to keep some hidden away. Just an idea!

Comment 11

[Grace Jimenez :grace]

jaclyn and chrissie, 

did you want the qr codes in the Mobile Channel Landing page Bug:684613  and not the desktop landing page?

Comment 12

[Jaclyn Fu]

It would make more sense on the mobile channel landing page. I'll comment in Bug 684613.

Comment 13

[Grace Jimenez :grace]

Updating bug with proposed deadline: Friday, Nov. 18th 
project spreadsheet: https://docs.google.com/spreadsheet/ccc?key=0AvyHVqnpWaZRdEUteXRVbW5JdXdKQ2VOZ2lxRlVfNXc&hl=en_US#gid=18

Copy: Bug 684077
https://docs.google.com/document/d/16By8r5nDmmtSyGnF5FgfnQd_GPC6lo3vngs3Nayii90/edit?hl=en_US

additionally, chrissie also noted in the wireframe some CSS3 transitions that should also be considered in the design. 

ty, please let me know if you have any additional questions.

thanks!

Comment 14

[Grace Jimenez :grace]

hi ty, 

any updates here?

thanks!

Comment 15

[Ty Flanagan]

Working to get this page ready by Friday.

Comment 16

[Grace Jimenez :grace]

sweet. thanks!

Comment 17

[Grace Jimenez :grace]

hi ty, 

hope you had a great holiday. 

any updates on the channel design?

thanks!

Comment 18

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox - Desktop

Comment 19

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox - Mobile

Comment 20

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Beta - Desktop

Comment 21

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Beta - Mobile

Comment 22

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Aurora - Desktop

Comment 23

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Aurora - Mobile

Comment 24

[Jaclyn Fu]

(In reply to Ty Flanagan from comment #23)
> Created attachment 586597 [details]
> FFx Channel Page - Firefox Aurora - Mobile

The QR code on this page doesn't work for me. This is suppose to direct them to the mobile-optimized version of the Aurora mobile page right?

Comment 25

[Ty Flanagan]

Ill have to keep the QR code as is then. I inverted the colors but I realize now thats not going to work.

Comment 26

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Aurora - Mobile

QR Code should work now.

Comment 27

[Jaclyn Fu]

Can we use a QR code that directs to the Aurora mobile page instead of to the build? 

http://bit.ly/y0fxAz.qrcode

Comment 28

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Aurora - Mobile

QR code now pushes to the Aurora Mobile page, however it might be better to push it to the mobile optimized version versus the desktop-mobile page. Also, the "Learn More" button pushes to the desktop-mobile page too.

Comment 29

[Jaclyn Fu]

ah good point!

sorry one last updated QR code that points to the mobile optimized version of the Aurora mobile page: http://bit.ly/yl8F8W.qrcode

Comment 30

[mcbmoz]

(In reply to Jaclyn Fu from comment #29)
> ah good point!
> 
> sorry one last updated QR code that points to the mobile optimized version
> of the Aurora mobile page: http://bit.ly/yl8F8W.qrcode

Hey guys, is the Aurora mobile download available outside of the FTP site? We don't want to be bouncing users on desktop to another site through a QR code than then requires them to go one step further to the FTP site. There should not be a QR code on the Desktop page that promotes the Desktop build.

Comment 31

[mcbmoz]

(In reply to Ty Flanagan from comment #25)
> Ill have to keep the QR code as is then. I inverted the colors but I realize
> now thats not going to work.

Ty, another option is to just have a link to the QR code, which can appear as a pop-up.

Jaclyn, I'm a bit confused about where you want the user to go when they scan the QR code. We definitely don't want them to land on a wiki page. Currently, from the wiki the user is take to an FTP site to download fennec.

Comment 32

[Jaclyn Fu]

I want the users to go to the mobile optimized version of the Aurora mobile page on their phone via the QR code (since they are viewing the Aurora mobile page on desktop currently, it would be easier for them to download if they had a quick method to go from desktop to mobile directly) 

For GA and Beta, the QR codes direct them to the Android Market on their phone

Comment 33

[mcbmoz]

(In reply to Jaclyn Fu from comment #32)
> I want the users to go to the mobile optimized version of the Aurora mobile
> page on their phone via the QR code (since they are viewing the Aurora
> mobile page on desktop currently, it would be easier for them to download if
> they had a quick method to go from desktop to mobile directly) 

This makes sense, but there shouldn't be a QR code on the page for the Desktop downloads.

> 
> For GA and Beta, the QR codes direct them to the Android Market on their
> phone

Because Aurora does not have an Android Market experience, if a user scans a QR code from the /firefox website, she should go directly to the FTP download. We should not be sending the user to an interim location where they need to click again.

Let me know if you want any help talking through this.

Comment 34

[Jaclyn Fu]

(In reply to mcbmoz from comment #33)
> (In reply to Jaclyn Fu from comment #32)
> > I want the users to go to the mobile optimized version of the Aurora mobile
> > page on their phone via the QR code (since they are viewing the Aurora
> > mobile page on desktop currently, it would be easier for them to download if
> > they had a quick method to go from desktop to mobile directly) 
> 
> This makes sense, but there shouldn't be a QR code on the page for the
> Desktop downloads.

From comment 22, the design for desktop does NOT show a QR code. 
> 
> > 
> > For GA and Beta, the QR codes direct them to the Android Market on their
> > phone
> 
> Because Aurora does not have an Android Market experience, if a user scans a
> QR code from the /firefox website, she should go directly to the FTP
> download. We should not be sending the user to an interim location where
> they need to click again.
> 
> Let me know if you want any help talking through this.

We currently do not have downloads straight to FTP since instructions do not live on /firefox yet. However Grace is getting those up and running (see Bug 715726) so directing to the FTP is our next step. However until that's live we would feel more comfortable pointing users to our Aurora site that has directions on it.

Comment 35

[mcbmoz]

(In reply to Jaclyn Fu from comment #34)
> 
> (In reply to mcbmoz from comment #33)
> > (In reply to Jaclyn Fu from comment #32)
> > > I want the users to go to the mobile optimized version of the Aurora mobile
> > > page on their phone via the QR code (since they are viewing the Aurora
> > > mobile page on desktop currently, it would be easier for them to download if
> > > they had a quick method to go from desktop to mobile directly) 
> > 
> > This makes sense, but there shouldn't be a QR code on the page for the
> > Desktop downloads.
> 
> From comment 22, the design for desktop does NOT show a QR code. 
> > 
> > > 
> > > For GA and Beta, the QR codes direct them to the Android Market on their
> > > phone
> > 
> > Because Aurora does not have an Android Market experience, if a user scans a
> > QR code from the /firefox website, she should go directly to the FTP
> > download. We should not be sending the user to an interim location where
> > they need to click again.
> > 
> > Let me know if you want any help talking through this.
> 
> We currently do not have downloads straight to FTP since instructions do not
> live on /firefox yet. However Grace is getting those up and running (see Bug
> 715726) so directing to the FTP is our next step. However until that's live
> we would feel more comfortable pointing users to our Aurora site that has
> directions on it.

Jaclyn, thanks for the update. Next steps - since the download experience is much different from Beta and GA, we won't use a QR code in this flow - it's not an optimal experience for an Aurora user. A QR code works when the url is a direct link to the download. That's another bug, and we'll work with Product to create that flow as it's possible.

Last note, it looks like the interaction is suggesting that the QR code would change based on which item in the slider the user chooses. We don't want to do that until we've talked that through with a front-end developer. That's a lot of content swapping and makes for a much more challenging implementation. It's something to consider for the future, but I think well out of scope here, and is only useful for a very tiny % of users.

Please ping on email if you need more insight or to walk through these thoughts. Thanks!

Comment 36

[Grace Jimenez :grace]

hi ty, 

do you think we can have the updated designs to review and hopefully finalize by the end of this week?

thanks

Comment 37

[Grace Jimenez :grace]

(In reply to mcbmoz from comment #35)
> (In reply to Jaclyn Fu from comment #34)
> > 
> > (In reply to mcbmoz from comment #33)
> > > (In reply to Jaclyn Fu from comment #32)
> > > > I want the users to go to the mobile optimized version of the Aurora mobile
> > > > page on their phone via the QR code (since they are viewing the Aurora
> > > > mobile page on desktop currently, it would be easier for them to download if
> > > > they had a quick method to go from desktop to mobile directly) 
> > > 
> > > This makes sense, but there shouldn't be a QR code on the page for the
> > > Desktop downloads.
> > 
> > From comment 22, the design for desktop does NOT show a QR code. 
> > > 
> > > > 
> > > > For GA and Beta, the QR codes direct them to the Android Market on their
> > > > phone
> > > 
> > > Because Aurora does not have an Android Market experience, if a user scans a
> > > QR code from the /firefox website, she should go directly to the FTP
> > > download. We should not be sending the user to an interim location where
> > > they need to click again.
> > > 
> > > Let me know if you want any help talking through this.
> > 
> > We currently do not have downloads straight to FTP since instructions do not
> > live on /firefox yet. However Grace is getting those up and running (see Bug
> > 715726) so directing to the FTP is our next step. However until that's live
> > we would feel more comfortable pointing users to our Aurora site that has
> > directions on it.
> 
> Jaclyn, thanks for the update. Next steps - since the download experience is
> much different from Beta and GA, we won't use a QR code in this flow - it's
> not an optimal experience for an Aurora user. A QR code works when the url
> is a direct link to the download. That's another bug, and we'll work with
> Product to create that flow as it's possible.
> 
> Last note, it looks like the interaction is suggesting that the QR code
> would change based on which item in the slider the user chooses. We don't
> want to do that until we've talked that through with a front-end developer.
> That's a lot of content swapping and makes for a much more challenging
> implementation. It's something to consider for the future, but I think well
> out of scope here, and is only useful for a very tiny % of users.
> 
> Please ping on email if you need more insight or to walk through these
> thoughts. Thanks!

hi chrissie, 

the QR code in the aurora will still link to the direct link to download. the only difference from beta and GA is that beta and GA will link to the android market download page, while the aurora will link to the instructions page and trigger the download from the FTP at the same time. 

let's sync up today and review the process. 

thanks!

Comment 38

[Jaclyn Fu]

Hey Ty - do you happen to have the links of the QR codes that you used? Did you use the Mozilla bitly account to create? Just asking so we know where to look when we track. Thanks!

Comment 39

[Grace Jimenez :grace]

hi ty, 

please post the final psd's here. 

updates from meeting: 

* no qr code in channel page (adding qr code in aurora landing page).

* no download buttons in the channel page

please let me know if i missed anything else or have any additional questions.


thanks!

Comment 40

[Grace Jimenez :grace]

hi matej, 

can we add a little copy tweak in the aurora general description: 
The newest innovations and experimental features before they go on Beta.

let me know what you think.

thanks!

Comment 41

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox - Desktop

I slimmed down some of the graphic elements and moved the wordmarks under their respective logos instead. The flow feels better with this version :)

Comment 42

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox - Mobile

Comment 43

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Beta - Desktop

Comment 44

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Beta - Mobile

Comment 45

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Aurora - Desktop

Comment 46

[Ty Flanagan]

Attachment: FFx Channel Page - Firefox Aurora - Mobile

Comment 47

[Ty Flanagan]

and the PSDs:

http://mozilla.tyflanagan.com/artwork/ReleaseChannels/FFx_ReleaseChannel_LandingPage_PSDs.zip

Comment 48

[Grace Jimenez :grace]

thanks ty!