Closed Bug 653291 Opened 13 years ago Closed 13 years ago

[Rapid Release] Design Request for /Firefox/Channel Page redesign

Categories

(Marketing :: Design, task)

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

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: gjimenez, Assigned: victoria.pater)

References

(
URL
)

Details

Attachments

(10 files)

Revisions Round 1
998.07 KB, image/jpeg
Details
Round 2
1.01 MB, image/jpeg
Details
Round 3
1017.34 KB, image/jpeg
Details
mobile icon inside the button
20.16 KB, image/tiff
Details
Revised
971.52 KB, image/jpeg
Details
Revised
1020.66 KB, image/jpeg
Details
Revised
1023.69 KB, image/jpeg
Details
Revised
1.01 MB, image/jpeg
Details
Revised
1.02 MB, image/jpeg
Details
Revised RSS
1.01 MB, image/jpeg
Details 
i initially opened a bug to add mobile beta in this channel (Bug 651005). 
but after collaborating and discussing options with few stakeholders, we've
come up with a new plan which now requires redesigning the page: 

1. Adding Mobile Beta in one of the 3 columns
Currently it's Aurora, Beta and Final Release.
This proposal means the new page will have Desktop Aurora, Desktop Beta and
Mobile Beta

2. Where will the final Release go in the page?
Since the main purpose of this page is promote the pre-final channels we have,
we would like to move final release in one of the promotions at the bottom of
the page.

3. but we already have newsletter sign up at the bottom of the page? 
instead of the newsletters taking up all 3 columns for the bottom of the page,
we would like to have the final release (desktop/mobile) promo/download button
in one/two of the columns and newsletter sign up. we would also like to include
a copy that says the beta will include desktop and mobile. 


live date: may 17th
So https://bugzilla.mozilla.org/show_bug.cgi?id=651005#c17 has been overruled then? If so, can you post in that bug so no further work is done? Also, is it fair to say that bug 651005 is dependent on this one?

