Deciding what approach to take on mobile is a debate-worthy topic, as proved by the comment thread in this post on responsive design.
Marks and Spencer has a new site that is tablet-optimized, adapting to the iPad and its competitiors via device recognition rather than screen size. The brand has also updated its apps and mobile sites.
I thought I’d take a look at the mobile site in order to highlight a few nice features. It looks as good as the new desktop, tablet-optimized site, and I found it worked well, aside from a few niggles.
Of course, displaying large and high quality product ranges to their full potential on mobile is a challenge.
See what you think.
The carousel is actually easy-to-use, despite all the debate on the Econsultancy blog about the wisdom of this feature, and it means bigger ranges of bigger images can be tested.
Under the carousel offers are featured. Offers are a big draw for shoppers online and off-. On the desktop site, the top nav features ‘offers’ in red text accordingly.
On mobile, individual offers are presented more boldly, because of the lack of the top nav. One can still browse to offers through the dropdown menu.
On mobile, the persistent top navigation is standard and useful. The back arrow is bigger and easier than using the button your browser provides and helps people who might get confused by the filtering later on. One’s bag is easily selected, as is standard on a mobile and there’s a search function pinned to the top.
The simplicity of the dropdown menu lends itself to easy use, with two options - a store finder and a ‘browse by category’ button.
The shop by category menu is also simple and easy-to-use.
And the store locator is one of the most user-friendly and nicest designs I’ve seen. Opening times are included dynamically according to the day you’re viewing on.
On the mobile site the scrollable diary feature that’s so prominent on the M&S desktop and tablet site isn’t included. But the Editor’s Pick is still clearly promoted in the ‘shop our departments’ part of the homepage.
Selecting it takes you to a page with header images and dates, again very visual, and one can click in and explore from here.
One of the elements to be improved is sharing from the mobile site. Sharing mobile site URLs means users on desktop won’t be able to view them properly - try this URL on desktop. That might be an inevitability of a mobile site, but it seems particularly poor in this case.
Lots of sharing is done on mobile, so many people opening the link might be on a suitable device, but is that a gamble M&S wants to take?
On most devices I don't think there's a debate about images, they have to be big. As Laura Wade-Gery puts it: "People are buying an image."
On this mobile site, the images are at their biggest when one selects a product page and then chooses to ‘tap tap’ to zoom into a particular image. But on product pages and outfit breakdowns, individual products are still shown virtually full screen. Product page carousels show images at a reasonable size, too, and they can be swiped left or right.
I think the balance is right and like the desktop site, cut-out images and white space with a more limited palette helps to bring the products out. See the latest women’s ‘looks’ below.
And altering the tiling on category pages, as shown further down the post, will help those that want to browse larger numbers or products, or alternatively look in more detail.
When looking within an outfit page, product images are displayed in larger format, with the option to click through, and like on desktop, other outfits are cross promoted at the bottom of the page.
When selecting a department on mobile (below I’ve selected ‘Mens’) there’s a nice variety of ways to shop including ‘new in’, ‘brands’, ‘Ss14’ (London Fashion Week) and ‘by fit’.
This blends well with M&S’s new focus on outfits. The 'Womens' nav menu includes 'latest looks'.
When browsing products, there’s a nice option to change the tiling, to display bigger or smaller product images (shown below).
Other nice touches include a prompt to ‘tap here to jump to the top of these items’ on the category page below.
Selecting a product on mobile there’s yet another nice touch with a prompt to users who may want to tap to zoom and the product images can be swiped through left and right.
One problem I found was that after selecting a department and category, below I've selected 'casual trousers', as is my wont, I thought I would be able to navigate to any other product type by selecting 'category' as seen on the screenshot. Category in fact gives me all the options again from 'Mens > Clothing'. To get back to the broader menu I have to select the top nav again.
Once the user realises this, it's fine, but it's worth mentioning.
Back within a product page, I also enjoyed the stock listings which showed me there was ‘over 10’ in stock of this particular item and size.
M&S is wary of improving stocking information and updates these figures every 15 minutes.
Once I’ve selected the product there’s plenty of information available, including drop down product info, delivery and returns, collect in-store, and social buttons.
Interestingly, collect-in-store is the default option on desktop and equally prominent on mobile.
It’s nice that this info folds down. Check out the clear and extensive delivery info with salient points about free delivery on larger orders highlighted.
It’s not ideal that a code is needed in the checkout to enable this free delivery on orders over £150, but this is a hangover from a hack used when the platform was run on Amazon Web Services. I expect this will change soon and auto-price in basket.
Once you’ve added to bag, all this information is included in the bag view, including support for delivery and returns.
As you can see below, in-store collection is given the same prominence as delivery.
M&S is investing in hundreds of iPads in stores across the country and have adopted the model that John Lewis uses, attributing online sales to specific stores and giving credit to stores involved in multichannel purchases. There’s also some more advanced tech, such as virtual rails, currently live in Amsterdam, that are scheduled for British stores.
Below you can see the interface when I choose to collect in-store. I’ve already selected an outlet which, like the store locator, are presented in a list or on a map using your phone's location.
Then a calendar pops out so I can choose a date.
It’s then clear what I need to do if I’m shopping with vouchers or promo codes.
The voucher is still a valuable tool for parts of the M&S audience and I imagine the new daily email will help to start generating some offer usage.
We've been discussing the topic of 'enforced registration' amongst the content team at Econsultancy. Should there be a guest checkout? Personally I don’t think a guest checkout is a must have but it's right to say that giving people the option to create an account once the purchase has been made is probably a less frustrating journey for the user.
Of course, if conversion stats are compelling enough, then one must listen to the numbers. On mobile, it’s best to streamline the quickest user journey as much as possible.
But a lot of the persona work M&S has done is around 'lean back' shopping on tablet. Sure, mobile is important, but David Walmsley mentioned to me that it is only significant for product categories such as school wear, where parents are shopping on the go. Of course, maybe a guest checkout would go some way to changing this.
But on the other hand, joining up data is a must for M&S as they try to understand the multichannel customer so getting people to register seems important.
Here's a couple of screenshots of the registration process on mobile. It’s a fairly easy process.
I think it's perfectly usable. Name, email, password, confirm password and optional telephone. It's data you have to enter in a checkout anyway. Indeed, the info is carried through.
No email confirmation is required once registered, the mobile site shunts you through to checkout (on desktop you have to confirm email address from your inbox).
The only thing I think can be difficult is insisting on a particular security of password, as more people will forget it (Marks insists on eight characters and at least one digit).
A very usable mobile site, with a few caveats. The nav does take some getting used to, as changing departments, one has to go back to the top menu, rather than into the filters.
But that's soon understood and is offset by the crispness of the UI. Like the desktop site, the palette and typography is great. Let me know what you think.