Site spotlight: The Michael Kors user experience

Site spotlight, User experience, User journey, Web design

This week we have chosen to target the Michael Kors user experience to see what the popular designer’s e-commerce site offers in terms of the user journey from the home page through to the checkout.

Home page
The home page features 3 full width rotational banners but we already know why carousels are a user experience nightmare. In this case to navigate between the banners the user has to click on a very small target area of the arrows on either side or on the small circles at the bottom of the carousel.

michael kors user experience home page

Interestingly on the mobile version of the site there are 4 banners and the user can navigate slightly easier by swiping left and right.

They have fully embraced the Valentine’s day holiday with the theme running throughout the home page and as such the first rotational banner offers the hashtag “Fallinginlovewith” to engage with users on social media. This is a great idea, and although the hashtag does blend in a little with the call to action buttons, it is proving quite popular on Twitter. However, a more specific phrase could have been picked as there are users mixed in who are accidentally using the hashtag and even an ebay store who have adopted the same message.

michael kors twitter engagement

The website is not responsive to desktop users but it does offer a mobile specific site if you visit it on a different device. This is not ideal but at least caters to smaller screens. Perhaps a responsive build is planned for this year because the design certainly allows for it to be adapted quite easily.

A nice feature at the bottom of the page is the option to find a store by postcode and is something which is featured prominently at the top of the mobile site.

The search function on the site performs well but is somewhat hidden within the main menu. If it was placed next to “My Account” at the top of the page it might be more immediately visible to users.

michael kors user experience search functionality

A search for “gold watch” returns 107 relevant items which can also be filtered and sorted.

michael kors user experience search functionality gold watch

A search for the name of a collection, which in this case is “Kristen” also returns the correct results.

michael kors user experience search functionality kristen

However, a search term within bags for “Red bag” doesn’t fare so well as it returns no results. Even so, user engagement is offered with a phone number, a link to the contact page and a selection of alternative products. The alternative products offered could be more relevant to the search term though as currently the same 6 items are displayed regardless of the phrase used.

michael kors user experience search functionality red bag

Interestingly within the bags category a colour filter can be applied returning 44 items for red bags.

michael kors user experience search functionality red bag filter

Sometimes unrelated products are also returned such as a search for “Gold shoes” offers a black bag.

Michael Kors user experience search functionality gold shoes

Product page
The product page offers useful photography of the bag with a shot of the interior and exterior as well as the size in comparison to a model, all of which can be zoomed in on.

Michael Kors user experience product page

Another useful section is the style notes which gives advice on how the bag can be worn.

In addition to this the user can locate the bag in a store which opens a popup window with directions, opening times and a telephone number. This is great user engagement as it acknowledges that for an expensive purchase on a statement bag the user is likely to want to see the item in person before deciding. It also allows for an up-sell in the store.

Michael Kors user experience product page store locate

There is no mention on this page of delivery prices and, as we find out later there is a free option, at this point this could be used to persuade users to make a purchase. Similarly, mention of their returns policy could be highlighted here too.

A nice touch is that the checkout is indicated at the top of the page by an image of a Michael Kors shopping bag.

Michael Kors user experience checkout icon

The user is presented with an overview page. It makes great use of white space although at the expense of readable text under the item description, which coupled with the light grey colour can be illegible for some users.

Michael Kors user experience checkout

The box to enter a promotional code is cleverly hidden as the user has to click on a button to reveal it. This is subtle and helps keep the products perceived as luxury items.

The checkout button is dominant on this page and the eye is immediately drawn to it. It seems odd then that immediately underneath this call to action is a section prompting users to continue shopping.

Michael Kors user experience checkout similar products

The user is shown several options in a popup window to continue the checkout process. A guest checkout option and social media sign-up are offered which decrease the rate of abandonment.

The user is then shown the shipping page. The steps involved to complete the purchase and a summary of the order are clearly presented as well as a phone number at the top of the page to provide help to the user should it be required.

Michael Kors user experience checkout shipping

The main menu has been removed to deter distractions yet a button to “Continue Shopping” still exists which, although subtle, only encourages users to abandon the checkout process.

There is a required field for “Shipping Nickname” but it is not clear what this means. Furthermore, there is no inline validation so frustratingly any errors are only displayed after the user has tried to continue. The feedback for errors are equally unhelpful so it is guess work as to why an entered field has been marked as invalid.

The payment page is clear to follow but similarly has no inline validation. It is also unclear why adding a card nickname should be a required field for a user proceeding with a guest checkout and thus does not wish to save their details.

Michael Kors user experience checkout payment

In conclusion…
The Michael Kors user experience has clearly been thought about with seasonal messaging, useful product images and an overall luxury feel. There are also multiple times where the user is offered help such as when a search returns no results and on the checkout pages.

The search functionality isn’t displayed as prominently as it could be but it does perform well for specific terms with the user presented with the correct items which they can filter and sort. The functionality doesn’t work well with broader terms, and whilst a level of user engagement is offered it could be improved with more precise alternative products.

A guest checkout option is available and the checkout process is clear and simple, although it could certainly benefit from inline validation and more helpful error messages.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>