itpints.com redesign: thoughts behind the design process

A while ago the itpints’ manager, Javier Arias, approached me to redesign their site. He wanted a new experience of usability for the search engine and at the same time, a clean but artsy look. I started doing some research about many web search engines: classic engines where results are sorted mainly by relevance, (like Google’s search, whether it’s the old or the new infrastructure) and those that offer a real-time search, like SocialMention.

The result, the home page, is below, click it to see the full picture and then continue reading some thoughts about the design process.

Back in that moment, I suggested to @javisarias, the mind behind itpints, that we should put the trending topics on the home page, and not only the current trending topics, but those of the present day and the week and possibly, the monthly trending topics, but the latter was quickly deprecated since in a real time thing almost none would look for things that are one month old. Of course, we all know that Twitter came out and placed the trending topics on their home when you’re not logged in. So, I thought about a small deck where you could choose your trending topic reaching, Now, Today or the Last Week.

The main area where itpints plays is in the search field, so I created a very focused area for the input and submit elements, along with the advanced options. The intended workflow when you perform a search, originally was the one depicted in the first image, but I later changed it to the current one.

You can clearly see why: in the first design, the position of the Search button is not aligned with the natural flow of the typed text, so your eye and hand are dragged towards right and down. In the second design instead, the Search button is aligned with the typed text, so it’s a natural progression of your workflow. The Advanced options are located below the Search button because they are seldom used and if you’re going to set some of them, it will force a change of your workflow, so it is ok to locate them in another line. I wouldn’t have placed it at the right of the Search button, simply because it’s not a natural flow: type, move at the right side of the Search button, click Advanced options, set them, and return to the Search button. Not good, too much effort. Instead, the proposed flow if you’re setting Advanced options is type, click Advanced options, set options, hit Search. One less movement. Maybe this is a bit extremist and I know it’s impossible to predict the user, but let’s arrange things as good as possible.

The light blue color was suggested by @javisarias, so it was really a matter of choosing the right colors for the combination. I added a lot of letterpress effect that I think will be created using text-shadow. @javisarias took a decisive step towards an efficiency of the internet by dropping specific support for IE6, pretty much like 37signals, Elliot Jay Stocks and others did.

Finally, the soft background has certain directions on the slopes that points right towards the Search button, simply because I wanted it to be the center of the page. Search. Half of itpints’ essence along with real time. Try itpints and get real time results!