Checkout Audit of Microsoft Store

There is probably no need to introduce Microsoft, the World’s technology leader and top3 valuable company with the market capitalization over $500 billion. Although they are generating most of their business through partner sales, they also run their own Microsoft Store where visitors can purchase online anything from Windows 10 to Xbox One.

Last time we have focused on the Farfetch’s product page, this time we will be focusing only on the checkout experience (e.g. when visitor adds product to the cart and wants to pay). You would probably say Microsoft will have everything related to e-commerce well optimized and the whole online purchasing experience will be smooth and slick. But is it? Let’s have a look.

Here is the actual link to buy the tested product (Microsoft Surface Pro 4) on the store for United States. We have done the test purchase on 29 April 2017 and here are the actual screenshots of the guest checkout process – step 1 (customer info) and step 2 (payment info). Apparently Microsoft is using an online reseller model through Digital River, so the whole checkout is operated by a 3rd party.

Free Audit Would you like a professional audit of your product page or checkout by our team? Just fill in our form for a high chance of getting it completely free, as we are currently building our references.

Design & Layout

From the design point of view there is not much to comment as the whole checkout process is really simple in terms of design elements and images. Logo could be maybe a slightly bigger to increase visitors trust.

At the bottom there are logos of the available payment methods. They look a bit washed-out and doesn’t match with the card logos in the next step.

Logos look outdated and doesn't match with logos in the next step
Logos look outdated and doesn’t match with logos in the next step

Layout seems to be extremely inconsistent and every form is just flying around the page. Especially ‘Shipping method’ selection in the middle. Width of the footer doesn’t match the width of the header.

Plus what is super annoying in the current layout is that typical customer fills in e-mail and shipping details and then selects shipping. But when you change the page actually reloads and everything except e-mail is lost and customer has to enter it again. Personally I would just drop at this stage.

What is super weird is the different style and font of the forms in each step. In the first step headings are bolded and required fields are marked with the red star following the label. In the second step headings are regular (non-bolded) and required fields are marked with the star before the label (see image below for comparison).

Each form is using different style for headings and required fields
Each form is using different style for headings and required fields

Design & Layout 65% The whole process is missing any basic concept, consistency and stylization, it is not clear what user needs to fill-in. Plus this reload page issue when all details are lost. Therefore we are giving only 65%.

Tip #1 Move the progress bar to the header (next to the logo) to save precious vertical space.

Content

At the first sight the checkout looks really complex – lot of fields, labels, selectors and other elements. Simplification is the key here as user needs to understand what is important and such combination of layout with rich content doesn’t help.

The complexity is well illustrated on the shipping methods selection below. There are four different methods with weird names (like ‘Select’ or ‘Expedited’) and with extremely small difference – just a one business day. There are probably also differences in terms of cost, but hard to tell as the cost is displayed only after you select specific method and page is reloaded.

Sometimes less options are better
Sometimes less options are better

Another extremely user unfriendly thing is the selection of card type after customer selects credit/debit card as a payment method. In some browsers (e.g. Internet Explorer 11), you actually need to click on the small radio box, even clicking on the card logo doesn’t work. To be honest I haven’t seen this for the last couple of years (hence the reference to Windows XP) and I definitely wouldn’t expect this from technology leader. Typically the card is recognized on the backend based on its number. Also note the logos which are different from the ones in the footer.

Selecting a card type – are we buying Windows XP?
Selecting a card type – are we buying Windows XP?

Let’s continue with a payment. Question is how much is the actual total as the label says ‘Total’, but it is the same amount as ‘Subtotal’ which doesn’t include taxes.

So does $1,148 include the tax or not?
So does $1,148 include the tax or not?

If you look closely to the footer of the checkout (and the whole Microsoft Store in fact) there is a small note ‘This site is hosted by Digital River’. That means the whole store is operated by a 3rd party company, but definitely more information explaining the relationship would reduce the shopper’s fear. Also the links should open in new tabs. And the same style of capitalization should be used to keep consistency (‘Terms Of Use And Sale’ vs. ‘About our Ads’).

Who is Digital River? I thought I am on Microsoft Store
Who is Digital River? I thought I am on Microsoft Store

Content 70% Not a major issue here, but rather a few medium ones, therefore we are giving 70% for Content.

Call-to-Action

The biggest issue of the both call-to-action buttons (in each step) is that they are pushed below the fold together with some required fields which based on our experience causes a huge cart drop-off because it makes look the whole checkout process complicated.

FYI Great article from Oli Gardner explaining the whole above/below the fold CTA problem.

Below the fold position is not the only problem here. The CTA layout and style is also different in each step (see the image below for comparison). And displaying ‘Cancel’ button on such a prominent place doesn’t help the conversion either. Note the cancel button is actually bigger then the continue button.

CTA style and position is different in each step
CTA style and position is different in each step

In terms of label ‘Next’ is totally fine here, also ‘Continue’ may work well. We like adding also an icon/symbol of moving to the next step, for example ‘Next »’ to visually drive customer to the next step.

Call-to-Action 70% Major issue here is the position below the fold and overall small visibility of the CTA button. Therefore we are giving 70% for Call-to-Action.

Performance

Performance wise the checkout experience is terrible and extremely slow. Just try yourself and see how the page loads so slow. There are several reasons for that. Speed is one of the key factors of successful checkout process and have major impact on the overall conversion rate.

FYI Real case study from Unbounce showing how speed optimized checkout increased conversion by amazing 66%.

First of all the server hosting looks to be slow, no matter from which location. We used Pingdom from San Jose, California, USA and the total load time was around 6 seconds (!), that’s completely off. It is actually slower than around 75% off other website on the Internet. Also Google PageSpeed confirmed this issue.

Tool Score (out of 100) Main Issue
Google PageSpeed (Desktop) 59 Slow server response time (2-3 seconds)
Google PageSpeed (Mobile) 47 Render-blocking JavaScript and CSS
Yahoo YSlow 62 Reduce HTTPs requests (38 JS, 4 CSS)

Besides slow server response time there are other major issues like lot of HTTPs requests (specifically almost 40 JS files and 4 CSS files), missing expiry headers or decompressed files and images. Page size of 1.2 MB is good, but almost 0.8 MB are different JS files which could be definitely compressed and combined into one or fewer ones.

Performance 60% Overall the checkout process is simply really slow for several reasons, since speed is crucial during this part of the customer journey we are giving only 60%.

Compatibility

We have tested three main operating systems, Windows 7, Windows 10, and macOS, on several versions of today’s mainstream browsers (Google Chrome, Mozilla Firefox, Internet Explorer and Safari). Our simple test included these steps:

  1. Page load – Does the checkout loads properly with no design issues?
  2. Page elements – Are the page elements “Live Chat” and changing shipping method working properly after clicking?
  3. Continue – Can visitors continue to the next step (payment page)?
  4. Add Credit Card – Can the Credit Card number be entered and accepted?

We haven’t encountered any major issues during our compatibility tests.

Browser Operating System Compatibility
Google Chrome 56 & 57 Windows 7 & 10 ✔
Mozilla Firefox 51 & 52 Windows 7 & 10 ✔
Microsoft Edge 38 Windows 7 & 10 ✔
Internet Explorer 10 & 11 Windows 7 & 10 ✔
Safari 5.1 macOS Sierra ✔

Leave a Comment