Wine-Searcher Design Study

7th February 2012
All posts

Wine-Searcher is an internationally known wine database website based in New Zealand. Their established user base expected the best information worldwide around where to get wine and for what price. The brief: expand its audience without disturbing its existing users.

Based on this I explored redesigning their home page by adding news style content around the search functionality. I wanted to add some magazine design style and interest to their search page, without disrupting their current users. The big question was, how to do this tastefully?

At the time of the project in late 2011 the website looked like this:

My inspiration came from the L.A. Times and New York Magazine website designs – they handle lots of content in a beautiful way without information overload. They are two of the most well designed news websites out there, and I tried to learn as much as I could from their designs in order to inform my own.

Styleboard

I looked at some other sites for more inspiration and came up with a styleboard – a collection of inspirational images whose sole purpose is to get agreement on the look and feel for the design, sometimes focusing on various elements like buttons or processes. Here I focused on presenting news content and a clean look.

Wireframe

With this Styleboard I was then able to go to the Wireframe stage to build a page with content without any concern for look and feel, yet. This provided the chance to quickly determine what information was required and where, and allowed me to tackle the problem of how to integrate the Wine Searcher search functionality with the news information in a tasteful way.

Hi-Fi Design Stage

Next was the Hi Fi/Design stage; actual look and feel graphics. Doing this in a layout program instead of photoshop allowed me to move fast and make changes while not having to commit to the direction; there were no guarantees this design would ever be used.

This project was a great example of taking a very abstract concept and making it a reality by following my usual process.

Tags:

Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with Rails, Python, and ASP.net/Umbraco back end frameworks.