Tara, let's talk about design resources.
hi john. yes i will be closing bug 651005 and open appropriate bugs based from what we concluded in the meeting (redesign of the /firefox/channel with mobile, jason's thoughts etc)

I've already opened website bug to request redesign of /firefox/channel (bug 	653288) echoing most of what we've talked about from the meeting yesterday with recommendations on how to move forward with adding mobile in the page. 

From your summary in bug 651005:  
- key goal for this bug remains giving mobile a presence on this page. The
deadline for that is the beta launch on May 17, so I'm marking this as release
2.5.
- other spinoff issues, such as adding a checkbox for mobile newsletters, will
also be addressed separately
(addressing that here. we wont have to create a new checkbox for mobile. instead we are combining it with desktop. which means that we will have one beta checkbox and add verbiage around beta newsletter will include desktop and mobile)
- specifically, I think we can move "Sign up for one or all of our Firefox
channel newsletters." under the "Get the latest Channel News" mini-header, then
scoot the actual sign-up fields over to the middle column. That should leave a
space (not big, but big enough) for the mobile promo.
(We are no longer doing the mobile promo. since we included it the top page.instead we are moving the final release versions here at the bottom of the page with the reduce newsletter sign up promo recommendation.)

hope that helps. let me know if u have any additional questions
Timing wise: if live date is May 17th, we'd need the designs by at least May 12th to implement in time before code freeze on May 16th. 

Please aim to deliver assets to webdev by May 12th.
Ok, Tara, let's talk design resources.
Hey guys.  I've pinged a new freelance designer (Victoria)  to help crank this out.   Grace, per our discussion... this is what we're looking for:

* Keep the three column layout at the top, but replace the "Final Release" channel, with "Beta Mobile".

* Creating a two-column layout below the fold and push newsletter signup to one side (left), and download CTA for Final Release to the right. 

* The Final Release CTA should include both mobile and desktop and should not be weighted as heavily as the CTAs above it (avoiding tons of logos and buttons on one page).  

* On the newsletter, the "beta" checkbox should indicate that this is for both desktop and mobile.  Perhaps an asterisk footnote, or something else.

Does that capture everything?
thanks tara! that's great! that should be everything we need. 
just want to add one more thing, can we also add a link/promo to the rapid release blog? the page is still in the process of getting created now but would be great to promote it in this page.

per laura forrest in comment 3, we need the design by may 12. 

thanks again. please let me know if you need any additional info.
Victoria is on board. She'll be starting on this tonight.  May 12th is no problem.  Stay tuned.
Assignee: tshahian → victoria.pater
yay thanks!
This should be quick. I just need copy for the bullets under the new Beta Mobile section.
Grace, do we have existing copy for this or do we need to get Matej involved?
Thanks Victoria, would be great if you can just Greek in the copy for now and we can roll in the text later when it's ready.
Perfect, I'll send over what I have in place in just a few.
(In reply to comment #10)
> Grace, do we have existing copy for this or do we need to get Matej involved?

we can use the same copy from the /firefox/channel page

same headline
same tagline

slight change on Aurora
Experience the newest innovations before they go to beta
Provide feedback on features and performance to help determine what makes the final release
Note: Aurora is not for the faint of heart, but that’s the price of being on the cutting edge


same copy for desktop beta

Copy for mobile beta (adding matej for review or any additional suggestions)
Experience cutting edge mobile features in development
Provide feedback to help refine and polish what will be in the final release

thanks!
(In reply to comment #13)
> 
> Copy for mobile beta (adding matej for review or any additional suggestions)
> Experience cutting edge mobile features in development
> Provide feedback to help refine and polish what will be in the final release

Slight tweaks:

Experience cutting edge mobile features still in development
Provide feedback to help refine and polish what makes the final release
(In reply to comment #14)
> (In reply to comment #13)
> > 
> > Copy for mobile beta (adding matej for review or any additional suggestions)
> > Experience cutting edge mobile features in development
> > Provide feedback to help refine and polish what will be in the final release
> 
> Slight tweaks:
> 
> Experience cutting edge mobile features still in development
> Provide feedback to help refine and polish what makes the final release

thanks matej!
Attached image Revisions Round 1 — 
Here is my first go at the edits. Is there a certain way (visually) to introduce the Rapid Release Blog, or should it be a link? Please let me know if I misunderstood any of the comments!
(In reply to comment #16)
> Created attachment 529824 [details]
> Revisions Round 1
> 
> Here is my first go at the edits. Is there a certain way (visually) to
> introduce the Rapid Release Blog, or should it be a link? Please let me know if
> I misunderstood any of the comments!

this looks great! thanks victoria! under the final release, can we make the one big giant button and have two smaller buttons, one for desktop final release and one for mobile final release?

thanks.
Thanks Victoria!

Here are my quick thoughts / nits:

* I think the RRB should just be a link.  But if we add that, would we need to update the sub-head on the page since it references the channels and newsletter, but not the blog?

* Should we add a FF logo to the final release section?  I feel like we're entering a space where we have too many logos and buttons.  So, I rather not, but wanted to hear other thoughts. And maybe the buttons are smaller/thinner? 

* On that same token, I'm not a big fan of the "sign me up" button.  I feel like we have too many similarly styled buttons competing for attention.  Can we treat that differently?

* On the newsletter part.  What if we do "Get the latest CHANNEL NEWS" vs. "Get the LATEST CHANNEL NEWS" ?  Just a thought.
Oh, and the field for entering in an email address... the box feels a bit big to me.  It shouldn't be in my opinion.  Something like this works better:  http://www.mozilla.com/en-US/newsletter/
Looks great! Just a couple of things:

• Should the download button for Final Release actually say Download Mozilla Firefox 4? Or since we're doing one for desktop and one for mobile, maybe we could just do "Download Mozilla Firefox for desktop" and "Download Mozilla Firefox for mobile."

• Now that I see it in context, I think the second bullet point under Mobile Beta should be the same as the second under Beta. Sorry for futzing with it earlier.

• Also, on the subject of mobile, is there standard practice around the order of that? I find "Beta Mobile" a bit awkward. Feels like it should be "Mobile Beta." What do people think?

• I also wonder if the "Note" for Aurora should go under the button so there isn't so much white space above the other buttons. But I'll defer to the designy types on that.
The reason I put "Beta mobile" is to stay consistent with how the other channels are presented:  Channel name + other note/platform.  I think it works better this way, though I agree it might not read as well as "mobile Beta".

I don't think moving the "note" below the button is a good idea b/c then you'd have a giant white space below the buttons and before the other content.  I'd prefer to keep it where it is, personally.
Hi Victoria. Thanks for your work on this, and welcome!

A few quick thoughts to add to the above:
- agreed with Tara in comment #19 that we should be consistent in the way we treat newsletter signups (i.e, no big blue button)
- re: comment #17, I'd like to reduce the number of buttons on this page rather than add. Not sure how to best achieve the goal here, but that's my preference.
- looks like there's some font inaccuracy happening...should be using Meta Black for words like AURORA, BETA, CHANNEL NEWS, etc - see http://www.mozilla.com/en-US/firefox/channel/ for reference.
- in the email fields, it looks a bit like the country pulldown is for Aurora, etc...can we fix that somehow?

Thanks!
Victoria, I'll be sending you the font files (in case you don't have them).
(In reply to comment #21)
> The reason I put "Beta mobile" is to stay consistent with how the other
> channels are presented:  Channel name + other note/platform.  I think it works
> better this way, though I agree it might not read as well as "mobile Beta".

Could we then say "Beta for mobile" to be consistent with other mobile naming?
that works for me.
One more heads up: since this page will be live when both beta goes live, the buttons should have the live colored buttons rather than the coming soon buttons. (just like the Aurora Download button). thanks!
Great, I'll swap those out for color and upload a revised version within the hour!
(In reply to comment #27)
> Great, I'll swap those out for color and upload a revised version within the
> hour!

thanks victoria. also.. i think there's a little typo under Aurora: 
it should say: 
Experience the newest innovations before they go to beta

I think it's missing "to" right now. ;) thanks!
Attached image Round 2 — 
I feel like this is getting closer, but could still use some love. I'm not sure how to get away from using all the buttons, so I brought them all down in size to appear less clunky. There is technically more this round since we added Desktop/Mobile for Final Release.
Looking good. Just a few thoughts from me:

• The first bullet point under Mobile changed. The second one is correct now, but can you change the first one back to: 

Experience cutting edge mobile features still in development

• I still find it a little strange that the buttons under the Final Release section say "Final Release" in them. That's just the name of the channel, but not the product. Based on what we've done previously, and to stay consistent with the other buttons on the page, I think they should be "Download Mozilla Firefox for Desktop" and "Download Mozilla Firefox for Mobile"

• I find the phrase "experience final release" to be a little awkward and odd. Can we change that to "Experience Firefox for Desktop and Mobile."

• The final release copy should be:

Enjoy the tried and tested final release featuring super speed, easy customization and the latest Web technologies.

• The rapid release blog copy should be:

Be the first to know what's new with our upcoming releases.
Thanks Victoria.

My quick thoughts:

* If I look at the whole page at once, there's definitely a lot of buttons, but a normal user wouldn't see the whole thing at once, so... perhaps it's OK.

* I'm not a big fan of the blog graphic with "HELLO".  We have the yetti illo right below it, and the blog graphic is distracting. I"d rather leave the focus on the other content on the page.

* For the final release buttons, they look too similar... perhaps we can differentiate mobile/desktop a little better? either on the button or outside of it somehow.
Attached image Round 3 — 
OK, small tweaks (and new copy) in place. I agree on the Final Release stuff... Would we be opposed to a mobile and desktop icon similar in style to the 'News' Envelope paired with 'Mozilla Firefox for Desktop' and 'Mozilla Firefox for Mobile' links in Georgia? I think it would help clean up the layout and eliminate some of the buttons for people with larger displays.
I also meant to ask if we had any iconic assets or other branding elements that I could pull in for the Final Release section. I'm still getting familiar with the brand and have only been able to pull from pages that are currently live. Just let me know if I'm missing something, or if new icons can be added! Actually, if someone has a copy of a brand book, that would work too :)
(In reply to comment #31)
> Thanks Victoria.
> 
> My quick thoughts:
> 
> * If I look at the whole page at once, there's definitely a lot of buttons, but
> a normal user wouldn't see the whole thing at once, so... perhaps it's OK.
> 
> * I'm not a big fan of the blog graphic with "HELLO".  We have the yetti illo
> right below it, and the blog graphic is distracting. I"d rather leave the focus
> on the other content on the page.
> 
> * For the final release buttons, they look too similar... perhaps we can
> differentiate mobile/desktop a little better? either on the button or outside
> of it somehow.

can we add a mobile phone icon inside the button (see attachment). The attachment has the home icon in the button. Instead of the home icon maybe we can put a mobile icon?

    
    

    
  
Re: Round 3, just spoke with Slater and we think it's unnecessary to have the final release for desktop and mobile on this page.  It's already busy with the channels, newsletter and blog and really this page is for promoting the new channels.  Plus the menu bar up top enables any user to find the final releases if they need to.  Please delete the section "Experience Firefox Desktop and Mobile".

    
    

    
  
Totally agree with comment #36. I think that will solve a lot of our clutter problems here.

Am not really sold on using a mobile phone on the button, though - we don't do that anywhere else on the site...while it might be a good idea, we should roll that out with consistency if we do it, and I think that will take a little more time to get the icon right, etc. Would rather file that away for a future rev.

    
    

    
  

      
      
      
      

        Attached image
          
        Revised
        — 
      

    


  
Yes, if we drop that entire section there is no need to introduce icons within buttons. How does the attached look?

    
    

    
  
quick comment - the beta and final rlease download buttons should be our standard green. the purple button is reserved for Aurora only.

    
    

    
  
Thanks Victoria.

Glad to hear that we nixed the Final Release section... it was definitely getting to be too busy here.  Too many buttons, and so forth.

Now it feels a little empty :)  any chance we can roll in some more text (just a little) to explain the blog? we need a link there too.. there's no clear action item.  

Alternatively, we can stack the newsletter and blog horizontally so that there isn't a big white space on the right side.  Just a thought... but I do like this approach better, as long as the blog section is filled out a little more.  It looks incomplete right now.

    
    

    
  
I can totally write a bit more for the blog section if that's how we want to proceed. Just need a bit of direction on what it should say.

    
    

    
  
Thanks Victoria!

Some more text would probably help. Also, this might expand the dev scope a bit, but we could also do an RSS thing there and show the headlines of the last few recent posts. That might drive click-thru over to the blog (if that's what we want).

    
    

    
  

      
      
      
      

        Attached image
          
        Revised
        — 
      

    


  
What if we pull the RSS and just have each entry clickable, or do we need a direct blog link/button?

    
    

    
  
Concept looks right on...I'd say the text is too big, though.

Also, am I crazy or are the buttons in the mockup a slightly different shape than the live ones?

    
    

    
  
Also, for a general link to the blog we could just link "our upcoming releases" in the subhead.

    
    

    
  
Yes, we adjusted the buttons to appear lighter on the page when there were more of them. Should I bring back the one supplied in the original Photoshop file?

    
    

    
  
I say lets bring back the originals :)

    
    

    
  

      
      
      
      

        Attached image
          
        Revised
        — 
      

    


  
Great, how does this look?

    
    

    
  
looks good to me. others?  thoughts?

(I personally think that the channel names locked up with the Logo conflict with our official wordmarks, but... that's a different conversation and a different bug.  Just wanted to throw it out there).

    
    

    
  
thanks Victoria. 

- under the newsletters sign up: 
can we do add (desktop) under aurora to keep the consistent look with beta and final release sign up

- can we add the all.html link under the download buttons?
- with that being said, we might need to move the current text under the Aurora button depending how it looks after adding the all.html link
(see all.html link under the download button from this page: http://www.mozilla.com/en-US/firefox/channel/)

thanks!!

    
    

    
  
also just an heads up. mobile beta logo might be changing. based on bug 652652. 
It sounds like we won't see the options until 11th of May.

    
    

    
  

      
      
      
      

        Attached image
          
        Revised
        — 
      

    


  
Not wild about the Aurora 'note' copy calling below the all.html link, but if I put it back above the download, that row of buttons gets pushed too far down on the page. What do you think?

    
    

    
  
(In reply to comment #52)
> Created attachment 530400 [details]
> Revised
> 
> Not wild about the Aurora 'note' copy calling below the all.html link, but if I
> put it back above the download, that row of buttons gets pushed too far down on
> the page. What do you think?

i agree. maybe we can move it on top of the download button? I understand the reasoning why it's at the bottom to keep the two bullet consistent... but after adding the all.html link, not really sure if at the bottom is the right place for that. 

beta for desktop should also have the all.html. thanks victoria!!!

    
    

    
  
Grace.  Am coming down to chat with you in person if you're around.  not sure if putting it on top is going to look good.  Unless I misunderstood.

    
    

    
  
Hi there.  So, per comment #21, lets put the "note" back up above the button, as it was before.  I liked that arrangement better and prefer to keep it that way.  That note is also an important note, worthy of being read before clicking download... so, it just makes more sense above the button than below.  Not sure why it went down there anyway :)    And, I think that's about it - pending the new beta logo arriving next week.   Thanks!

    
    

    
  
I'm fine with it being above, but now that I think about it, I'm wondering why we're adding a third bullet to Aurora anyway when we only have two on the current Channels page: http://www.mozilla.com/en-US/firefox/channel/

The "faint of heart" line is already there in the first bullet, so why have three points for Aurora but only two for the Beta channels? I just think it makes it unnecessarily uneven.

Alternately, I'm happy to come up with a third bullet for the other two, but I think that just adds copy to an already busy page.

Other thoughts?

    
    

    
  
Hey Matej.  I didn't see "faint of heart" part in the first bullet.  I think if we can incorporate the same mnessage in one of those bullets, that'd be best, as you said.  So that it's more even and consistent.

    
    

    
  
So, to be clear on next steps.  Matej, do you want to take a swing at updating the copy so we incorporate that note into one of the two bullets?  Grace, are you on board with this?

    
    

    
  
I just want to make sure there wasn't an important reason the change was made in the first place. Otherwise, I'd just stick with what we have now:

• Experience the newest innovations in an unstable environment that’s not for the faint of heart
• Provide feedback on features and performance to help determine what makes the final release


A slight variations could be:

• Experience the newest innovations before they go to beta in an environment that’s not for the faint of heart
• Provide feedback on features and performance to help determine what makes the final release

    
    

    
  
(In reply to comment #59)
> I just want to make sure there wasn't an important reason the change was made
> in the first place. Otherwise, I'd just stick with what we have now:
> 
> • Experience the newest innovations in an unstable environment that’s not for
> the faint of heart
> • Provide feedback on features and performance to help determine what makes the
> final release
> 
> 
> A slight variations could be:
> 
> • Experience the newest innovations before they go to beta in an environment
> that’s not for the faint of heart
> • Provide feedback on features and performance to help determine what makes the
> final release


thanks matej. I like the 2nd option. I was trying to find a way to not say "unstable" but obviously still implying that it is unstable. hence i proposed the update from the original bullet. 

thanks!

    
    

    
  
Cool.  Victoria... could you please make the update?  we should then be good to go.   I'll keep this bug open though until the new beta logo comes in.  But, perhaps we can roll this over to webdev and update with the new logo when that arrives -- just to keep things moving along.  Will let Grace figure out the best approach there.

    
    

    
  
(In reply to comment #61)
> Cool.  Victoria... could you please make the update?  we should then be good to
> go.   I'll keep this bug open though until the new beta logo comes in.  But,
> perhaps we can roll this over to webdev and update with the new logo when that
> arrives -- just to keep things moving along.  Will let Grace figure out the
> best approach there.

thanks tara and victoria!

    
    

    
  

      
      
      
      

        Attached image
          
        Revised
        — 
      

    


  
Perfect, I'll get Tara the .psd, so dev can move on it. Thanks!

    
    

    
  
Looks like there's something a little weird happening with the second bullet under Aurora: It's not lining up with the text and the P is missing on "Provide."

Also, do we need the All link under mobile, or just under desktop beta?

    
    

    
  
Thanks Matej.  Good catch.  I think those are things we can address in development.  Shouldn't require a new design.

Grace, what's the next step here?  do you have an implementation bug ready to go within the websites component?

    
    

    
  
Sorry to jump in late here, but I still think the text for the RSS feed is a little big (per comment #44)...in terms of hierarchy on the page, these headlines aren't super important so I was thinking they'd be more like the bullets under the three logos in the top section. (although perhaps with different formatting)

Otherwise, looks great!

    
    

    
  

      
      
      
      

        Attached image
          
        Revised RSS
        — 
      

    


  
Good point, I brought down the RSS feed in size. If this is good to go, I can send a new file to Tara.

    
    

    
  
(In reply to comment #65)
> Thanks Matej.  Good catch.  I think those are things we can address in
> development.  Shouldn't require a new design.
> 
> Grace, what's the next step here?  do you have an implementation bug ready
> to go within the websites component?

hi tara. I do have a website bug open already. Bug 653288. Once we have the final design, I can post the final design in the website bug. thanks!

    
    

    
  
Hi there.  I got the PSDs from Victoria and forwarded them to Grace.  Grace, please send to the appropriate person in webdev (or post to the bug) so we can get that rolling.  I'll close this bug, but understand that we'll be getting the new Beta logo later next week.  That should be something that webdev can swap in.  If additional design work is needed, we'll just address it at that time.

Thanks Victoria !
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.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: