We've created Zuko, our next-generation form analytics platform. Explore Zuko Explore Zuko > Hide Message

Big Brand Teardown: Mattel’s Online Checkout

Big Brand Teardown

We return to our Big Brand Teardown series with toy giant Mattel. For all their dominance in the market there’s one area where it’s clear to see that Mattel are lagging behind: their online shop.

The experience is pretty unpleasant. There are so many pain points in Mattel’s checkout that I’m far more likely to head over to the Disney store or another third party seller, rather than buy direct.

Let the teardown begin.

Can I Trust You?

Getting to Mattel’s online shop was the first thing that unnerved me a bit. Clicking through from the main site to the shop, a warning message appeared, encouraging me to turn back.

Mattel 'leaving site' pop up box

This makes it seem as though the link I’ve clicked is malicious or the website unsecured. I think this message is here to stop kids from shopping without permission but, as you’ll see, this would be pretty hard to do. I braved it and clicked ‘Keep going’.

Basket Case

Picking a doll was straight-forward enough but after adding it to my basket I decided I wanted two, not just one. Uh-oh, I can’t add more. You can see in the image below that the + button and Wishlist link are merged. There’s something more going on here than just bad design.

Mattel shopping basket

Hitting the Login Wall

Persevering, I continued to the checkout, however, there’s no guest checkout option. After nearly being turned away before I even landed in the shop, this feels like another block that’s stopping me from buying.

By asking for an email address and password Mattel are asking for a much bigger commitment than many buyers are prepared for. It also slows the shopping process down, which is often enough to cause cart abandonment.

Sign in or Register page

The mobile site is a little better; I don’t have to create an account, just provide my date of birth. This shows some awareness of better practices that aren’t carried over on all of Mattel’s channels.

That’s a Personal Question

It isn’t very clear why Mattel need to verify your age before you can purchase on their site. Even though they do provide a link called ‘Why Required’, the information presented doesn’t make it any easier to discern. You can see in the image below that a new window is opened containing a very long privacy statement which is meant to explain why they need your date of birth.

Mattel privacy statement

This is an example of asking for information that a shopper might not be comfortable with providing. I believe that this question is here because of age restrictions on certain products but it would take a very long time to understand that from the information that Mattel give.

Poor Navigation

After registering as a new customer I was inexplicably sent to the Wish List area. Determined to get to the checkout, I had to find the small basket at the top of the screen, return to my basket and proceed to the checkout from there.

There the navigation problems continued; Mattel uses a multi-page checkout but doesn’t make it clear how I can go back and edit earlier steps.

Progress bar in form

The top part of the form keeps shoppers aware of their progress in the checkout, which is a good but it wasn’t clear that these are clickable tabs. Instead I looked at the bottom of the form for a ‘Back’ or ‘Previous’ button that wasn’t there. Multi-page checkout design can leave many shoppers feeling a bit lost.

Billing and Shipping Addresses

Now that I’ve finally reached the checkout I’m confronted with two long forms asking for my address details.

Address forms

There’re a few things that could be improved here:

  1. Size of form

  2. Ease of completion

The number of form fields is daunting, especially as this is the first page in a five page checkout. Already it looks as though it will be difficult and time consuming. A great solution to this would be to add postcode lookup. This would make the form easier to complete, look shorter and reduce human error.

Another improvement would be to hide the second form by default. The current default is to show the second form. The user has to select ‘Use Billing Address as Shipping Address’ in order to hide it.

Pay Up; Collecting Payment Information

There are a couple of options for paying, which is what I like to see. Sadly the option to pay by card isn’t as easy to use as it could be. There are several ways this part of the form could be improved e.g. by detecting card type rather than asking for it. Read more about this in my guide to user friendly design for card payment forms.

Inline Validation and Error Messages

One final frustration is the lack of inline validation. My inputs were only validated after I submitted each page. Even more annoying is the fact that error message appear at the top of the page. Error fields are only highlighted with a red outline.

Error messages in Mattel checkout

All the fields of the form were cleared, so one small error leads to filling everything out again. This may have been done on purpose to satisfy security requirements but it is possible to keep the fields filled without storing the data on the server. The Baymard Institute explain how to use AJAX to preserve card details on form errors.

Final Thoughts

There are also a number of design issues with Mattel’s checkout that I haven’t given time to here. It seems as though Mattel sell through so many other sites that they’ve let their own online shop front become old and tired. I’d love to see the data from this form as I suspect there is a high number of drop-offs throughout.