Designing Your Mobile Checkout Sign In Page

What is the most important element of your checkout sign in page?

Guest checkout

As I've blogged many times before, guest checkout is critical to conversion. Forrester Research found that 23% of consumers abandoned the checkout of the last site they shopped on that didn't have a guest checkout option.

Though creating an account is usually not more daunting than checking out as a guest, it's all about perception. The goal in web forms and processes is to minimize the perceived difficulty of completion. Character input is harder to do on mobile devices, therefore registration is a major source of friction. Making it very conspicuous that you offer guest checkout will reduce exit rates.

Note: The following tips your customer base prefers the guest checkout, and that the guest option is the primary call to action. If this does not apply to your business (no guest checkout option or high percentage of customers are account holders, such as B2B or B2E), simply substitute the sign in for guest checkout as the primary call to action).

Consider the fold

Walgreens has a guest checkout, but it's presented last, after sign in and registration. At first blush, it's unclear if there is a guest option.

ASOS offers both options above the fold, but the guest checkout link may be overlooked.

Competing calls to action

Users often begin typing in open fields without noticing what task they are completing, which is why many type keywords into email sign up fields on home pages or mistakenly try to register in a returning customer area. So it's best to make your guest checkout call to action bold, juicy and top-center.

Crate and Barrel's guest checkout button is bright and blue, but smaller than the sign in field. In essence, the open field is a competing call to action which is visually larger. Some users will overlook the button and just start typing.

Blue Nile places the guest checkout button front-and-center, but its black color could be tested against other colors, as it does not stand out as much as the big blue Sign In Now button, or the open fields. Eye tracking studies would reveal which area of the page attracts immediate attention.

Lowes smartly designs its sign in page with all 3 checkout options above the fold, with the primary call to action larger than the open input fields. One could argue the registration link is unnecessary, as a guest can save information in an account.

It's tough to get confused with Home Depot's simple presentation. It's worth testing this approach against your existing design.

I'm also a fan of Amazon's simple sign in approach. It's worth testing this as well.

Testing ideas

The cart sign in page has one goal - an initiated checkout. Exit rates at this stage are the measure of the page's effectiveness.

Testing the sign in page can be done effectively and quickly with user testing -- you may not have enough traffic hitting the sign in page from mobile devices to support an A/B test at this time. Test for task completion, watch if/how users scroll, what errors they make, their comprehension of written instructions and the ease of error correction.

If you're ready to jump into A/B testing, your focus should be on the layout (how you present your sign in options, similar to how you would test on your www site), clarity and persuasion of your copy (instructions) and design of your call to action buttons (labels, color, shape, size and placement.)

Next up: mobile checkout.

Looking for help with mobile commerce strategy? Contact the Elastic Path consulting team at consulting@elasticpath.com to learn how our ecommerce strategy and mobile strategy services can improve your business results.