492536 - Implement template for new start page (A/B test)

Status: VERIFIED FIXED

(support.mozilla.org :: General, defect)

Description

[David Tenser [:djst]]

For the A/B test intended to reduce the bounce rate on the SUMO start page, here is the new start page design. This will have to be implemented as a new template that we'll use for the alternative start page (en-US only for the test). 

Details and timeline to follow.

Comment 1

[Paul Craciunoiu [:paulc]]

David: any ideas on how to get the list of search words suggested in the search box (coming after "Or try the following:")
Also, details about where each link points to (especially in the top right menu).

I also notice that we don't use the typical menu on this page. How will users know if they're logged in?

Comment 2

[Majken Connor [:Kensie]]

For others trying to follow along http://www.flickr.com/photos/djst/3524882061/sizes/l/

Comment 3

[David Tenser [:djst]]

(In reply to comment #2)
> For others trying to follow along
> http://www.flickr.com/photos/djst/3524882061/sizes/l/

A better place is the project page listed in the URL field of this bug: https://wiki.mozilla.org/Support/StartPageOptimization. For the image you link to, a better url is http://www.flickr.com/photos/djst/3524882061/ which also explains the changes being made.

Paul, for the sake of this test we should just hardcode the example search terms based on the most popular searches. When clicking on an example search, a search should automatically be performed with that search term. Currently, the top search terms are:

bookmarks
clear history
delete history
cookies
export bookmarks
history
home page
import bookmarks
clear cache
cache
pop up blocker
tabs
favorites
ftp
downloads

Use as many as can fit given the design of the search box. If this test turns out to be successful, we should consider a way to automatically update the search terms listed.

Comment 4

[Majken Connor [:Kensie]]

Thanks for the second flickr link. I see you also added that information to the wiki page you linked. May I suggest though, I think it'd be easier to follow split into its own page and linked like you did for the first test.

Comment 5

[Paul Craciunoiu [:paulc]]

First draft comitted in r25769-71 (on staging only)
(last commit hides the stage server notification)

I created it at https://support-stage.mozilla.org/en-US/kb/Home+page+new
Comments:
* Name: mozms2.css
* I'm missing the "More" button link
* The top search terms are hard coded
* The number of "more support articles" is hard coded
* There is no "Log out" button, where would that go?
* The sidebar is hard coded (for easy setup, for now), although I have tested by using sidebar modules and the layout looks well and we will be able to use it that way if we decide to, for flexibility.
* Set this to 1.2?

How's it look, David?

Comment 6

[David Tenser [:djst]]

(In reply to comment #4)
> Thanks for the second flickr link. I see you also added that information to the
> wiki page you linked. May I suggest though, I think it'd be easier to follow
> split into its own page and linked like you did for the first test.

Feel free to hack away if you want to improve it.

Comment 7

[David Tenser [:djst]]

Looks fantastic so far!! :) 

I'm sure you're aware of all of the observations I'm making, but just in case I'm posting them anyway:

* Did you see the buttons.html page attached to the prod file? Be sure to use that code so you get the hover effect on the "More" and "See All" buttons.

* May I suggest that we remove the "delete history" since it's so similar to "clear history". I think if people see one of them, they won't be typing the other one.

* The overall design needs to be tightened up a bit to match that of the prod file. Paddings needs to be worked on here and there.

* Paragraph "Did you know that most of the content on support.mozilla.com was written by volunteers?" looks like it doesn't have the same line-height as the other paragraphs. It's very compact.

* I'd like to see 1 or 2 pixel greater distance between paragraphs in the sidebar. E.g. between "Looking for Thunderbird support?" and "Head on over here »"

* Remove the boldness in "There are 342 more support articles for Firefox."

* The horizontal lines in the sidebar should have the "designed" look as shown in the psd

* The highlighted item in the Ways to get help should have the arrow pointing to the left

Aside from the above, may I also suggest the following:

* Can we temporarily remove the "You have arrived at a development server" on the this template so it's easier to see how the final appearance will be?

* I suggest renaming "Browse them here" to "Browse them all" (we're still going to point to the crappy long list of all articles in lack of better options)

Comment 8

[Paul Craciunoiu [:paulc]]

(In reply to comment #7)
David, for this:
* The horizontal lines in the sidebar should have the "designed" look as shown
in the psd
-- Do you mean the ones around the "New to Firefox?" block? I think there's also one in the "Ways to get help?" block between the 2nd and 3rd item. Just checking.

----
* Can we temporarily remove the "You have arrived at a development server" on
the this template so it's easier to see how the final appearance will be?
-- Definitely, this is actually not supposed to show up but Minify hasn't updated the CSS. I'll try to see if I can clear the cache for it.

* I suggest renaming "Browse them here" to "Browse them all" (we're still going
to point to the crappy long list of all articles in lack of better options)
-- We should file a bug to get this crappy list paginated, at least.

I should have all the differences fixed today.

Comment 9

[David Tenser [:djst]]

(In reply to comment #8)
> (In reply to comment #7)
> David, for this:
> * The horizontal lines in the sidebar should have the "designed" look as shown
> in the psd
> -- Do you mean the ones around the "New to Firefox?" block? I think there's
> also one in the "Ways to get help?" block between the 2nd and 3rd item. Just
> checking.

I mean the lines above and below the "New to Firefox?" box. They look very dark and solid in your live copy, and more subtle and actually an image (not just CSS) in the psd file.

Comment 10

[Paul Craciunoiu [:paulc]]

r25860

Fixed a bunch of things.
Same url as before:
https://support-stage.mozilla.org/en-US/kb/Home+page+new
The theme needs to be assigned to it though, so we have to wait for stage to be in sync again.

Potential things left:
* I've still got the "designed lines" to fix, need to get them out of the psd and put them in properly.
* Some padding might still need improvement, could use a better eye to comment (like David's ;) )

Comment 11

[Paul Craciunoiu [:paulc]]

r25870

Should all look fine now. David, please take a look when stage is up to date.

Comment 12

[Stephen Donner [:stephend] Not actively reading bugmail]

The "More" button doesn't do anything.

Comment 13

[Paul Craciunoiu [:paulc]]

(In reply to comment #12)
> The "More" button doesn't do anything.
True. I had no idea where that should go.

Comment 14

[David Tenser [:djst]]

For the sake of the a/b test where we're focusing on what people click on (and most important that they click rather than leaving the page), we can just point to http://support.mozilla.com/tiki-browse_freetags.php. 

That said, it might not be ideal long term, since search terms != tags and the UX on that page sucks. Long term, we might want to consider creating a concise page explaining how to search, or to fix tiki-browse_freetags.php to be more intuitive (i.e. clicking on a tag listing the articles with that tag).

Comment 15

[Paul Craciunoiu [:paulc]]

r25935

This should do it, David. Check it out! Let me know if I missed anything.

Comment 16

[David Tenser [:djst]]

* The "New to Firefox?" and "1) 2) 3)" boxes are not properly aligned with the rest of the sidebar content. They should be moved slightly to the left. Compare with http://www.flickr.com/photos/djst/3524882061/sizes/o/ and the difference should be noticeable.

* The hover effect for the other "2) 3)" items should be underline, not changing color to white. See how it looks on http://www.mozilla.com/en-US/products/

* The "1) Search Firefox Help" should ideally not be a link at all. We don't want people to click on it, as it's just meant to show where in the "Ways to get help" you are right now. Suggest removing the <a> tag altogether.

* Please make the search keywords and the search box search both answered forum threads and KB articles. Not sure if the keyword searches are just hardcoded? This might depend on bug 436878 -- if it does, then nevermind this for the A/B test (but we definitely want to change the behavior once bug 436878 is fixed).

* The "Thunderbird" and "Want to get involved?" boxes have their text too far to the left. Needs more padding-left to look more like the prod file. Compare the two to see what I mean.

* The link should still be "Find out how to contribute" if you're logged in. So, if logged out: "Find out how to contribute, or log in." If logged in: "Go to the contributor home page, or log out."

* When logged in, I think it would be better to keep "Go to the" outside of the link, so "Go to the <a href="">contributor home page</a>, or <a>log out</a>.

Comment 17

[Patrick Finch]

* The topic tags in some cases fold, so "Export Bookmarks" appears as "Export" and "Bookmarks", making "Bookmarks" appear to be a duplicate.  Not that severe.

Comment 18

[Paul Craciunoiu [:paulc]]

Done.

(In reply to comment #16)
> Not sure if the keyword searches are just hardcoded?
They are, but flexibly built in. If I can obtain the top search phrases from somewhere, they won't be, I just need to know from where.

Hopefully I fixed all those, david.

(In reply to comment #17)
> * The topic tags in some cases fold, so "Export Bookmarks" appears as "Export"
> and "Bookmarks", making "Bookmarks" appear to be a duplicate.  Not that severe.
If this is an issue I could change the order (swap "Export Bookmarks" with the next one), but once we generate this automatically, situations like this are free to happen.

Comment 19

[David Tenser [:djst]]

Attachment: How it looks like in Ubuntu (default/fresh install)

The new page is a little "tight" in some places, making it not look very good in Linux which has different fonts. Not sure exactly which font is being used on Linux -- are there better fonts that more closely resemble Georgia?

Comment 20

[David Tenser [:djst]]

Looks like the font being used is "Serif", as the font-face line is "georgia,serif". There is a free font called FreeSerif that is smaller/more compact that might be a better substitute.

I also noticed that the organge "More" and "See All" buttons only use Verdana, which doesn't exist on Linux. This makes it fall back to serif. 

To summarize:

For serif fonts, consider:
    font-family: georgia, freeserif, serif;

For the sans-serif buttons, change to:
    font-family: verdana, sans-serif;

Comment 21

[David Tenser [:djst]]

Finally, the right margin inside the "Want to get involved?" box needs to be increased so the text doesn't span across the logo. Sorry about the bugspam.

Comment 22

[Paul Craciunoiu [:paulc]]

Should we add the font to freeserif for the entire site (after georgia)? Or just this home page?

Comment 23

[Paul Craciunoiu [:paulc]]

Attachment: demo screenshot, freeserif

This is how it would look like with freeserif on ubuntu.

Comment 24

[Paul Craciunoiu [:paulc]]

Attachment: demo screenshot, georgia

And here's georgia. With the "ways go get involved" fix.
If you notice in both screenshots, I changed support.mozilla.com to Mozilla Support - the text otherwise looks awkward, as the second row of the block contains only "the content on". I'll attach a screenshot.

Comment 25

[Paul Craciunoiu [:paulc]]

Attachment: screenshot of awkward "ways to get involved" block

Here's the "ways to get involved" block with "support.mozilla.com"

Comment 26

[David Tenser [:djst]]

FreeSerif seems to more closely follow the "size" of Georgia, making it a more suitable fit to me. John, what is your opinion about comment 22 (using FreeSerif as the primary fallback from Georgia for OSes like Ubuntu, instead of Serif)? See also commen 19.

Paul, attachment 378955 [details] doesn't look like it looks on my Ubuntu. Here, (as shown in attachment 378937 [details]) the font is simply too wide to fit all text inside the boxes.

I think not calling it "support.mozilla.com" is a good idea, but please call the site "Firefox Support", not "Mozilla Support". Thanks!

Comment 27

[David Tenser [:djst]]

FreeSerif seems to more closely follow the "size" of Georgia, making it a more suitable fit to me. John, what is your opinion about comment 22 (using FreeSerif as the primary fallback from Georgia for OSes like Ubuntu, instead of Serif)? See also commen 19.

Paul, attachment 378955 [details] doesn't look like it looks on my Ubuntu. Here, (as shown in attachment 378937 [details]) the font is simply too wide to fit all text inside the boxes.

I think not calling it "support.mozilla.com" is a good idea, but please call the site "Firefox Support", not "Mozilla Support". Thanks!

Comment 28

[Paul Craciunoiu [:paulc]]

Waiting for a quick John opinion before I commit :)

Comment 29

[John Slater]

Good solution, thanks guys. Let's do it!

Comment 30

[Paul Craciunoiu [:paulc]]

r26280
Almost done!

Comment 31

[Paul Craciunoiu [:paulc]]

(In reply to comment #14)
> For the sake of the a/b test where we're focusing on what people click on (and
> most important that they click rather than leaving the page), we can just point
> to http://support.mozilla.com/tiki-browse_freetags.php. 
> 
> That said, it might not be ideal long term, since search terms != tags and the
> UX on that page sucks. Long term, we might want to consider creating a concise
> page explaining how to search, or to fix tiki-browse_freetags.php to be more
> intuitive (i.e. clicking on a tag listing the articles with that tag).

Sorry for forgetting this. Added in r26302.

Comment 32

[David Tenser [:djst]]

Sorry, one more thing: the Thunderbird link should point to http://www.mozillamessaging.com/support/ (like it does on the normal start page)

Comment 33

[Paul Craciunoiu [:paulc]]

Okay, done again. Sorry for all the commits, but at least they're only on staging :)

Comment 34

[David Tenser [:djst]]

Paul, can you please remove (or just comment out) the Thunderbird box, if it's not possible to disable it in some other way? 

We will be conducting the test on the in-product start page, meaning it will be pointless to include a box about Thunderbird since the user clearly accessed help from Firefox itself.

To clarify, this A/B test will test this new template against the original inproduct start page: http://support.mozilla.com/en-US/kb/Firefox+Help?style_mode=inproduct

Let me know when you're done and we can figure out a plan for getting this up on prod so we can actually start the test (bug 495917). Thanks!

Comment 35

[Paul Craciunoiu [:paulc]]

(In reply to comment #34)
For now, the sidebar blocks are hardcoded. But of course, the code replicates the actual sidebar in a very similar way, such that when we want to move to having real modules there, it will be an easy transition.

It sounds to me like, for the purpose of this test, it will be enough to leave everything as is for now, and just remove the Thunderbird box.

I will do that today after the meeting.

Comment 36

[Paul Craciunoiu [:paulc]]

(In reply to comment #35)
> (In reply to comment #34)
Removed the Thunderbird box - r
Check it out. I've also got the full patch ready to commit on production. Let me know when to land it!

Comment 37

[Paul Craciunoiu [:paulc]]

Oops. Of course, i mean r26907

Comment 38

[David Tenser [:djst]]

Paul, can you submit a patch for review by Laura?

I've tested this on Windows, Mac, and Linux and it looks good on all three. Thanks!

Comment 39

[Paul Craciunoiu [:paulc]]

Attachment: prod-read patch

Here's the production patch. I tested applying it, the soft links seem to be a bit off, but those don't affect the rest of the content. I'll attach the CSS images in a separate zip.

Comment 40

[Paul Craciunoiu [:paulc]]

Attachment: images go in /webroot/styles

Comment 41

[Paul Craciunoiu [:paulc]]

Oh, and to test this you also need to:
* create a page and paste the content from
https://support-stage.mozilla.org/en-US/kb/Home+page+new
* assign the theme mozms2.css to it in tiki-theme_control_objects.php

Comment 42

[Paul Craciunoiu [:paulc]]

Committed to prod, r27397

Comment 43

[Paul Craciunoiu [:paulc]]

This could stay open until we push. We will then need to assign the theme mozms2.css to the page (after we create the page). See comment 41.

Comment 44

[Laura Thomson :laura]

So...the prod patch does not contain all the pieces from the staging patch, including, but not limited to mozms2.css.  This is why revision control hygiene is so important.

I committed mozms2 to branch (r27638) and tag (r27637).  Now going in search of whatever else is broken.

Comment 45

[Paul Craciunoiu [:paulc]]

Attachment: minify typo

Thank you Laura for being quick on this. Sorry everyone for messing up.

Comment 46

[Laura Thomson :laura]

Comment on attachment 382972 [details] [diff] [review]
minify typo

This is certainly a problem, but it's not the whole story.  Still not working.

Comment 47

[Paul Craciunoiu [:paulc]]

Clear minify cache and try it on https (logged in)?

Comment 48

[Laura Thomson :laura]

I did that.

Try this:
svn diff https://svn.mozilla.org/projects/sumo/trunk/webroot/templates/styles/mozms2 https://svn.mozilla.org/projects/sumo/branches/production/webroot/templates/styles/mozms2

As you can see, the templates are completely different in trunk and branch.  Want to try another patch?

Comment 49

[Paul Craciunoiu [:paulc]]

I'm on my phone and won't be able to land a patch for a few hours.

Comment 50

[Laura Thomson :laura]

I believe this problem is due to svn cp or patching symlinks from trunk to branch - doesn't work.  I'm working on a fix.

Comment 51

[Laura Thomson :laura]

Attachment: Fix two problems - typo in minify and missing symlink.

There is still an outstanding issue in that we still see the thunderbird box on the right.  You can see what this version looks like at 
http://laura.dm-sumotools01.mozilla.org/en-US/kb/Home+Page+Test

That is running prod branch + the above patch.

Comment 52

[Paul Craciunoiu [:paulc]]

Comment on attachment 383036 [details] [diff] [review]
Fix two problems - typo in minify and missing symlink.

Checked out a new prod branch and all worked well :)

Comment 53

[Paul Craciunoiu [:paulc]]

Attachment: Fix three issues: minify typo, missing symlink, and removed thunderbird module

This patch puts together Laura's patch and adds the part that removes the thunderbird module from the sidebar.

I must've been really out of it when I put this patch together and committed. I apologize, team.

Comment 54

[Laura Thomson :laura]

in r27731.  Going to retag, I may have to do some more wrangling depending on how the symlink comes out.

Comment 55

[Laura Thomson :laura]

Tag worked, in https://svn.mozilla.org/projects/sumo/tags/1.1/1.1.0.1_20090613_r27731/.  Going to file a new push bug.

Comment 56

[Paul Craciunoiu [:paulc]]

Yay, fixed! Check out https://support.mozilla.com/en-US/kb/Firefox+Help+4

Comment 57

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED.