There are a lot of great articles out there on how to optimize your site for mobile. You can find the best designs, learn why mobile is different, and see what other companies are doing right. We aren’t going to rehash all that. What we are going to cover is how to optimize your shopping cart for mobile.
Getting people through your cart is hard enough when a person is on a computer, now take that and shrink it a few times. Things just got a lot harder.
With 51% of consumers saying they’ve made a mobile payment within the past 3 months and smartphone adoption expected to double for many demographics, mobile commerce is only going to grow.
Let’s look at how you can make your mobile shopping cart awesome using a few examples:
When you search anything around ‘best mobile site’, you will typically see Amazon come up. Why? Because they’ve done a great job making their site mobile friendly. Adding a product is amazingly easy but what happens when you get in the cart?
Checkout
- The page is simple and only has on it the things I need – product, image, price, in stock, subtotal
- It allows me to change the quantity with a very apparent ‘update quantity’ button.
- There is also a save for later button, a proceed to checkout & a continue shopping option.
Save For Later
- The save for later button simply moves it into a separate section. You can then move it back into your cart when you’re ready to purchase.
- I’d like to see something that lets me add it to my account (especially if I’m Amazon)
Sign In
- This screen lets me either sign in with my existing account or simply enter my email address. A good option for new shoppers.
- The nice thing is, these are my only two options really, making it pretty easy to take the next step and not clutter my screen.
- I would make the radial and sign in buttons a bit bigger
Checkout
- As I’m an Amazon subscriber, I see the total, my payment method that’s on file, my billing address, shipping address, product and shipping speed.
- Want to change shipping? The button is very easy to use and takes you to a new screen where radial buttons let you choose.
Overall, the process couldn’t be any easier.
Let’s take a look at another mobile site – Eastbay
Eastbay has a pretty great mobile site that’s easy to use and to find all the products they have. When you add a product to the cart, we get this:
Shopping Cart
- Just like Amazon you see the product, size, price, image and quantity that you can update and remove.
- One thing we recommended in our 25 ways to prevent shopping cart abandonment post was to make sure that you show shipping costs ahead of time. Eastbay does this in a great way, a drop down.
- The downsides are it’s pretty crowded. While it’s good to show you offer paypal, this may be something you wait to show on the mobile site.
- It’s also hard to offer a code through mobile. Maybe let them click that in order to get the discount.
- You also may not want to include your social icons, catalog links and shop by brand button. Once someone is in your cart, keep them there. (see screenshot below)
- On the plus side, the click to call button is a great addition to any mobile cart. (see screenshot below)
Checkout
- Letting users check out as guests is always a great thing.
- I also love that the order description and totals are included here.
Guest Checkout
- There’s a lot here but it’s pretty easy and the required fields are noted.
- Including drop downs is a must when possible.
- Asking users if they want text messages is a great way to connect with your mobile users.
Shipping Options
- Leaving the billing address as the shipping address is great. Less fields to have to fill out.
- Having the other option as a drop down is a great way to utilize space.
- Drop down shipping is nice but one thing I may do is move this option to the shipping address page. The less steps the better.
- Give your users the chance to edit their previous information.
Checkout
- The multiple options is great and the drop down lets the user see that they can pay with paypal and their order total.
- I might move the order total to the top but leave the details below.
- When you open the credit card payment, the credit card field indicates no dashes or spaces which is helpful for users.
What have we learned?
Both of these companies do a good job optimizing their mobile shopping cart and they can definitely teach us a few things:
- Keep it simple. Only include the things your users need. It’s a small space so use it wisely.
- CTAs should be buttons users can click with their fingers versus hyperlinks. Make it easy to press.
- Make sure the user can save their cart & access it on their desktop.
- For unregistered users, only ask for their basic information at checkout – email & password. You can get the rest later.
- Dropdowns are a great way to present options like shipping options, addresses and payment information.
- Tell users what the form fields require like Eastbay did for the credit card field. There’s nothing worse then having to retype something in through your phone.
- Don’t include promotional graphics on the mobile site. You can see hat Eastbay is doing with their promo code and in that case, it’s hard to actually do anything with it so it just gets in the way.
- Include a click-to-call button. Hey, they’re already on their phone. Bonus: Use a separate phone number so you can track mobile orders.
- Instead of forcing them to sign up for email alerts, give the option to get text message alerts (if you have this capability of course).
- Don’t include extra navigation once the user is in the cart. You can give them the option to continue shopping but that should be it.
We would love to hear what other tips people have. Any particular shopping cart software they are using for mobile sites?