Optimizing E-commerce Site for Mobile

A user needs to be able to browse, customize, choose, and checkout flawlessly and with ease. This is something you would be surprised to see so lost on the masses of ecommerce businesses out there.

The mobile experience will be the most important part of web design, at least for now and the immediate future.

Items on the optimization list include the user flow, the order of checkout, clearly defined product details, handy product reviews, and speed. Each of these is as important as the last, but the first thing to keep in mind is that your site should not necessarily follow the same strategy on mobile as it has on desktop. I am not recommending building a “desktop” version and a “mobile” version separately, that is a very common mistake. However, the developer on the build should be savvy enough to create unique experiences on each, because in the end…

Desktop users and mobile users are not the same… They have different desires, attitudes, preferences, and ultimately, CHOICES.

 

Nothing is more important than your conversion rate. It drives growth for your business, dictates user experiences, decides how much to run on ads, where to drive traffic to, you name it–the CVR is king. One of the issues you have when thinking about these users and their desires is “How can I consolidate my strategy to tailor the needs and wants of every user?” Many may spend months and thousands of dollars on rebuilds and strategy overhauls, when the solution is simple. Seriously, simplicity is the best way to create an effective strategy for everyone.

Related: A Guide to Ecommerce CRO

As mentioned in one of our Instagrams, I learned an old UX litmus test for when you know your site is ready to convert. It involves a heavily inebriated individual and a computer, and how long it takes them to complete your user flow, if  they can complete it. This will show you just how simple your design and UX strategy can be. This is a perfect bar to set for mobile experiences in 2018, as people on the go need simpler ways to buy more and more.

An interesting study shows how users on mobile have a committed decision to buy from the site their on due to the intimacy a user has with his or her device. The problem with low CVR’s on mobile has not been necessarily problems with products or who the business is (this is different for desktop) it is almost primarily the simplicity or UX strategy. If I can’t get what I want quickly on mobile, then I am OUT.

Navigation is key for mobile… Don’t do too much.

Alas, the trusty old hamburger menu. For years now this icon has been one of the most universally known among internet users, planting itself as a staple in effective web design. But what do you get when you peel back the layers of that hamburger menu? Is your menu trying to do too much on mobile?

We at Power Digital suggest two different strategies:

• Go simple. Remove most of your sub links and focus on driving people to top level pages so the menu is actually less crowded for a mobile device.
• Create an entirely new design that is practical for mobile. This means not going over the top with it, but still providing something outside of the normal dropdown mobile menu. See below for an example

NAPS Intl. mobile menu, designed by Power Digital.

 

It is very common that a menu will cause a user to bounce. Sometimes it’s too clunky, <a href>’s don’t work, or it’s too difficult to navigate through what should have been a consolidated version of the desktop menu.

Since this post is about ecommerce mainly, let’s talk specifically about a couple of key pages for any online shop.

Related: Developing Websites With Marketing In Mind

Shop / Category Pages

Let’s break down this example by Deus Ex Machina:

 

While they are one of my favorite brands, I do think they could have done better with the mobile real estate by having two columns instead of one, like Macy’s:

 

On top of that, you can see how Macy’s has multiple filters and styles for a user to choose. This is big because you want to make sure a user can easily segment themselves within the site as that narrows the path to purchasing.

Product Pages

The product page is imperative to closing the deal. How quickly can you give the user all the details they need to make a purchasing decision? The best way to do that is structure the top of the page to hold all the vital items in a practical way. Again, let’s look at Deus Ex Machina (it hurts me they have to be the bad example):

 

The problem here is that upon loading the page, I only know what it looks like, and what the title is. If I owned the site, the first things I would show are images, price, and the “Add to Cart” button. I most likely would not have the share buttons so high up either.

Again, Macy’s does a pretty good job of this:

 

Even with them, I probably would have had the “Add to Cart” button higher.

Wrapping Up 

I hope the few guidelines above will help you make your way to a new ecommerce strategy. It is important to make sure this initiative has a sense of urgency, as 2018 is a pivotal year for making sure your mobile experience is up to par with user trends and even Google’s ranking factors.