Closed
Bug 653291
Opened 14 years ago
Closed 14 years ago
[Rapid Release] Design Request for /Firefox/Channel Page redesign
Categories
(Marketing :: Design, task)
Marketing
Design
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: gjimenez, Assigned: victoria.pater)
References
()
Details
Attachments
(10 files)
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
Comment 1•14 years ago
|
||
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.
Reporter | ||
Comment 2•14 years ago
|
||
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
Comment 3•14 years ago
|
||
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.
Comment 4•14 years ago
|
||
Ok, Tara, let's talk design resources.
Comment 5•14 years ago
|
||
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?
Reporter | ||
Comment 6•14 years ago
|
||
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.
Comment 7•14 years ago
|
||
Victoria is on board. She'll be starting on this tonight. May 12th is no problem. Stay tuned.
Assignee: tshahian → victoria.pater
Reporter | ||
Comment 8•14 years ago
|
||
yay thanks!
Assignee | ||
Comment 9•14 years ago
|
||
This should be quick. I just need copy for the bullets under the new Beta Mobile section.
Comment 10•14 years ago
|
||
Grace, do we have existing copy for this or do we need to get Matej involved?
Comment 11•14 years ago
|
||
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.
Assignee | ||
Comment 12•14 years ago
|
||
Perfect, I'll send over what I have in place in just a few.
Reporter | ||
Comment 13•14 years ago
|
||
(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!
Comment 14•14 years ago
|
||
(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
Reporter | ||
Comment 15•14 years ago
|
||
(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!
Assignee | ||
Comment 16•14 years ago
|
||
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!
Reporter | ||
Comment 17•14 years ago
|
||
(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.
Comment 18•14 years ago
|
||
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.
Comment 19•14 years ago
|
||
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/
Comment 20•14 years ago
|
||
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.
Comment 21•14 years ago
|
||
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.
Comment 22•14 years ago
|
||
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!
Comment 23•14 years ago
|
||
Victoria, I'll be sending you the font files (in case you don't have them).
Comment 24•14 years ago
|
||
(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?
Comment 25•14 years ago
|
||
that works for me.
Reporter | ||
Comment 26•14 years ago
|
||
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!
Assignee | ||
Comment 27•14 years ago
|
||
Great, I'll swap those out for color and upload a revised version within the hour!
Reporter | ||
Comment 28•14 years ago
|
||
(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!
Assignee | ||
Comment 29•14 years ago
|
||
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.
Comment 30•14 years ago
|
||
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.
Comment 31•14 years ago
|
||
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.
Assignee | ||
Comment 32•14 years ago
|
||
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.
Assignee | ||
Comment 33•14 years ago
|
||
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 :)
Reporter | ||
Comment 34•14 years ago
|
||
(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?
Reporter | ||
Comment 35•14 years ago
|
||
Comment 36•14 years ago
|
||
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".
Comment 37•14 years ago
|
||
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.
Assignee | ||
Comment 38•14 years ago
|
||
Yes, if we drop that entire section there is no need to introduce icons within buttons. How does the attached look?
Comment 39•14 years ago
|
||
quick comment - the beta and final rlease download buttons should be our standard green. the purple button is reserved for Aurora only.
Comment 40•14 years ago
|
||
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.
Comment 41•14 years ago
|
||
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.
Comment 42•14 years ago
|
||
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).
Assignee | ||
Comment 43•14 years ago
|
||
What if we pull the RSS and just have each entry clickable, or do we need a direct blog link/button?
Comment 44•14 years ago
|
||
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?
Comment 45•14 years ago
|
||
Also, for a general link to the blog we could just link "our upcoming releases" in the subhead.
Assignee | ||
Comment 46•14 years ago
|
||
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?
Comment 47•14 years ago
|
||
I say lets bring back the originals :)
Assignee | ||
Comment 48•14 years ago
|
||
Great, how does this look?
Comment 49•14 years ago
|
||
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).
Reporter | ||
Comment 50•14 years ago
|
||
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!!
Reporter | ||
Comment 51•14 years ago
|
||
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.
Assignee | ||
Comment 52•14 years ago
|
||
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?
Reporter | ||
Comment 53•14 years ago
|
||
(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!!!
Comment 54•14 years ago
|
||
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.
Comment 55•14 years ago
|
||
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!
Comment 56•14 years ago
|
||
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?
Comment 57•14 years ago
|
||
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.
Comment 58•14 years ago
|
||
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?
Comment 59•14 years ago
|
||
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
Reporter | ||
Comment 60•14 years ago
|
||
(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!
Comment 61•14 years ago
|
||
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.
Reporter | ||
Comment 62•14 years ago
|
||
(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!
Assignee | ||
Comment 63•14 years ago
|
||
Perfect, I'll get Tara the .psd, so dev can move on it. Thanks!
Comment 64•14 years ago
|
||
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?
Comment 65•14 years ago
|
||
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?
Comment 66•14 years ago
|
||
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!
Assignee | ||
Comment 67•14 years ago
|
||
Good point, I brought down the RSS feed in size. If this is good to go, I can send a new file to Tara.
Reporter | ||
Comment 68•14 years ago
|
||
(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!
Comment 69•14 years ago
|
||
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: 14 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•