Glamourous Gowns

Glamourous Gowns is one of the leading Bridal Retail sites in the UK. Started in 2006, it broke the mold by being the first bridal site that actually showed customers how much their dress would cost. Until that time, the price you paid for a wedding dress was, often as not, whatever price the owner of the shop thought you could afford. By keeping their prices competitive, and displaying them up front, Glamourous Gowns went from a standing start to being one of the top 3 stockists for Mori Lee in the UK. Given that, at the time, they only had one bricks and mortar outlet, this is no mean feat!

The Landing Page

glamourous_gowns_landing_page

The latest version of the website is fully responsive. Now, due to their nature, responsive sites don't tend to be as pretty as fixed width sites. So full page imagery is used to good effect. I made a conscious decision to keep the megamenus when I redesigned the site responsively though. I was very happy with how they originally looked and saw no need to go for a flatter design. Obviously, if you view in a mobile, you will get a basic text only menu, but if you are on a desktop or a bigger tablet, there is no reason why you cannot be spoiled with a decent menu.

I did toy with making the menus swipable, but that proved to be a UX nightmare, so I kept it nice and simple instead.

If you were to select one of the designers shown in the menu, you would then be presented with a category page:

Typical Category Page

glamourous_gowns_typical_category_page

I had to make a performance decision on the category pages. In the past, I had relied on pagination, and only basic filtering. However, the requirement was for more in-depth filtering. The last thing I wanted to do is have a big page delay every time somebody changed a filter item, so I made the decision to load all the dress data in a json array, and rely on javascript to render the images when required. I put a limit of 24 thumbnails to display on page load, with a MORE button at the foot to reveal more items in a similar fashion to the various infinite-scroll techniques out there.

If you are quick when you refresh a page, you may occasionally see pagination. This is because I implemented a fallback, partly for when javascript is disabled, but mostly so that search engines could more easily scrape the items hidden by the MORE button.

So, once a customer clicks on an item, they get the item page...

The Item Page

glamourous_gowns_item_page

This isn't actually that disimilar to the pre-responsive Glamourous Gowns item page. This is a testament to the original design. Right back in 2006, the design cut out a lot of the noise that was all the rage back then. Naturally enough, if you click on the thumbnail you will get a bigger view:

Carousel Image Viewer with Added Functionality

glamourous_gowns_carousel

I can't remember which of the many carousels out there I opted to use. But I made sure it was possible to add functionality to it without requiring a voyage into the developer's brain. I added an HD option, but to be honest I don't think it would be missed if it wasn't there. Besides, maintaining 1000s of HD versions of the images was a pain. The old Glamourous Gowns site had an image viewer I developed from the ground up myself. However, it wasn't responsive, and though it was fun to write one once, I wasn't going to do so again when there were so many off the shelf ones available which were responsive.

The Shopping Cart

glamourous_gowns_shopping_cart

I was never that satisfied with the pre-responsive version of the shopping cart, so I welcomed the opportunity to make a responsive version. If you go down a few pictures you will see how the cart looks on a smaller screen. I was pleased with how it maintained its functionality without looking messy.

The Checkout Process

glamourous_gowns_checkout

The Checkout Page always requires a lot of effort, because you need to make the process as smooth as possible without skipping any legal requirements like displaying terms and conditions etc. I am not much of a fan of animation at the best of times, but if there is one place where it doesn't belong at all it is during checkout. There is nothing worse than trying to buy something online and having it freeze apart from some annoying animation that seems to taunt you while you wait for the inevitable page load error. If you are thinking of having some stylish animation to keep the customer occupied while they check out, I implore you, don't do it.

That's the basic workflow of the site covered. However, there are a few more pages of interest.

The Glamourous Gowns Blog

glamourous_gowns_blog

The blog is fully integrated with the shopping data. Should you so wish, you can add tags to the blog which will get rendered into thumbnails etc. The non responsive version had more bells and whistles, such as buttons on images which you could click to display the appropriate sale page. However, when you had multiple buttons per image, it soon broke down in a responsive environment. The final nail in the image-button's coffin came when I added the functionality on the old site to see how many people were actually clicking the button. It wasn't very many at all. In fact, I think the button became an annoyance because it got in the way of the picture. So I was happy to let the functionality drop.

Testimonials Page

other_pages_continued

Testimonials are an import aspect of the bridal shopping process. A few years ago, most of the testimonials were sent in by post. But these days they first appear on Facebook. Nothing fancy is involved in this page though. The data is just manually copied and pasted into the back office. It would be possible to pull the information direct from Facebook, however I spent many months in the past working with previous versions of the Facebook API, and to be frank, for something as important as the testimonials page, I don't think the process should be automated. Otherwise a five star review that was highly critical and rude could slip through unnoticed.

Other Pages

other_pages_on_glamourous_gowns

Where appropriate, it is nice to go off-piste and develop content outside the usual e-commerce remit. Care should be taken to ensure that the responsive nature is maintained though.

And speaking of responsiveness, I will leave you with some images showing how the site looks in a smaller window. I hope you will agree that it still looks very professional.

The Site Through A Smaller Screen

glamourous_gowns_responsive

In the past, I developed mobile-only versions of sites, using browser sniffing to detect when a mobile was being used. To be honest, I never had a problem with it giving false positives (apart from on the original iPad mini). However, the mobile-only version was always the poor cousin, and as the proportion of mobile customers grew and eventually surpassed desktop viewers, it became apparent that something had to change.

However, responsive sites are not without their pitfalls. You may not have two sites to maintain, but you still have to check that the one site looks fine in all manner of screen sizes.