Closed Bug 624581 Opened 14 years ago Closed 13 years ago

Design new AMO homepage

Categories

(addons.mozilla.org Graveyard :: Public Pages, defect, P1)

Product:
addons.mozilla.org Graveyard
Component:
Public Pages
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED FIXED
Milestone:
Q1 2011

People

(Reporter: fligtar, Assigned: chowse)

References

Details

Please design an awesome homepage that is pleasing to everyone.

I would elaborate but chowse and I have been talking about ideas for months and he knows what's up.
Here's the first draft:

http://people.mozilla.com/~chowse/drop/amo/refresh/v2/01_front_page.png

Individual add-ons will have added detail that appears on hover, whose content and behavior I'm currently working on. The Promo Box is in progress as well, though its content will probably remain a bit more fluid.
Two more wires:

Add-on pop-ups for different kinds of add-ons (themes, Personas, etc.):
http://people.mozilla.com/~chowse/drop/amo/refresh/v2/01.3_addon_variations.png

Search auto-complete:
http://people.mozilla.com/~chowse/drop/amo/refresh/v2/01.4_search.png
I like the homepage mock. We've already discussed it quite a bit, so I don't really have much to add there.

On the hovers, I still strongly prefer the left design. And I still think we should try to include the author somewhere. I'm apprehensive about having a hover and then delayed-hover effect. I don't think popping the install buttons immediately is helpful, as anyone that tries to click on one would have paused long enough to see the delayed hover come up as well. 

For search results, I'm not a fan of segmenting by type because when looking at suggestions, you look at the first result to see if that's close to what you want. If you have to scan the top of 4 different sections farther and farther from the searchbox, it loses its advantage and it'd be quicker to just hit enter.

Clearleft designed some search suggestions that were later implemented by Craig Cook but never integrated into the site (bug 546826) http://mozilla.focalcurve.com/zamboni/searchresults.php While I'm not a fan of the visuals, I like that the type is still stated but the top result is at the top, regardless of its type.
Homepage:
* You're getting rid of install buttons on the homepage; do you think that will affect downloads?
* Featured and Top Add-ons will probably have a lot of dupes
* There are four kinds of things on this page (add-ons, themes, personas, collections); is that too much?

* I like the panhandle
* I like the type segmentation but would put Extensions (Add-ons on the homepage?) first. Note there will be lag pulling icons as those are each a separate request.
Target Milestone: 5.12.7 → 5.12.8
Blocks: 555838
Assignee: chowse → ltom
Hi all,
Here's a first pass at the re-skinning of the AMO Homepage. Please have a look. Hope you like it so far:

http://intothefuzz.com/leetom/Addons/JPG/AMO_homepage_01.jpg
Thanks Lee...good to see this taking shape. Overall, there are a lot of things I like about this. Will post a few quick thoughts, and will try to share more later once I've had a chance to let it sink in more.

- this definitely feels like the next level of consistency with mozilla.com, which I really like. In particular, I think the use of Georgia and a lot of the subtle elements help emphasize that.

- on the flip side of that, this doesn't really feel like a homepage of a standalone site. On one level, that's not necessarily bad b/c I definitely get an app store vibe and a sense of this as more of a product page, but I do think it needs a bit more presence, especially at the top. Would recommend putting a Firefox logo in the upper left for starters.

- "explore add-ons" feels a bit underemphasized, especially compared to the links coming off the main promo area on the right. I'm not planning the content strategy here, but it seems like "explore add-ons" is pretty important.

- this is more content feedback than about the design, but it feels like there are an awful lot of links. Kind of overwhelming. In particular, the links coming off the promo area on the right are very prominent and not super clear what they're for.

- the bottom part of the page, with the themes & personas is really nice. I realize that strategically we don't need those any higher but having some images breaks up all the text I was mentioning earlier.

- like I said at the beginning, I think this is a really nice step forward. Kudos to you & Chowse for getting us this far...looking forward to seeing how it evolves from here.
- I agree the links in the top left are overwhelming and not clear as to what they are for

- What does the carousel look like when I click "Travel"?

- No one knows what "Add-ons By Type" is.  An Extension?  A plugin?  A search tool?  I thought they were all the same thing.

- we turned the enormous footer into a merely gigantic one last time.  Let's do it again.
Initial thoughts:

- Columns feel too narrow and constrained.

- Meta Black looks awful at a font-size that small.

- Links in italics look like they're heavily de-emphasized.

- "Go" arrow on the search box looks a bit odd. Can't tell if it's the border style, etc.

