Lovehats 2011 - 2012 redesign and Symfony build

I was contacted about this project from old colleagues in London. This is a quality e-commerce site selling designer millinery. Build in html5, with attention to usability on iPad and iPhone.

Lovehats (www.lovehats.com) is based in London as so much of the world’s millinery originates here, but this was designed as an international website in nine languages. They are adding new designers all the time from all over the World.

The “try it on” feature has its own main section (www.lovehats.com/try-it-on). This was developed so hats can be “tried on” before you buy, but feedback from site visitors say that this feature has also been so much fun. 360 degree photography, powered by Orbitvu (www.orbitvu.com), has been used to help see every hat in detail, from every angle.

Lovehats uses Symfony v1.4, the Open-Source PHP framework (www.symfony-project.org) and HTML5 Boilerplate (html5boilerplate.com) with Modernizr (www.modernizr.com) for backward compatibility for older browsers (Internet Explorer in particular). Modernizr was also used to detect for touch screen devices to target jQuery scripts and adding buttons to menus

My focus in the project was on the main site HTML5, CSS and JQuery, covering all sections except ‘Headlines’ Blog section

JQuery Ul was used on the homepage rotator and category listing left column filters. JQuery Tools on the category listing extra details tooltips and product detail tooltips.
CSS3 transitions used in such areas as the change from the flat image of the product hat to the mannequin with hat on the category listings.

As changes were introduced to the design by Lovehats, especially on the product detail and home page hero rotator, I had an active input to these design changes and their implementation.

I have a local Ubuntu Linux server I built at home, so using www.assembla.com, I had a local SVN checkout of the project to work with and commit changes to the main repository.

Visit the Lovehats website

Lovehats homepage

Lovehats homepage

Lovehats section page detail description

Lovehats section page detail description

Lovehats Product page close up detail

Lovehats Product page close up detail

Lovehats Product detail tooltip detail

Lovehats Product detail tooltip detail

Landing page detail

Landing page detail

Lovehats designer biography details

Lovehats designer biography details

Lovehats quick basket details

Lovehats quick basket details

Lovehats shopping bag detail

Lovehats shopping bag detail

Lovehats checkout detail

Lovehats checkout detail

Lovehats menu

Lovehats menu

Lovehats Try it on

Lovehats Try it on

Lovehats Try it on details

Lovehats Try it on details