[Firefox Channel Page] Design Firefox Channel Landing Page Desktop

RESOLVED FIXED

Status

Marketing
Design
P3
normal
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: grace, Assigned: Ty Flanagan)

Tracking

Details

Attachments

(8 attachments, 8 obsolete attachments)

133.63 KB, image/png
Details
68.24 KB, image/png
Details
400.07 KB, image/png
Details
400.48 KB, image/png
Details
398.09 KB, image/png
Details
398.17 KB, image/png
Details
440.47 KB, image/png
Details
440.62 KB, image/png
Details
(Reporter)

Description

6 years ago
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.
(Reporter)

Comment 1

6 years ago
this is in addition to the firefox aurora and firefox beta page.
thanks!
(Reporter)

Updated

6 years ago
Blocks: 684080
(Reporter)

Comment 2

6 years ago
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!
(Reporter)

Comment 3

6 years ago
Created attachment 558166 [details]
Channel Landing Page Wireframe
(Reporter)

Comment 4

6 years ago
Created attachment 558167 [details]
Rapid Release Page Flow Diagram
(Reporter)

Updated

6 years ago
Blocks: 684613

Updated

6 years ago
Assignee: tshahian → tyronflanagan
Summary: [Rapid Release Branding] New and Branded Channel Landing Page → [Rapid Release Branding] New and Branded Channel Landing Page Desktop

Comment 5

6 years ago
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

6 years ago
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?
(Reporter)

Comment 7

6 years ago
(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).
(Reporter)

Comment 8

6 years ago
(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

6 years ago
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

6 years ago
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!
(Reporter)

Comment 11

6 years ago
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

6 years ago
It would make more sense on the mobile channel landing page. I'll comment in Bug 684613.
(Reporter)

Updated

6 years ago
Priority: -- → P2
(Reporter)

Comment 13

6 years ago
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!
(Reporter)

Updated

6 years ago
Priority: P2 → P3
(Reporter)

Updated

6 years ago
Summary: [Rapid Release Branding] New and Branded Channel Landing Page Desktop → [Firefox Channel Page] Design Firefox Channel Landing Page Desktop

Updated

6 years ago
Status: NEW → ASSIGNED
(Reporter)

Comment 14

6 years ago
hi ty, 

any updates here?

thanks!
(Assignee)

Comment 15

6 years ago
Working to get this page ready by Friday.
(Reporter)

Comment 16

6 years ago
sweet. thanks!
(Reporter)

Comment 17

6 years ago
hi ty, 

hope you had a great holiday. 

any updates on the channel design?

thanks!
(Assignee)

Comment 18

6 years ago
Created attachment 586592 [details]
FFx Channel Page - Firefox - Desktop
(Assignee)

Comment 19

6 years ago
Created attachment 586593 [details]
FFx Channel Page - Firefox - Mobile
(Assignee)

Comment 20

6 years ago
Created attachment 586594 [details]
FFx Channel Page - Firefox Beta - Desktop
(Assignee)

Comment 21

6 years ago
Created attachment 586595 [details]
FFx Channel Page - Firefox Beta - Mobile
(Assignee)

Comment 22

6 years ago
Created attachment 586596 [details]
FFx Channel Page - Firefox Aurora - Desktop
(Assignee)

Comment 23

6 years ago
Created attachment 586597 [details]
FFx Channel Page - Firefox Aurora - Mobile

Comment 24

6 years ago
(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?
(Assignee)

Comment 25

6 years ago
Ill have to keep the QR code as is then. I inverted the colors but I realize now thats not going to work.
(Assignee)

Comment 26

6 years ago
Created attachment 586605 [details]
FFx Channel Page - Firefox Aurora - Mobile

QR Code should work now.
Attachment #586597 - Attachment is obsolete: true

Comment 27

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

http://bit.ly/y0fxAz.qrcode
(Assignee)

Comment 28

6 years ago
Created attachment 586606 [details]
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.
Attachment #586605 - Attachment is obsolete: true

Comment 29

6 years ago
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

6 years ago
(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

6 years ago
(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

6 years ago
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

6 years ago
(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

6 years ago

(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

6 years ago
(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!
(Reporter)

Comment 36

6 years ago
hi ty, 

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

thanks
(Reporter)

Comment 37

6 years ago
(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

6 years ago
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!
(Reporter)

Comment 39

6 years ago
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!
(Reporter)

Comment 40

6 years ago
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!
(Assignee)

Comment 41

6 years ago
Created attachment 589382 [details]
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 :)
Attachment #586592 - Attachment is obsolete: true
(Assignee)

Comment 42

6 years ago
Created attachment 589383 [details]
FFx Channel Page - Firefox - Mobile
Attachment #586593 - Attachment is obsolete: true
(Assignee)

Comment 43

6 years ago
Created attachment 589384 [details]
FFx Channel Page - Firefox Beta - Desktop
Attachment #586594 - Attachment is obsolete: true
(Assignee)

Comment 44

6 years ago
Created attachment 589385 [details]
FFx Channel Page - Firefox Beta - Mobile
Attachment #586595 - Attachment is obsolete: true
(Assignee)

Comment 45

6 years ago
Created attachment 589386 [details]
FFx Channel Page - Firefox Aurora - Desktop
Attachment #586596 - Attachment is obsolete: true
(Assignee)

Comment 46

6 years ago
Created attachment 589387 [details]
FFx Channel Page - Firefox Aurora - Mobile
Attachment #586606 - Attachment is obsolete: true
(Assignee)

Comment 47

6 years ago
and the PSDs:

http://mozilla.tyflanagan.com/artwork/ReleaseChannels/FFx_ReleaseChannel_LandingPage_PSDs.zip
(Reporter)

Comment 48

6 years ago
thanks ty!
(Reporter)

Updated

6 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.