- This isn't a critique of the visual design, but, the "Explore Add-ons" section is a mess. It's a catch-all of links, it's a visual misfit, and I feel like having a blind spot above the fold is not the best use of our page real-estate. A discussion about how best to display those links would be nice.

- I think the Mozilla tab is a bit too heavy right now- I'd like to bring back the app icon, and possibly reduce the tab size slightly (which is something to discuss with Sean)

- Is the footer a placeholder for our current one? It looks like a copy of the original moz.com footer.
Just to weigh in on a few of the comments:

- The Meta Black will be replaced with our new font once we nail that down.

- the Mozilla tab has been toned down a bit to have a lighter grey so it isn't as dominant (mockups to be updated in header refresh bug today)

- some of the elements (left blue menu) I have been updating on the main site and they could be reflected here as well (header bug mockups again, later today)

- search box + go arrow are now different from mozilla.com.  I believe we had made the two look similar for consistency.  was there feedback to change it from it's current style?

- also: a great start! Very clean.
To throw a few more thoughts on the pile:

* I'm a little concerned about readability: the small, grey serif type on
  add-ons is hard to scan; the blue italicized links on the sidebar are hard
  to see. This might just be personal preference, but there is enough research
  that supports that serif text is difficult to scan at small sizes
  (http://bit.ly/fsW9yp). Or perhaps this is just a byproduct of Photoshop's
  text rendering. Do we have any precedent for using darker, bolder, or
  sans-serif type for these cases?

* The nav sidebar needs more contrast. Blue text on a blue background makes
  that block (which is one of the primary means of browsing AMO) too 
  diminished.

* The dark MetaBlack headings seem to contrast too strongly w/ the light
  content headers they appear in. These work at larger sizes and w/ ample
  whitespace, but they feel a bit heavy inside each block.

* The search bar feels too small, and the emphasis seems too strong on the
  'Go' button. Larger type and/or more padding would go a long way. I
  personally find the current search treatment (thick blue border, large
  green button) too strong, but maybe there's a happy medium.
Thanks for working on this, Lee! chowse and I talked over the mock for a while so my feedback is pretty similar to his. My notes:

* The header feels too black and dull to me. Hopefully bringing back the Firefox logo will add enough color.

* I really don't like the sidebar background color or the italicized links.

* The fading out of the box headings is distracting to me, especially how different parts fade out in different directions

* chowse says this is his fault, but we have a different style for add-on snippets that show the category instead of summary and have a hover mode. He can show you where that is in a wireframe since I don't see it immediately.

* I'd prefer a larger click target to be able to rotate between the panes in a module than the tiny arrows. (see the Add-ons Manager in Firefox 4 for an example of the arrows we are using elsewhere, though they don't need to be that big)

* AMO uses a smaller version of the footer with AMO-specific links

