725808 - [/channels landing page] post-launch feedback

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[mcbmoz]

Laura, filing for you and Steven to review:

Before jumping into stuff, I love where this page is heading! I think that it's live state revealed challenges that weren't easily noticeable as a PSD.

Notably though, it looks like this page might have an overnight negative effect on downloads.

1.) User interaction is confusing
-most screens will only show http://www.diigo.com/item/image/1981d/jnbp

-the arrows move the logos, but it's not easy to see that there's more interaction taking place lower on the page

-are the arrows necessary? without them would users be more likely to scroll downward and see the content then click on the logos to swap content?

----

2.) Deaktop/Mobile Toggle

-Currently, the content doesn't change, so it seems like it's not needed and complicates the experience

----

3.) Headlines

-The big huge headline "Choose Your Firefox" is super large, and because it doesn't change, the clearer and more targeted subheads "Tried, tested and used by millions around the world" might be the more valuable ones

-shrink the Choose your Firefox or move it below the logos

---

4.) Call to Action - Where's my download?

-a % of users come to this page because they hover over "Channels" from the main nav and select download - we no longer give them a download

-The CTA seems to be "Choose your firefox --> then Choose to learn more --> then download) and that's a lot.

-Can there be a download button for each build on this page?

-The initial ux approach included the download buttons with a learn more option to sending users to the sub-pages /aurora and /beta

Comment 1

[Steven Garrity [:sgarrity]]

Yes. On all points, yes!

During the implementation process, each of these issues started to become apparent, but time constraints kept us working through implementation. I had intended to raise these points post-launch, but Chrissie has done a better job of it, and before I had a chance.

First, a few *good* things about the page. Visually, it is attractive. It shows off some nice CSS3 transition animation technology, and things zoom around.

Ty also pinged me early on with a rough draft asking about the feasibility of the transition from light-to-dark for the Aurora portions of the page. Having this direct connection between design and implementation early like this works well and saves everyone time and trouble.

As for the problems with the page, I agree with just about everything Chrissie brought up. The two levels of navigation (first the super-awesome-spinning-logos, then the DESKTOP|MOBILE tabs) seem like a lot just to get to a tiny bit of text and a single link for each subsection.

While much less technically and visually interesting, I wonder if a simple grid of channel X platform would make more sense. Or, even simpler, a simple choice of channel, relegating the mobile/desktop choice to the next page.

For example, here are two stupidly simple wireframes:

First, Firefox Channels Page A., shows three columns, one for each channel, with two rows of buttons (Desktop & Mobile):
https://docs.google.com/drawings/d/1X3tm7cEIA_OPMj6p9Pcp1u6Bdfgn1pRUsF1PAG5NO3c/edit

Second, Firefox Channels Page B., is even simpler - just three columns, clicking anywhere on any of the columns would take you to that channel page, where you can then choose between desktop and mobile:
https://docs.google.com/drawings/d/1Li0XRONiS5T8o1ph75QY0qhU2HTiH7dn0xVyOHaZlGY/edit

Comment 2

[mcbmoz]

Attachment: Original Wireframe

Initial wireframe created for this page from bug 684078

Comment 3

[mcbmoz]

Steven +1 to both of your wireframes, they're really similar to the original wireframe for this project, which I've also included in comment 2 .

I used to work a lot on pricing landing pages, so the recommended approach I chose for this actually came from a page I designed @ http://www.zendesk.com/product/pricing (they've recently added an extra column to the left, which I'm not a fan of)

Would you feel like taking another pass at this that's closer to both our wireframes? Or, do you think we should go back to Ty to start over with the design?

(I <3 the CSS transitions)

Comment 4

[Laura Forrest]

Now that this channel page has landed I think it looks great, but totally agree there's room for optimization in the UI realm. 

My main gripe is the toggles (Bug 725192) and how the CTA is below the fold.  

Steven - I second the question above - are there any tweaks you can make based on your and Chrissie's mockup?

Comment 5

[mcbmoz]

Laura/Grace,

My main concern is that the ability to download from this page has been eliminated, and that could immediately have a negative impact on Q1 numbers.

We also are creating a bad experience, because the CTA from the main navigation is "Download" . . .

