Mobile Design: Capitalizing on the Shift to Smaller Screens

This blog was written by Josh O’Connell, Vice President of Partnerships at Zoey, a SaaS-based e-commerce platform. In his time on the web, Josh has worn a variety of hats in the e-commerce field, including time as a developer and running a web development agency.

Building a website nowadays takes more than just thinking about how someone on a computer will shop. Increasingly, with more and more people spending a larger amount of their time on a phone or tablet than a traditional computer, the trend has been shifting towards a mobile design. With that in mind, here are some things to think about when designing your e-commerce site with a mobile audience as a focus.

Simpler is almost always better

Before mobile was an option, desktop design was getting more and more creative and complex. Some amazingly cool design resulted, but as mobile phones with good web connectivity became commonplace, those same cool designs were impossible to use on a mobile phone.

The trend towards responsive design took a concrete step towards considering the mobile equation. Now, desktop elements had to be thought about in terms of what happened on a smaller screen.

Today. the script is increasingly flipped – many forward thinking sites design their mobile experience first, and then figure out how those components would render on desktop. Increasingly, the mobile first approach means simpler, more straightforward designs.

This means simpler designs with a focus on the product imagery, lighter pages that load quickly on a variety of devices from mobile phones to desktop computers, and a focus on the most important aspects of the e-commerce experience. The basic shopping experience comes front and center.

Screen sizes are not created equal; neither are fingers

One big challenge to designing for mobile is that screen sizes vary. iPhone and Android devices come in different sizes and resolutions, and so you need to make sure that what you’re designing can hold together reasonably well across a range of sizes.

At the same time, with different screen sizes, it’s also important to account for the fact that fingers come in all sizes too. As such, for mobile, it’s important to make sure that your buttons, menus and anything you want customers to interact with is sized appropriately and work well across a range of devices.

Too often I’ve seen customers design sites and the clickable elements are between difficult and impossible to hit well even on an iPhone Plus device (I’ve got big fingers). Imagine users on smaller screens where the elements may be proportionally smaller.

Count the clicks; reduce them where possible

E-commerce is in part a numbers game. How many people come to your door? How many of those put an item into your cart? How many actually buy?

Conversion rates are an important part of the calculus. The trend continues to be that e-commerce on mobile generally underperforms desktop for conversion rates, even as traffic on mobile devices grows. There are a variety of reasons, from people price comparing while they’re at physical stores to not trusting mobile devices.

One of the most critical is the level of difficulty it is to make a purchase on a phone. From the time you put an item into your cart, to the completion of check-out, how much effort is it to make a purchase?

Reducing the amount of effort customers have to exert to get to the order success screen is a critical part of optimizing the online experience. Here are areas you can explore to reduce a number of steps and smooth out the shopping experience:

• Utilize an address search/completion service for billing and shipping address entry, which can auto-complete addresses, one of the more time consuming and difficult parts of checkout.
• Implement payment solutions like Apple Pay or Android Pay that simplify the payment step.
• Introduce payment options that let users complete a purchase on a phone, and then follow up to get the details for the purchase (and even capture the credit card number) once they’re in front of a computer.
• Offer social login solutions that reduce having to enter a username and password to log in, especially for existing customers; complex passwords can be a challenge to enter for mobile users.

The phone experience is harder to control

With a multitude of devices, screen sizes and even mobile networks out there, the experience is dictated in part by the where and the how, not just what you build. To see what it’s like for people with slower connections, try visiting your store while in a busy coffee shop using their Wi-Fi. Go to a place where you know phone service isn’t great and give it a try.

Remember that mobile devices have to fight through myriad performance bottlenecks: Their chips are slower than computers, their screens are smaller and their Internet connections are often times slower.

Put on top of that the rule that the longer a customer waits, the more likely they’ll leave and visit another site, and you’ll see why the mobile experience is so critical. The tips above will go a long way towards ensuring that you’ll have better chances for conversion from your mobile visitors.

Start your free trial today.