Oka's new responsive site highlights the difficulty of creating great UX

Luxury fashion retailer Oka has become the latest ecommerce business to launch a responsive site.

For the uninitiated, responsive design is widely accepted as the future of web design as it involves deploying a site only once and using style sheets to reformat the content based primarily on screen width to fit the device.

This means that the same site is optimised for all different screen sizes, getting rid of the need t create a separate mobile site.

We've previously reviewed a number of other sites that have recently gone responsive, including Mulberry, Cloggs and Gatwick.

And here is a look at the UX of Oka's new site... 

Homepage

The homepage includes large, high quality product images that fit well with the brand's luxury reputation, however they're displayed on a carousel which is proven to be an ineffective tool in ecommerce.

Also, though the images look great on desktop the impact is greatly reduced when scaled down to a mobile screen.

Another potential issue is the slightly drab colour scheme as it means that the British flag is one of the most prominent buttons on the site. This seems to be common with luxury brands, as Mulberry's new responsive site suffers from a similar issue.

Judging by the colour and positioning of the 'Shop Now' call-to-action, this is the button that Oka wants its customers to click.

Product listings and search

Unfortunately the 'Shop Now' button isn't particularly helpful, as it links to a list of 320 products that can only be filtered on type (furniture or accessories), colour and price.

I can't imagine that many people will be able to find what they're looking for from this page, so will revert to using the top navigation bar or the search tool.

The top nav is a far better way of finding products and the results are presented in a clean grid format with an okay range of filter options. I also like the green 'Add to basket' CTAs alongside each product.

The search tool would benefit from a few modifications though, as the filter options aren't really of much use.

For example, if you search for 'tables' then you get 423 results which can be refined based on price, colour, delivery and star rating. There are 61 different colours to choose from, but they are in no particular order and three of them appear to be the same shade of white. The result is even more baffling on a mobile screen.

                             

Furthermore, one of the options under the delivery filter is 'Out of stock', just so customers can survey all the items that they can't currently purchase.

Product pages

Oka's product pages have a clean, simple design that includes several product images, product reviews and delivery information.

The 'Add to basket' button is also well designed, as it's a decent size and easily the most prominent feature on the page.

The product pages also look good on a mobile screen, as the unnecessary navigation options disappear leaving an uncluttered page that's easy to use. The CTA still stands out as well, which isn't often the case on responsive sites.

One minor criticism is the length of the descriptions. Oka sells high-end furniture so might benefit from writing more detailed product information to reassure people before they spend £169 on a side table.

                      

Shopping basket and checkout

The shopping basket looks great on desktop, detailing all the relevant information including an image and the delivery charges.

Hidden costs are a lead cause of basket abandonment, and as Oka charges almost £5 for delivery it needs to be upfront about it or a lot of people will drop out at the checkout.

It also includes several security logos and notifies customers that they can transact using PayPal.

The mobile layout is a disappointment though as the basket details hang off the side of the screen, so most of the information is obscured. But on the plus side, it does have a great CTA.

                      

Moving onto the checkout, Oka avoids asking people to register by requesting an email so that it can confirm the purchase.

Overall Oka's checkout is well designed and follows best practice guidelines, including quarantining the process, using a progress bar, offering a postcode lookup tool and keeping all the forms as short as possible.

It also includes the order summary at each stage of the checkout so customers are reassured about what they're buying.

Unfortunately on a mobile screen the checkout is currently a bit of a disaster. When I tested it the site reverted to a desktop view and the formatting went awry so it was pretty much unusable.

It would have taken quite some effort to complete the process using these forms and I really don't think that anyone would bother.

                      

This isn't the first time that I've come across this anomaly on a responsive site, as the last time I checked Currys' responsive site also directed mobile users to a desktop site.

In conclusion...

In general Oka has created a good-looking and largely usable site, however there are a number of flaws that need to be fixed sooner rather than later.

The most obvious one of these is the mobile checkout, which isn't at all responsive and in fact reverts to a badly formatted desktop site.

It's extremely jarring as up to that point the purchase journey has been quite painless, and it will surely cause a large majority of shoppers to drop out.

This is really something that should have been tested and fixed before the site went live, but it appears to be a glitch as when I resized my desktop browser to a mobile view the checkout layout altered accordingly.

There are several other UX issues that need to be fixed, such as the 'Shop Now' button, filter options and mobile shopping basket.

If these could be ironed out then Oka will have a decent responsive site for customers to peruse.