Carter’s has the only website out of 100 major US multichannel retailers to feature responsive design.
The Search Agency’s mobile experience scorecard published this week, highlights 100 ecommerce sites and rates them according to their mobile readiness.
Although over ninety companies operate effective dedicated mobiles sites, Carter’s was the only company to achieve full marks in the site format category because it operates an entirely responsive website.
Responsive web design means that the same website can be deployed for multiple screen sizes, and is the best way for ecommerce sites to increase conversion on mobile devices.
Before reading the The Search Agency's report I didn’t know much about the retailer Carter’s; it’s a USA based manufacturer of children’s clothes, however as this is posited as a leading example of responsive design, there must be some valuable lessons to learn from it.
Here’s how the Carter’s website looks on a full screen desktop.
The bright banner image captures attention immediately (overlarge banners are one of the key ways to design a persuasive website) and drives consumers through to the current sale offer.
Although the only clickable links within the banner are the relatively small ‘shop now’ and ‘find a store’ buttons, when you hover over the ‘shop now’ button it brings up handy links to the relative size of clothes you’re looking for. This makes for a timesaving and efficient button.
There’s a smaller banner under the main one that links to a different offer, again with size and gender options, then just above the fold, Carter’s manages to squeeze in clear social button links, email sign-up and a store locator.
All of this, along with tabs across the top split by child’s age and gender (or neutral), a search field and shipping details, makes for a brilliant example of homepage UX.
On a mobile, the homepage shrinks down to this:
The banner offer remains, but in a much simpler, fully clickable form.
The most immediate call-to-action is the ‘find a store’ button. This is great to drive customers to your offline business. There’s also a search field at the top of the screen.
Tab options that were previously along the top on the desktop, are now found at the bottom of the screen, however as there are two options above the fold, it’s obvious there’ll be more to scroll through.
Scrolling to the bottom of the homepage reveals social buttons, email sign-up, store opening hours and a click-to-call phone number.
Here’s the desktop version of Carter's product listing:
There's excellent use of space here, only four products per line, which allows for much larger images. There’s also a full complement of clickable options on the left navigation menu.
Here’s the mobile version:
There are large buttons immediately presented to filter products by style and size, and there are product images above the fold.
It’s great to see such large clear images on a mobile, but there could be a much better use of space here.
Almost a third of the screen is blank, Carter’s could comfortably fit four items per screen with a slightly better layout. Using lots of white space is an effective way to draw the eye to products, however this is too much.
The search field remains at the top of every page on the mobile site.
A drop down menu appears when you begin input, which allows for quick and easy access and saves on fiddly typing.
You’re then taken through to a product page that intuitively presents you with options to define by gender, size and style, as well as presenting you with 12 full screens of the most popular items within your search criteria.
On the desktop, when you add an item to your shopping basket, the basket appears as a pop-up window.
The item placed in the basket is clearly indicated. There are further options for ‘you may also like’, a ‘continue shopping’ option, and very importantly the shipping and handling charge is clearly shown. Many shopping baskets are abandoned when shipping fees are hidden as a nasty surprise at the end.
On a mobile, the pop-up window feature remains.
Although it looks slightly unwieldly, as the window doesn’t quite fit on the screen, the window is optimised to present the 'checkout' and 'continue shopping' options first, the only tappable buttons you really need at this point.
The rest of the window is just for your own reference.
The desktop checkout is great; well designed, clearly spaced with large, bright call-to-action buttons.
There’s a ‘guest checkout’ that bypasses sign in. You just have to enter your address and billing information in collapsible menus. Shipping method options and pricing are also clearly listed.
The checkout is a fluid and efficient experience, all done within the same screen. The chance to save your information for further shopping is presented after the sale has been confirmed.
On a mobile, checkout is just as convenient.
Guest checkout is a particularly important feature, as a customer is much more likely to opt for this on a mobile device.
Input fields are large and easy to navigate, and much like the desktop version, it's all done within the same screen, saving on lengthy loading times that can scupper many a mobile transaction.
I particularly like the easy way you can change countries and denominations.
This is an excellent responsive site from Carter's, with simple functionality and bold call to action buttons. My only complaint is the product listings page on mobile, this seems like an oversight in design, and wouldn't take much effort to alter.
In spite of this, Carter’s is one of those rare sites that provides subtly different experiences on desktop and mobile; carrying over the best functions of one to the other and creating a perfectly optimised experience.