Closed Bug 673014 Opened 13 years ago Closed 13 years ago

[Rapid Release] Mobile: New Design for Firefox Aurora for Mobile on /m/channel page

Categories

(Marketing :: Design, task)

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

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: gjimenez, Assigned: grlicky)

References

Details

Hi Jason, 

We are in the process of growing Firefox Aurora for Mobile users and will start promoting it heavily in the next couple of weeks. 
Can we please add a download button for Firefox Aurora in this page: http://www.mozilla.com/en-US/m/firefox/channel/

Thanks!
Blocks: 673015
In terms of timeline: can we get a design by end of week?

Copy:
Experience the newest innovations before they go to beta       

Provide feedback on features and performance to help determine what makes the final release

Laura/Chrissie, I know you are working on optimizing sites for mobile.do you have any recommendations whether we should add it here (http://www.mozilla.com/en-US/m/firefox/channel/) or have an aurora branded page?

Thanks!
Hey Grace! I'm assuming there is a similar design bug for http://www.mozilla.com/en-US/firefox/channel/. Would you mind linking me that? It's always nice to have the two versions in sync up if possible. Also in that vein, it seems like the thing to do might be to have both aurora and beta on the same page, like desktop. Here's a quick mockup of what that might look like, assuming we wanted to keep the Aurora/Beta order consistent with the desktop page:

http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/mobile_channels_v3.png

As a side note, in the future, it would also be nice to get a little more heads-up on a task if it's important, since I've got a lot on my plate right now.
(In reply to comment #2)
> Hey Grace! I'm assuming there is a similar design bug for
> http://www.mozilla.com/en-US/firefox/channel/. Would you mind linking me
> that? It's always nice to have the two versions in sync up if possible. Also
> in that vein, it seems like the thing to do might be to have both aurora and
> beta on the same page, like desktop. Here's a quick mockup of what that
> might look like, assuming we wanted to keep the Aurora/Beta order consistent
> with the desktop page:
> 
> http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/
> mobile_channels_v3.png
> 
> As a side note, in the future, it would also be nice to get a little more
> heads-up on a task if it's important, since I've got a lot on my plate right
> now.

thanks jason! the mock up looks great! 
my only is concern is that when u open the page in a mobile phone, you will only see aurora and will have to scroll down for beta? 
is there anyway make sure that when we open the page in a mobile phone we can see both? 
i agree with keeping it in the same page. 
Here is the bug for the desktop channel page: 673048
Depends on: 673048
Awesome, glad to hear it works! Thanks for the Desktop Channel bug.

Yeah, the needing-to-scroll-down-for-beta is a concern of mine as well, but it's the best option I can think of. I initially thought of going for tabs, similar to the original channels mockup ( http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/mobile_channels_v1.png ), but instead of switching between "Mobile" and "Desktop," the tabs would switch between "Aurora" and "Beta." Unfortunately, I think this might actually give Beta less discoverability than just putting it beneath Aurora. Especially on mobile web pages, people understand that you may need to scroll to see all the content. If you have any other ideas, I'd love to hear them!
(In reply to comment #4)
> Awesome, glad to hear it works! Thanks for the Desktop Channel bug.
> 
> Yeah, the needing-to-scroll-down-for-beta is a concern of mine as well, but
> it's the best option I can think of. I initially thought of going for tabs,
> similar to the original channels mockup (
> http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/
> mobile_channels_v1.png ), but instead of switching between "Mobile" and
> "Desktop," the tabs would switch between "Aurora" and "Beta." Unfortunately,
> I think this might actually give Beta less discoverability than just putting
> it beneath Aurora. Especially on mobile web pages, people understand that
> you may need to scroll to see all the content. If you have any other ideas,
> I'd love to hear them!

This looks good Jason, thanks for this pretty last minute request. I think this looks great.
Summary: [Rapid Release] Mobile: Please add Firefox Aurora for Mobile in /m/channel page → [Rapid Release] Mobile: New Design for Firefox Aurora for Mobile on /m/channel page
(In reply to comment #4)
> Awesome, glad to hear it works! Thanks for the Desktop Channel bug.
> 
> Yeah, the needing-to-scroll-down-for-beta is a concern of mine as well, but
> it's the best option I can think of. I initially thought of going for tabs,
> similar to the original channels mockup (
> http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/
> mobile_channels_v1.png ), but instead of switching between "Mobile" and
> "Desktop," the tabs would switch between "Aurora" and "Beta." Unfortunately,
> I think this might actually give Beta less discoverability than just putting
> it beneath Aurora. Especially on mobile web pages, people understand that
> you may need to scroll to see all the content. If you have any other ideas,
> I'd love to hear them!

hi jason.
thanks for this. 
this is great idea but i was wondering if it would be possible to reduce the size of the buttons and maybe the copy or maybe consolidate images to fit both aurora and beta in this one page? thanks!
Grace - yeah, we can definitely do something like that! The buttons and headlines are both the standard size on the site, and I wouldn't recommend making the copy any smaller, since it actually looks pretty small on a phone already.

Something we *can* do, however, is cut down the amount of copy under each section. I noticed that the description bullet points are strikingly similar between Beta and Aurora, and as a potential user, I wouldn't have enough data to tell the difference between the two versions. Maybe we could cut each of those down to a short, descriptive sentence? Then I could remove the bullet point and save some space that way too.

Another thing that I can do is to join the two sections into one, separated by a horizontal line - that should shave off a few pixels as well.
Blocks: 673561
(In reply to comment #7)
> Grace - yeah, we can definitely do something like that! The buttons and
> headlines are both the standard size on the site, and I wouldn't recommend
> making the copy any smaller, since it actually looks pretty small on a phone
> already.
> 
> Something we *can* do, however, is cut down the amount of copy under each
> section. I noticed that the description bullet points are strikingly similar
> between Beta and Aurora, and as a potential user, I wouldn't have enough
> data to tell the difference between the two versions. Maybe we could cut
> each of those down to a short, descriptive sentence? Then I could remove the
> bullet point and save some space that way too.
> 
> Another thing that I can do is to join the two sections into one, separated
> by a horizontal line - that should shave off a few pixels as well.

- agree with cutting down copy and them being very similar right now. 
- adding matej, to help us tweak the copy.

thanks!
I pulled out what I think are the most relevant pieces of information about each. Let me know what you think about these:


Aurora Mobile
Experience the newest innovations before they go to beta.


Beta Mobile
Help refine and polish what will be in the final release.
hi jason. hope that helps. please let me know if we can review the new design. trying to get this page updated by tomorrow.  thanks!
Matej: Thank you for your help, that sounds great to me!

Grace: Cool, I'll modify the design this morning and get it posted shortly!
lookin' good!

One thing to note is that any buttons used specifically to download our products should be green.  We're moving away from purple and blue for download buttons.
Ah sweet, thanks for the heads-up Sean! Just updated the mockup above to reflect that. I think the move to green is a good thing :D
just want to double check, can we see both aurora and beta if viewed in mobile?
To be 100% clear, you can never guarantee that something will be above or below the fold in web development, especially so on mobile when there are vast differences in screen size. That said, here's a picture of the mockup on my droid 2:

http://people.mozilla.com/~jgrlicky/drop/mozcom/mobile_mockups/rapid_release/mobile_channels_v4_mobile_pic.jpg

Seems to work pretty well to me, but I invite you to look at the mockup on your phone as well if you'd like!
thanks for the photo! 
can we shrink a few things (maybe logo/wordmark, download button) so that we can see the the beta download button as well?
if we can't, also fine with as is now.   
since the update is for tomorrow  and will probably revisit this page again soon anyway. thanks jason!
I've updated the mockup again with tighter padding, so that should help.

Let's just plan on revisiting this page later, then - I don't really have time to put any more effort into this today. Thanks for the quick feedback!
thanks jason! closing bug.
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.