695604 - [Firefox Aurora Branding] Design: Firefox Aurora Page for Mobile (Optimized)

Status: RESOLVED FIXED

(Marketing :: Design, task, P1)

Description

[mcbmoz]

Attachment: Wireframe 1 for Aurora

Goal: Create a landing page for users on mobile devices

Users will arrive at this page in the following ways:

*clicking on an Aurora ad (device detection will send the user to this page)
*clicking on "see all our other channels" from http://www.mozilla.org/en-US/m/ --> http://www.mozilla.org/en-US/m/firefox/channel/
*clicking on the "go to mobile" link from http://www.mozilla.org/en-US/mobile/ and other pages in the current desktop experience

Recommendation regarding device detection:

*create a fall-back state for the main site navigation for tablet users, so that they see http://www.mozilla.org/en-US/firefox/aurora/ and don't send them to the /m site at all

*only send users on mobile phones to the /m site

Wireframes:

Wireframe 1 - this takes the current page at http://www.mozilla.org/en-US/firefox/aurora/ and makes it mobile friendly

The blog, email sign-up, and social items are not included and I don't recommend adding them. If they are added, I recommend A/B testing the experience with and without them and placing them in little buckets like the FAQ and Privacy Policy links)

Wireframe 2 - this is a billboard approach, a reduced page using the same design, so you can A/B test what is most effective out the door.

I've made notes in the wireframes where I've adjusted the copy for Matej, namely taking words out and adding in two references specific to mobile: mobile UI and tablet and phone.

Nite all!

Comment 1

[mcbmoz]

Attachment: Wireframe 2 for Aurora

Simplified experience for A/B testing against Wireframe 1

Comment 2

[Jaclyn Fu]

+1 to Wireframe 1.  Since it's a lesser known product, I think it might be helpful for users to know what they're getting into for Aurora. 

Also +1 to adding a link to Supported Devices since we don't want them to have a bad experience if they download it onto an unsupported device. 

Thanks Chrissie!

Comment 3

[Matej Novak [:matej]]

Thanks Chrissie, that looks great. Just a few small tweaks from me. Here's the full text so Ty has somewhere to pull from:

Firefox Aurora
Download Aurora and help shape the future of Firefox. [<-should this say "Download Aurora for mobile?"]

1. Preview Features
Get the latest mobile and tablet UI, security features, HTML5 and other technologies first.

2. Share Feedback
Test performance, file bugs and help us determine what features go on to Beta.

3. Shape Firefox
Join a community of users, contributors and developers working to build Firefox.

Comment 4

[mcbmoz]

Attachment: Wireframe 1 for Aurora

Updated with revised Matej-approved copy :-)

Comment 5

[mcbmoz]

Attachment: Wireframe 2 for Aurora

Updated wireframe with Matej-approved copy!

Comment 6

[mcbmoz]

Grace, assigning to you for review, there are some questions in the interaction notes for both designs.

Comment 7

[Grace Jimenez :grace]

thanks chrissie.

* i like wireframe #1
* we should keep the list of supported devices link (even if it goes below the release notes page)
* i dont think we need #10 interaction or have to view in full site. we can just take #10 interaction out.

assigning to ty to move forward with the design.

ty, can we get the final design the latest next friday, 28th?

thanks!

Comment 8

[Ty Flanagan]

Attachment: FFx Aurora - Mobile - Android Download Page

Comment 9

[Grace Jimenez :grace]

hi ty, 

this looks great! thanks ty!

minor copy update: 
copy in yellow: Download  Aurora for Android.... rather than Download Aurora for mobile....

jaclyn, chrissie and jason, please let us know if you have any additional feedback as our mobile optimized sites experts.

Comment 10

[mcbmoz]

(In reply to Grace Jimenez :grace from comment #9)
> hi ty, 
> 
> this looks great! thanks ty!
> 
> minor copy update: 
> copy in yellow: Download  Aurora for Android.... rather than Download Aurora
> for mobile....
> 
> jaclyn, chrissie and jason, please let us know if you have any additional
> feedback as our mobile optimized sites experts.

Also, eliminate the menu at the top, we no longer use that for the site. Looks fab Ty!

Comment 11

[Jaclyn Fu]

For the "Release notes" tab at the bottom, let's label it "What's new in this version" instead since we're not calling them Release Notes for Aurora.  Thanks!

Comment 12

[Ty Flanagan]

Attachment: FFx Aurora - Mobile - Android Download Page (revised)

Updated with copy change and top menu removed

Comment 13

[Grace Jimenez :grace]

(In reply to Ty Flanagan from comment #12)
> Created attachment 570752 [details]
> FFx Aurora - Mobile - Android Download Page (revised)
> 
> Updated with copy change and top menu removed

hi ty, this looks great. if we can just update the copy where it says release notes that would be great!

Comment 14

[Grace Jimenez :grace]

hi ty, 

just wanted to follow up on this one. 

Thanks!

Comment 15

[Grace Jimenez :grace]

hi ty, 

when you get a chance, please upload the latest design with release notes tweak. 
we can probably upload the psd here and pass it on to webdev to build.

thanks!

Comment 16

[mcbmoz]

Ping Ty, do you know when you will have a final PSD that we can pass over to the website team?

Comment 17

[Ty Flanagan]

Hey Chrissie,

Here is the PSD file:
http://mozilla.tyflanagan.com/artwork/Nightly_Aurora/FFx_Aurora_Mobile_Android.psd.zip

Comment 18

[mcbmoz]

(In reply to Ty Flanagan from comment #17)
> Hey Chrissie,
> 
> Here is the PSD file:
> http://mozilla.tyflanagan.com/artwork/Nightly_Aurora/
> FFx_Aurora_Mobile_Android.psd.zip

Rockstar! Thanks Ty!