697337 - [Firefox Aurora] Design:Firefox Aurora (release) Notes Page for desktop and mobile

Status: RESOLVED FIXED

(Marketing :: Design, task, P1)

Description

[Grace Jimenez :grace]

Attachment: Firefox Aurora Notes Page MockUp

Hi Ty, 

For the upcoming merge week (Nov. 8th), we will be introducing the very first Firefox Aurora (release) notes. Similar to the current Firefox Beta Release notes page:http://www.mozilla.org/en-US/firefox/8.0beta/releasenotes/

We currently do not have a page set up. In addition, the release notes format for aurora is also slightly different from the current page. 

So I was wondering if we can utilize some of the Firefox Aurora branded pages we already have in setting up the Firefox Aurora notes page. 

Attaching a mockup as an example. 

I will also be opening a copy bug to refine the copy for this page and an implementation bug. 

the next merge is nov. 8th. 
So we will need the design by next Wednesday Nov. 2nd and get it to web dev to implement on time for the next merge

Comment 1

[Grace Jimenez :grace]

We also need the same page for mobile.
Here is the current release notes for Firefox Beta for Android: http://www.mozilla.org/en-US/mobile/8.0beta/releasenotes/

It would be great if we can include a mobile image in addition to the Firefox Aurora for Android as the headline  of the page to have a slight differentiation of the page.

Comment 2

[LegNeato]

A couple of notes:

* We were thinking the arrow-type things as tags / category markers and they would likely go with an individual item (but there'd only be one per item?). Pretty much like https://agilebits.com/products/onepassword/versions#v31178. We've also discussed more specific categories (like "Stability", "HTML5", etc) and possibly putting icons in them (like the HTML5 shield).

Feel free to play around, Alex can give you direction and background if you think of something better and want to vet it

* Some of the "what's new" will likely have more than 1 line of information, maybe a lot more (like giving steps to test and pointing to a specific place for feedback, etc). They should always have a one or two sentence description though. I don't think we're sure how best to display the extended info, ideas wanted

* Known issues will likely be broken down and/or tagged (similar to the above) by platform (and some apply to all platforms). Not sure if it makes sense to do that anymore, but that's how it was done in the past

* You can probably steal some design mojo from http://nightly.mozilla.org/

Thanks!

Comment 3

[Grace Jimenez :grace]

Thanks Christian! Super helpful! 


(In reply to Christian Legnitto [:LegNeato] from comment #2)
> A couple of notes:
> 
> * We were thinking the arrow-type things as tags / category markers and they
> would likely go with an individual item (but there'd only be one per item?).
> Pretty much like https://agilebits.com/products/onepassword/versions#v31178.
> We've also discussed more specific categories (like "Stability", "HTML5",
> etc) and possibly putting icons in them (like the HTML5 shield).
> 
> Feel free to play around, Alex can give you direction and background if you
> think of something better and want to vet it
> 
> * Some of the "what's new" will likely have more than 1 line of information,
> maybe a lot more (like giving steps to test and pointing to a specific place
> for feedback, etc). They should always have a one or two sentence
> description though. I don't think we're sure how best to display the
> extended info, ideas wanted
> 
> * Known issues will likely be broken down and/or tagged (similar to the
> above) by platform (and some apply to all platforms). Not sure if it makes
> sense to do that anymore, but that's how it was done in the past
> 
> * You can probably steal some design mojo from http://nightly.mozilla.org/
> 
> Thanks!

Comment 4

[Grace Jimenez :grace]

hi ty, 

let me know if you have any questions about this bug and if we are still on track for Wednesday, Nov. 2nd design deadline?

Thanks!

Comment 5

[Alex Keybl [:akeybl]]

For more info about the thinking behind this release notes redesign, check out the post I just put up at http://alex.keybl.com/?p=181

Comment 6

[Ty Flanagan]

Attachment: Ffx Aurora - Release Notes - Desktop

Comment 7

[Steven Garrity [:sgarrity]]

Is this ready to be built out, or are we waiting on more design feedback?

Comment 8

[Alex Keybl [:akeybl]]

This looks great. My only questions are

* Would it be OK to make the row height and font size smaller when listing more issues?
* Would it be within your design vision to have >3 sidebar sections or >2 bottom sections?

Comment 9

[Ty Flanagan]

(In reply to Alex Keybl [:akeybl] from comment #8)
> This looks great. My only questions are
> 
> * Would it be OK to make the row height and font size smaller when listing
> more issues?

Already making changes to the font size to allow for more features to be in view.

> * Would it be within your design vision to have >3 sidebar sections or >2
> bottom sections?

Do you mean to take the bottom section links and include them within the content along the right side? Id be happier to do this since these links will get lost being all the way at the bottom of a long list of issues

Comment 10

[Grace Jimenez :grace]

hi ty, 

this looks great!thanks!

very minor tweaks: 
  *not call it Release Notes, do we need to put anything there? maybe we can call it just notes or version notes?

   * would it be too much to add in in the side bar? maybe we can temporarily take out spread the word for now and we can rotate content lateR? In my opinion, The 'having problems' and 'other sources' are more relevant content for this page.

   *under having problems: make the 'dev only' a different color. additionally maybe we can add: 

Having Problems:
1. Give us Feedback (input page)
2. Firefox Support
3. Look at known issues...
4. If you can't find reference..

Other resources and links: 
Future of Firefox Blog 

thanks Ty!

Comment 11

[Grace Jimenez :grace]

ty, 

let's use Firefox Aurora Notes in one line (the yellow font, where it says Release notes right now)

thanks!

Comment 12

[Alex Keybl [:akeybl]]

(In reply to Ty Flanagan from comment #9)
> (In reply to Alex Keybl [:akeybl] from comment #8)
> > This looks great. My only questions are
> > 
> > * Would it be OK to make the row height and font size smaller when listing
> > more issues?
> 
> Already making changes to the font size to allow for more features to be in
> view.

Awesome!

> > * Would it be within your design vision to have >3 sidebar sections or >2
> > bottom sections?
> 
> Do you mean to take the bottom section links and include them within the
> content along the right side? Id be happier to do this since these links
> will get lost being all the way at the bottom of a long list of issues

I was more curious to know whether you feel we have the flexibility to add one or more sidebar sections without the need for a redesign, since the current static content may not be final based upon feedback.

Comment 13

[Alex Keybl [:akeybl]]

Ah one other thing I forgot to mention - the tags suggested previously may not be the final set, so we likely won't have icons for all tags we create in the future. If you could provide guidance on what a tag without an icon would look like, it would be much appreciated.

Comment 14

[Alex Keybl [:akeybl]]

Sorry for the churn, but one last question. I noticed that the release notes description underneath the title is 2 lines long, and it looks like it may not allow for more text because we're trying to line up the background with the content (the flare looks great behind the download section and draws attention to it, btw). Is there any way that we could maintain flexibility for having >2 lines of text there?

Comment 15

[Alex Keybl [:akeybl]]

I'll learn to collect my thoughts better but I just keep coming back for more :). Would it be possible to define link colors for both the issue text and the description below it? We'll likely be placing links in both areas. Thanks Ty.

Comment 16

[Ty Flanagan]

Attachment: Ffx Aurora - Release Notes - Desktop (revised)

Comment 17

[Ty Flanagan]

(In reply to Alex Keybl [:akeybl] from comment #13)
> Ah one other thing I forgot to mention - the tags suggested previously may
> not be the final set, so we likely won't have icons for all tags we create
> in the future. If you could provide guidance on what a tag without an icon
> would look like, it would be much appreciated.

Alex, can you give me an idea of what type of tags could be implemented in the future? Its easier to figure out the design of the tags which will allow me to avoid having to generate a rainbow of tags that could potentially upset the design

Comment 18

[Ty Flanagan]

(In reply to Alex Keybl [:akeybl] from comment #14)
> Sorry for the churn, but one last question. I noticed that the release notes
> description underneath the title is 2 lines long, and it looks like it may
> not allow for more text because we're trying to line up the background with
> the content (the flare looks great behind the download section and draws
> attention to it, btw). Is there any way that we could maintain flexibility
> for having >2 lines of text there?

If need be, 3 lines of copy could be used and spread across 80% the content area. Id recommend keeping the copy short and sweet though due to most users tend to ignore it and concentrate mainly on the "meat" of the page.


> Would it be possible to define link colors for both the issue text and the 
> description below it?

All links of the page will be blue.

Comment 19

[Alex Keybl [:akeybl]]

(In reply to Ty Flanagan from comment #17)
> (In reply to Alex Keybl [:akeybl] from comment #13)
> > Ah one other thing I forgot to mention - the tags suggested previously may
> > not be the final set, so we likely won't have icons for all tags we create
> > in the future. If you could provide guidance on what a tag without an icon
> > would look like, it would be much appreciated.
> 
> Alex, can you give me an idea of what type of tags could be implemented in
> the future? Its easier to figure out the design of the tags which will allow
> me to avoid having to generate a rainbow of tags that could potentially
> upset the design

Looks like we have New, Changed, Fixed, and HTML5 already. Perhaps a Developer tag would be good as a catchall for remaining dev-specific features.

Grace - are you tracking any other long term feature topics that deserve a tag?

Comment 20

[Grace Jimenez :grace]

(In reply to Alex Keybl [:akeybl] from comment #19)
> (In reply to Ty Flanagan from comment #17)
> > (In reply to Alex Keybl [:akeybl] from comment #13)
> > > Ah one other thing I forgot to mention - the tags suggested previously may
> > > not be the final set, so we likely won't have icons for all tags we create
> > > in the future. If you could provide guidance on what a tag without an icon
> > > would look like, it would be much appreciated.
> > 
> > Alex, can you give me an idea of what type of tags could be implemented in
> > the future? Its easier to figure out the design of the tags which will allow
> > me to avoid having to generate a rainbow of tags that could potentially
> > upset the design
> 
> Looks like we have New, Changed, Fixed, and HTML5 already. Perhaps a
> Developer tag would be good as a catchall for remaining dev-specific
> features.
> 
> Grace - are you tracking any other long term feature topics that deserve a
> tag?

do we want to call out - silent update, add-ons?, developer tools?

Laura M, do you have anything else you want to add?

thanks!

Comment 21

[Alex Keybl [:akeybl]]

I think this is ready to get passed off to Steven for implementation in 697519. Can that happen early today? I don't think we should block on the full set of tags. Thanks!

Comment 22

[Ty Flanagan]

PSD can be grabbed here:
http://mozilla.tyflanagan.com/artwork/Nightly_Aurora/FFx_Aurora_Desktop_Notes_Final.psd.zip

Comment 23

[Grace Jimenez :grace]

thanks ty! this looks awesome!

-closing bug-