Nails inc US launches

The US version of the Nails inc website has just launched, for which I was responsible for the frontend development.

Nails inc US is effectively a copy of their existing Nails inc (UK) site, although the similarities are only skin deep. The US site is built on a completely new and different backend from the UK site, so it required completely new front end, albeit based on an existing look and design. Having this approach meant I could build the front end from the ground up, making sure that everything was cleanly built and well documented, including a comprehensive style guide, a self-mandated part of every project I work on now. The backend is based on an in-house system with some existing templates but I ended up re-writing pretty much all of them in order to accommodate the look and layout of Nails inc.

There were a couple of pages on the UK site that have particularly impressive and complex front end that were also required for the US site, specifically the Couture and Try it on pages. Due to their complexity and somewhat standalone nature, we decided it would be best to try to copy these pages onto the US site rather than build them from scratch, so I can't claim full credit for these sections, impressive as they are. That accolade belongs to my former colleague, Jack Armley who did the original build (although I was sat opposite him at the time so got to be in on some of the details). At the time he did a lot of work to make sure the appearance and colour of the nail polishes on the site closely matched their real life counterparts - even going so far as to paint his own nails!

Couture

Couture is a sort of mini app that allows the user to customise their own nail polish. It contains lots of different interaction types like click and drag and drop, and it had to work on ipad, so it required interception of the standard tablet touch events. To make Couture work on the US site I was able to mostly copy the CSS intact, although I did reorganise it a little. The JavaScript proved a little more complex and required some rework on my part due to the slightly different nature of the platform.

Try it on

Try it on is another mini app, slightly simpler than Couture, that lets the user see the nail polish and topcoat they've chosen on a 'real' hand. Although I was able to again keep most of the CSS I ended up almost completely rewriting the JavaScript due to the different nature of the platform. Try it on also features on some of the product pages, so the user can 'Try it on' as they browse. Again, copying this from the UK site proved problematic so I ended up rewriting a lot of it.

We had a very tight timescale on this build but I think in the end managed it in just under a month and a half. It's usually a nice feeling when a site launches, although it's often tinged with a little anti-climax, particularly when the launch is a quiet one. For this one, apparently I was so happy that I hugged one of the developers.

One final note - I've just realised that of course, unless you're in the US, you can't actually see my work in action. D'oh.

Update

Since writing this post I've been involved in a complete rebuild of the Nails inc site. Read more about it here.

Related

This article is tagged with