Thanks!
re: my comment earlier, new header mockups can be viewed here (link in comment #9):

https://bugzilla.mozilla.org/show_bug.cgi?id=619986
I weighed in on the new header in bug 619986, but wanted to go on record here as well that I definitely like this solution and think we should make sure it's part of this redesign (which Lee has already started to do, of course).

Lee, given all the other feedback above do you feel like you're clear on the next steps?
I think so. Chowse and I had a meeting to go over consolidated feedback so hopefully you can expect the next iterations to be more on target. 

Sean, any chance you could send me a PSD/working file of the new tabs and a working file with the current Search bar. Also, I'd like to adopt the style of drop-shading you've been using on your islands/buttons/tabs, for consistency - so any PSDs with those layers intact would be very helpful.

Thanks and stay tuned!
Lee
Howdy all,
Here is another mock up of the AMO hompage. There are still some unresolved design issues here, but wanted to get this out asap, so we can discuss the issues I'm trying to address, sooner than later. 

http://intothefuzz.com/leetom/Addons/JPG/AMO_homepage_02.jpg


Some things you will notice:

- more attention given to main left nav
- added "Categories" to help define that list of links
- adopted Martell's platter/island style of drop shadows
- using Search box convention established previously
- Georgia used as featured content headers
- gradient header boxes replaced faded header "fold" treatment
- AMO specific footer


Some things NOT yet resolved:

- treatment of curated content in hero image (links/toggles)
- new carousel controls for featured content
- i need Martell's most recent header tab art to update
Target Milestone: 5.12.8 → 5.12.9
I quite like this second iteration. The sidebar seems to have much more place and personality, but it's not overwhelming. My only concern is that the search box seems like it doesn't belong where it does, and we're up for mayhem when the main title is localized. Great work, Lee!
I'm glad you like the direction it's moving in, Matt. Fligtar, Chowse - Let me know if there are any major standout issues you still have/would like to discuss. I'd like to move forward and start building out the details page today.
The second iteration is definitely an improvement. Some thoughts:

* Having bevel/shadow on the Explore block in contact w/ the Categories block
  creates an odd visual effect. I'd be tempted to add a gap between the blocks,
  remove the shadow on the Explore block, or make Categories the same style
  as an item in the explore block.

* Could you provide a 'selected' treatment for items in the Explore and
  Categories block?

* Add-ons by Type should be a bit more distinct from Categories. Either placed
  outside of the Categories block, or a smaller heading/text.
Looks good so far!

Some of my initial thoughts:
- The Explore Add-ons seems awkwardly tall.  Maybe reduce the line-height and the size of "explore"?  I also don't like the colors of the headers- the blue seems too light to me.  But the color preference is 100% personal.
- What's the difference between Personas and Themes?  I know the difference, but would a normal person?  Is there any way we can differentiate them better?
- Having the border on the sidebars a lighter blue than the header looks a bit weird- I would either make it the same, or darker.
- The indent in "Top Add-ons" ("9,999,999 users") seems to decrease as it goes down.  What should it be?
- How do I get to Thunderbird/etc add-ons?
- Should "Categories" be "Extension Categories"?  Right now, it seems like you can browse all add-ons by either category or type, which isn't true.  They're dividing two different groups of add-ons (the first is extensions, the second is all add-ons).
Hey Lee,

Looking much better. Some comments:

* I like the new Explore Add-ons block on the homepage, but this sidebar will stick around on several other pages as well, replacing our current Categories menu. I'm not sure it makes as much sense to have that part be so prominent on the subpages. Could you show us what this might look like de-emphasized on other pages?

* I think the search box is too prominent now. That dark blue isn't anywhere else on the page and the green button sticks out

* The add-on grids still show the summary instead of the chowse hover card style

* I'm unsure about Firefox being part of the title. The current site doesn't have it, but it also has Mozilla Firefox right above in the blue bar. Firefox makes the title really long in English, and likely ridiculous in other locales, not to mention the length of "THUNDERBIRD ADD-ONS"
(In reply to comment #21)
> * I'm unsure about Firefox being part of the title. The current site doesn't
> have it, but it also has Mozilla Firefox right above in the blue bar. Firefox
> makes the title really long in English, and likely ridiculous in other locales,
> not to mention the length of "THUNDERBIRD ADD-ONS"

Agreed that we *probably* don't need the words FIREFOX or THUNDERBIRD in the title when we have the logos already there. Would be good to have the full "Firefox Add-ons" text elsewhere on the page, though, both for clarity and SEO.
Hi all, thanks for the feedback. Please see latest jpg here:
http://intothefuzz.com/leetom/Addons/JPG/AMO_homepage_03.jpg

- adjustments made to main nav bar (fligtar, the header for Categories on subpages would indeed be de-emphasized. Imagine a shorter header bar, with "Categories" either in Georgia, or the all-capped meta, but at a smaller point size than currently on my mockups)
- I've highlighted the hover treatment to the nav bar ("Top Rated" and "Bookmarks")
- I addressed Gregory's feedback concerning design from comment 20. Please let me know if there's a shift in nomenclature regarding the nav links
- I recreated a Search bar and right aligned to the page - this way, Search will not shuffle left and right, depending on the length of the page title. The green used on the Go button will be the same green used on primary CTAs

* The add-on grids still show the summary instead of the chowse hover card
style
- I'm using chowse's wireframe here:
http://people.mozilla.com/~chowse/drop/amo/refresh/v2/01.1_front_page.png
If it's been superceded, Chowse - please link me!
Assignee: ltom → chowse
Blocks: 631402
Target Milestone: 5.12.9 → 5.12.10
Target Milestone: 5.12.10 → Q1 2011
Sorry for the lack of updates-- most of the discussion has been happening offline. The latest homepage prototype can be found here:

http://chowse.github.com/amo-redux/homepage.html

There may be a few functional and style tweaks needed, but since development has already begun on parts of the home page, I'll continue tracking design bugs on GitHub and opening bugs against the code changes:

https://github.com/chowse/amo-redux/issues
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
If this bug is closed but the design isn't ready, how do I know when to file implementation bugs?
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.