UX Design for Smartphone Conversions

5 UX Optimizations to Improve Smartphone Conversions (Part 1)

Those of you satisfied with your ecommerce smartphone conversion rate, say Y-E-A-H! (chirp, chirp, cricket, cricket) No, seriously though, if you are satisfied you might want to quit being basic and keep reading—there is always room for improvement.

Adobe’s 2016 mobile retail report stated, “while 26% of shopping carts on desktop turn into an order, smartphone carts only see a 16% success rate— conversion rates are nearly 3x higher on a desktop than on a smartphone.”1

adobe analytics conversion trend by device

adobe analytics conversion by deviceWhen it comes to improving your ecommerce site’s smartphone conversion rate the first thing you’ll want to examine is the user experience. You’re probably thinking, “our site is responsive, isn’t that a good thing?”.

Well, yes and no.

“Responsive design is a tool, not a cure-all. While using responsive design has many perks when designing across devices, using the technique does not ensure a usable experience (just as using a gourmet recipe does not ensure the creation of a magnificent meal.) Teams must focus on the details of content, design, and performance in order to support users across all devices.”2

At the minimum, every ecommerce site should utilize a responsive design. However if you really want to improve your conversion rate, custom optimizations to the mobile experience can make all the difference.

Users spend 20x more time on apps than the mobile web3 because apps tend to be more focused and optimized for a smartphone users’ needs.

app vs web usage

Clearly all this data shows that something’s amiss on the smartphone experience and tailoring the experience is key to fixing certain issues.

Therefore, this post series covers a high-level set of user experience (UX) best practices that can help improve smartphone conversion.

Best practices aren’t the end-all be-all of optimization. In fact, they’re best used as a baseline. Start here, but don’t end here – because best practices don’t work for everybody, and best practices are rarely actually the optimal solution.”4

That being said, follow these 5 optimization tips and you’re sure to see some conversion improvement.

1 Focus on what’s important.
2 Think about content.
3 Pay attention to layout.
4 Make it scan-able.
5 Design for speed.

1 Focus on What’s Important

Smartphones naturally have much less screen real estate to work with then desktops. The average desktop view port is 1024×768 pixels or higher5, while a smartphone is closer to 360×640 pixels6. While a couple pixels here and there might not seem like a big deal, they are and the vertical nature of a smartphone only adds to the challenge.

This is why it very important to consider your customers’ needs when it comes to their shopping experience on a smartphone and prioritize your content and functionality accordingly.

Below are several ways you can optimize your the limited real estate available on a smartphone.

Condense the Header

Reduce the height of the site header a much as possible. You can do this by using an alternative logo treatment, implementing a hamburger menu, and labeled icons.

Header before and after

Before / After

Expose the Search Box

“Shoppers who use internal site search converted at a 216% higher rate than those who do not.”7

This is HUGE. Exposing the search field at all times helps bring it to top-of-mind. If exposing the field on all pages isn’t practical for your site, consider doing it for just the homepage and be sure to display a search icon in the header.

Mobile UX search field

 

Highlight Location Specific Information

Is your brand available at brick and mortar stores? If so, prioritize your location information so that it is easily found on a smartphone.

You can do this by featuring a store locator on the homepage or within the header. Also, provide your customers with useful location content such as the store address, hours or operation, one-click link to directions, and if possible wait-times. Both Atheleta and T-Mobile do a good job of this.

Examples of mobile UX - location information

 

Support Navigation in Spite of the Hamburger

The hamburger menu has become the go to solution for mobile navigation because it is a fantastic space saver. However, it has its share of shortcomings.

“On mobile, people were 15% slower when the navigation was hidden.”8

There are several reasons for this, but for the most part customers have to do extra work to figure out what your brand is selling and it’s not a common UX pattern that a typical desktop user is familiar with.

The good news is that you can counter the negative effects of a hamburger menu by including additional navigational links. Old Navy and Sephora do this well by featuring top selling categories either as links of buttons on the homepage.

 

Examples of alternative mobile navigation

 

Optimizing a smartphone user’s experience by focusing on what is important to your customers can help reduce the time they spend looking, ease friction and frustration and in turn improve their path to conversion.

Stay tuned for Part 2 – Think About Content

 


 

1. Source: Adobe 2016 Mobile Retail Report  2. Source: Responsive Web Design  3. Source: Comscore 2016 US Mobile App Report  4. Source: Conversionxl Ecommerce UX  5. Source: W3 Schools Browsers Display  6. Source: Device Atlas Mobile Viewport Size Statistics 2017  7. Source: WebLinc – Boost Conversion and AOV with Site Search  8. Source: NNGroup.com Hamburger Menus