Based on the numbers (when they're ready) I think we should be prepared revert to the old page, and start back over on designing this landing page.

Comment 6

[John Slater]

Laura, you're running user testing on this page, right? Would be great to have that data in hand before we make any further changes.

Comment 7

[Laura Forrest]

(In reply to John Slater from comment #6)
> Laura, you're running user testing on this page, right? Would be great to
> have that data in hand before we make any further changes.

Yes - I'll have that ready, along with a Analysis from brad at Webtrends, ready early this week. Note: we also have engaged with the Metrics team to help us verify if these download numbers are decreasing - if that's the case, then I'd recommend reverting immediately.

Comment 8

[Steven Garrity [:sgarrity]]

A few changes that are quick/easy:

1. reduce font size and padding around main page headline
2. reduce padding above/below the large icon feature
3. remove DESKTOP/MOBILE toggle and replace "Learn More" button with a Desktop and a Mobile button

For #3, I'd need suggestions for what the buttons should actually say - they'd still just be links, not download buttons, maybe "[Channel-Title] for [Platform]" (ex: "Firefox Beta for Desktop"). Might look a bit like download buttons that don't download...

A slightly less quick/easy change would be to add real download buttons (and a 'Learn More' link). For this, we'd need to figure out how to arrange them, style them, wording, etc.

Comment 9

[mcbmoz]

Laura, ping on this, because it's a pretty big user experience problem (also an interesting one!). 

Watching the videos of users, some consistent items came up that boost the reason to remove this page from the flow and take time to reset back to the wireframes.

1.) Users cannot tell that content is changing, desktop/mobile content are the same
2.) Users cannot download the build they are looking for from this page
3.) Users have to click deeper into the experience for the same content and the download button

The original purpose of the page, was to present all 3 flavors side-by-side in a comparison, so a user could scan and select download.

While there are some small patches like bug 727517 that could improve the experience by a little bit, I'm not sure any are compelling enough to keep this page in the flow at this time. Users are looking for downloads and we should create as close to frictionless experience for them as possible.

Recommend, removing this page from the flow and:

1.) Reverting to the previous design
2.) Not reverting to the previous design, and instead removing from the flow and letting users discover from the main nav (remove "overview" and do not make "releases" clickable

Though making the icons clickable might reduce confusion, it doesn't make a better, clearer, or more compelling experience. The worst problem "lack of download" will continue to persist for our users, eliminating entirely will solve that.

Comment 10

[mcbmoz]

I've waited forever to use this . . .

Le mieux est l'ennemi du bien (The best is the enemy of the good) works well here :-)

Often times we try to make things the best and lose sight of what is good (the old experience wasn't very pretty, but it was functional). 

Making it better for our users right now, and not letting "the perfect" become the enemy of the good, seems like a good approach. We could tweak it to death with small patches and duct tape, or we could take it away entirely.

This page and those darn buttons are teaching the team a lot about interaction design, which we can't do in paper prototypes or PSDs, and that is definitely a good thing.

Comment 11

[Kohei Yoshino]

Attachment: channel matrix

I'd like to see a simple matrix like this

Comment 12

[mcbmoz]

(In reply to Kohei Yoshino from comment #11)
> Created attachment 599049 [details]
> channel matrix
> 
> I'd like to see a simple matrix like this

The original design proposed a matrix (comment 1) and the matrix was re-proposed in comment 2.

Right now, I think comment 9 and comment 10 are in Laura's court for a decision.

Comment 13

[mcbmoz]

Laura convinced me that keep the page live v. reverting is the best approach.

The page is increasing brand awareness, so we'll continue to iterate to a point where the page does also serve the need for downloads.

Comment 14

[Laura Forrest]

(In reply to mcbmoz from comment #13)
> Laura convinced me that keep the page live v. reverting is the best approach.
> 
> The page is increasing brand awareness, so we'll continue to iterate to a
> point where the page does also serve the need for downloads.

Thanks Chrissie - I do agree this page needs a lot of help. Let's make the various improvement tweaks asap, while we queue up a redesign in a different bug (Bug 729755).

Comment 16

[Laura Forrest]

John - Throwing this over to you to take into consideration as Bug 729755 goes through design.

Comment 17

[Kohei Yoshino]

All dependency bugs have been resolved.