Closed Bug 729755 Opened 13 years ago Closed 13 years ago

Redesign /Channel landing page to include downloads and clearer UX

Categories

(Marketing :: Design, task)

x86
macOS
task
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: lforrest, Assigned: tyronflanagan)

References

Details

Attachments

(7 files)

Let's start off using the wireframes from bug 725808 + most of the current design/branding elements from the current /channel landing page. Timeframe: design done within the next 3 weeks by 3/14.
Hi Tara, Did you get a chance to review this yet? I'm also copying Ty in the bug as he designed the last channel page. Thanks!
Yes, Ty is on this. He'll weigh in soon with further thoughts and details.
Assignee: tshahian → tyronflanagan
LoFo, can you RASCI this up for us.
Thanks for the update.
Ty is on it - in terms of RASCI, Ty owns the visual component of this redesign while the rest of us will help consult during the creative reviews to the following extent: John (brand ID), Chrissie (UX), Grace (provide answers to product questions that may come up), Laura (conversion optimization/user research/analytics). The first rounds of creative are coming at earliest, next Friday 3/9.
Blocks: 731678
Blocks: 731679
Ill start on the design changes on March 6th as I'll be OOO on the 2nd & 5th. I'm going to try to have artwork ready for the 9th, with the latest being Monday the 12th.
Status: NEW → ASSIGNED
Blocks: 725808
- Mouseover changes content colors & backgrounds within respective containers.
Hi Ty, Are the rectangular boxes animated as well? just like the current channel page? I thought we were keeping the same design and look and feel of the current channel page but just adding the download buttons? I really like the current design we have. It's a lot more simple. I feel the new proposed design are a bit busier. I also dont think that Learn More has to be a button. I think it's okay that it's a text link. But I will also let john (brand), chrissie (ux) and laura forrest weight in. Thanks!
Hi Grace, The boxes do not have the same animated transition to them that we have implemented in the current release channel page design. Instead, we will have a hover state which will change the coloring of each content container upon mouseover - see Comment 8 (before) & Comment 9 (after). The page actually has less content than the current site in order to keep majority of content above the fold. Also, this design matches the initial wireframe for this page.
(In reply to Grace Jimenez :grace from comment #10) > Hi Ty, > > Are the rectangular boxes animated as well? just like the current channel > page? > I thought we were keeping the same design and look and feel of the current > channel page but just adding the download buttons? > > I really like the current design we have. It's a lot more simple. I feel the > new proposed design are a bit busier. Hey Grace - see the concerns in Bug 725808 for a history on why we're making these improvements. > I also dont think that Learn More has to be a button. I think it's okay that > it's a text link. > > But I will also let john (brand), chrissie (ux) and laura forrest weight in. > > Thanks!
Initial feedback (I still need to look at these longer): a headline that gives overall context to this page would be good. Something like "Find the build that’s right for you..." not too big at top of page, as to not push CTAs any lower.
I like layout 1, but the colors from the the hover states in layout 2 are very nice. Also, I definitely agree with Laura that we need a headline to add context. I'd also advise against having basically the same button size & style for desktop and mobile...having that many identical buttons makes it hard to know what to click. Can't we sniff what platform people are using and serve the appropriate content from there? For example, if you visit on an Android device you'd be prompted to download that version, with a smaller link to the desktop version just in case (and vice versa). Maybe even have the only green button be the one in the active hover state with the others greyed out or something until you roll over them. Oh, one last thing - if we go with option 1, which version will be in the featured state as a default? Whichever one starts out in the middle will seem like the primary option, so we should consider that.
Updated the design to match the new site style. We should consider whether we want the content to change when the layout reformats to being mobile friendly.
Thanks Ty. Any thoughts as to how we might address these comments? (In reply to John Slater from comment #14)> > I'd also advise against having basically the same button size & style for > desktop and mobile...having that many identical buttons makes it hard to > know what to click. Can't we sniff what platform people are using and serve > the appropriate content from there? For example, if you visit on an Android > device you'd be prompted to download that version, with a smaller link to > the desktop version just in case (and vice versa). Maybe even have the only > green button be the one in the active hover state with the others greyed out > or something until you roll over them. > > Oh, one last thing - if we go with option 1, which version will be in the > featured state as a default? Whichever one starts out in the middle will > seem like the primary option, so we should consider that.
(In reply to John Slater from comment #17) > Thanks Ty. Any thoughts as to how we might address these comments? > > (In reply to John Slater from comment #14)> > > I'd also advise against having basically the same button size & style for > > desktop and mobile...having that many identical buttons makes it hard to > > know what to click. Since we use the Android graphic within the buttons, they look different enough to me. Can't we sniff what platform people are using and serve > > the appropriate content from there? For example, if you visit on an Android > > device you'd be prompted to download that version, with a smaller link to > > the desktop version just in case (and vice versa). Maybe even have the only > > green button be the one in the active hover state with the others greyed out > > or something until you roll over them. We've gone back and forth on this and imho I'd like to keep this page simple, and include all of them for every device, but have this page be responsive design (as all our relevant pages should). But I'd be interested to hear what Chrissie has to say here. > > Oh, one last thing - if we go with option 1, which version will be in the > > featured state as a default? Whichever one starts out in the middle will > > seem like the primary option, so we should consider that. We'd like to promote the Beta right now, so that's why it's in the middle. That may change in the future, and that's fine.
Ok, fair enough. I still don't think the buttons are differentiated enough, but we don't need to block on it...can always continue iterating later.
RE: Overall -LOVE, Ty, this is a really useful layout and so clear! Hooray! RE: Device Detection -If we can adapt this page to be responsive, we can set the requirement for device detection -Otherwise, this page will not be shown to users on smartphones who will see http://www.mozilla.org/en-US/m/firefox/channel/ instead RE: Responsive layout -This page could be adapted to work like the slideshow the new mozilla.org home page will use for the promo area, so that the user swipes left and right to see the builds, but as-is, I don't think we can stack them vertically in a user-friendly way
Great - I suggest proceeding with implementing this redesign (which will most likely alleviate the usability issues that are live right now) and then work on making this page responsive in Q2. Ty - Can you post the final PSDs here?
@laura we have time to make this responsive, because it can't go live until March 29. It's worth it to do it once and well here, since we're on code freeze. A little extra time to make it responsive and we'll make sure to get this into the March 29 release.
Ty, did you make the changes needed for responsive layout? (comment 22)
(In reply to mcbmoz from comment #22) > @laura we have time to make this responsive, because it can't go live until > March 29. It's worth it to do it once and well here, since we're on code > freeze. > > A little extra time to make it responsive and we'll make sure to get this > into the March 29 release. That's fine - Ty, have at it!
Ty - To follow up here, can you give us a sense of how much more time it would take to make modify your designs in Comment 23 to be responsive?
I have started the updates to the design and should have it readied tomorrow which will be responsive-friendly. I do think that the content should be changed slightly to be more mobile-centric when viewed on a mobile device, otherwise it will become a very long-scrolling page.
PSD: http://mozilla.tyflanagan.com/artwork/ReleaseChannels/FFx_Releases_LandingPage_Responsive.psd.zip Can we talk to someone in UX to think of what elements should be shown for mobile layouts?
I reviewed this with Grace today and we both agreed that, although the overall design is really nice, the fact that the page has 6 buttons on it doesn't really solve the original need of trying to move away from the previous channel page design (which also had multiple buttons). As a recap, we're trying to improve the current /channel design page as follows: 1. adding a CTA (download button) and 2. taking out the toggle button (which is confusing to users). Ty, when you're back let's have a quick discussion about how we can make the CTAs here a little more clear. In particular, I'd like to find a way to reduce the # of buttons and make it really clear what users should click on (one suggestion: the page could sniff whether people are on a desktop or mobile device, and only serve up the appropriate download buttons...the other download button could just be a link.) Thanks-
Hey all, Im slightly confused about whats actually happening with this page. We went forward with a redesign due to the current page being problematic with capturing downloads. It has become useful for building awareness amongst our users though, but apparently nothing more than that. So now we have 2 designs for this page – one that is in use right now, and the other (based on a previously provided wireframe) pending implementation. If we are going to replace it, why are we still focusing on the current channels design? Nevertheless, if the plan is to keep the current page live for a longer period of time, then lets consider getting rid of the toggle buttons, move the product wordmarks above the logos, and provide both desktop and mobile download buttons below a single line of copy which should keep everything above the fold. By doing so only two buttons will be present on screen at all times, minimal copy will be shown and should also minimize the time it will take to implement changes. On to the newer design – With our "One Mozilla" not being fully responsive though, we should consider a two phase approach to this page: 1st (much like John's suggestion above: Have the page detect whether the user is on a desktop or mobile device and provide only a desktop/mobile button with a smaller "Looking for mobile?/desktop?"text link below. 2nd (After the site is properly responsive): Provide designs which will better serve desktop, tablet and mobile. Each with platform or device specific copy and download links. For example, the mobile layout should be responsive, cater better to touch-screen gestures and focus less on scrolling. Tablet layout can then mimic desktop with the inclusion of touch-screen gestures. (Touch gestures could also alter the way content is addressed on this page too) I still think its worthwhile to bring someone in from UX to discuss these next steps too.
Hey Ty. Thanks for the update. I chatted with Grace and we'd like to go forward with just updating the current page for now in the manner you suggested, including: - move wordmarks above logos - add download buttons - fix the mobile/desktop toggle confusion while we're at it We'll address any longer term changes to this page in the next revision (TBD for now). With that in mind, when do you think you can hand over a PSD?
Im going to work towards having the updated file readied for Thursday.
I have uploaded the new assets to Bug 731678
Can we close this bug?
thanks!
Status: ASSIGNED → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
No longer blocks: 731679
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: