rubygems/rubygems.org — pull request #744 by kneath (2014-11-20 01:16:25+00:00)
Title: Home page & search UX improvements

The new RubyGems.org is beautiful! But I couldn't help but notice some things that really bugged me in terms of the user experience. I took some time to hack out a suggested alternative, focusing on two key UX areas:

1. Home page landing experience
2. Search

Here's what I've got in this branch:

![screen shot 2014-11-19 at 5 04 09 pm](https://cloud.githubusercontent.com/assets/1354/5117825/abc8ed16-700e-11e4-8af5-aa15ab5845d8.png)

![screen shot 2014-11-19 at 5 04 37 pm](https://cloud.githubusercontent.com/assets/1354/5117863/318ce862-700f-11e4-8d25-2a3c03442f7b.png)

I've changed the landing copy from comparative wording ("Find your gems easier, publish them faster, and have fun.") to explanatory wording. RubyGems.org is the only (realistic) gem server in practice, so it doesn't make sense to say it's \_\_\_\_*er* than anything else. I've also added the text **RubyGems** back into the page to assure people they've landed on the right place.

For the search box, I've forgone the ultra-lightweight style in trade for a heavy, semi-standard looking search box that takes up much more of the page. Searching is the key action for RubyGems, let's make it as easy as possible.

![screen shot 2014-11-19 at 5 04 19 pm](https://cloud.githubusercontent.com/assets/1354/5117864/3b91d73c-700f-11e4-8fad-fb1ec3ca790e.png)

![screen shot 2014-11-19 at 5 04 25 pm](https://cloud.githubusercontent.com/assets/1354/5117876/3ed8088a-700f-11e4-9bfa-46c30b128934.png)

On the detail pages I've followed through with a similar sentiment: larger, more obvious search boxes with similar color schemes.

I did this rather quickly and only tested in Chrome, but I think it's a big improvement over the current version (especially with the responsive bug overlapping the search box with the background lines right now). If y'all are on board with this, I think there's some other general UX improvements we could focus on in the future:

* Preserve the navigation until there is no room (current breakpoint is 1019px, then goes to hamburger)
* Make the search box fluidly fill the navigation area available space, rather than pinning absolute widths to the right
* Work on a new icon for the "Install RubyGems" so it looks less like a "Search ->" action at first glance
* More colors, animations, especially around placeholder -> focus states