It’s almost a given that traffic today is led by mobile than desktop. This makes your life a tad bit tougher as your eCommerce website must render well on mobile devices.
Not only does it need to render well, but the user experience has to be customized to suit the smaller form factor if you want to increase conversions.
The other factor is search ranking. Google has made it mandatory for websites to be mobile optimized in order to rank well on the search engine.
How do you ensure a great user experience for your eCommerce website to up conversions?
We interviewed 9 experts from the industry about the key aspects of redesigning an eCommerce website for mobile.
#1 Make sure of its simplicity and speed
Mark Rogers, owner at Frame Destination
KISS: Keep it Simple, Stupid!
On mobile, we’ve seen two key factors that have supported our eCommerce website’s success: simplicity and speed. Graphics and images should be designed more like logos, with clean and simple designs that are obvious no matter what size screen the customer is using.
A content delivery network (CDN) such as Cloudinary can ensure that images are optimized for mobile. Likewise, buttons should be large and clear—people will be using their fingers, not mouse pointers.
Avoid menus with horizontal fly-outs. While they can be great for desktops with wide screens, they are unwieldy and hard to navigate on narrow mobile screens.
Perhaps most importantly is the speed at which the website loads. Luckily, simpler websites load faster. Pages should load in two seconds or even fewer to avoid abandoned websites—and shopping carts.
#2 Payment process should be hassle-free and easy
Marshall Morris, COO at HomeLife Media
For us, there are two things that we have found impact commerce quite a bit.
- Making sure checkout is as painless as possible. On mobile any friction is magnified and people want to checkout quickly without having to go through a ton of small fields typing in small letters. Make it super simple to get paid. Less is more.
- Make sure the navigation experience and flow is similar to desktop and vice versa. If someone is on desktop, they don’t want to have to relearn how to get to what they want and the same is the other way around. Be consistent in how people find stuff.
Getting customers to the right stuff and allowing them to checkout simply with the least amount of friction possible is critical for scaling an eCommerce business.
#3 Make the website easy to navigate
Matt Janaway, CEO at Marketing Labs UK
You should always be wary when adding lots of features to the mobile view of your eCommerce store. Keep things simple and make them clean and easy to navigate. Having lots of features can increase clutter and make the user experience worse, not better.
Another tip to consider is how well the checkout process works on mobile and tablets. Try to avoid long forms and multiple pages of checkout steps. Use an address checker, so your users don’t have to fill out their entire address and even look at accepting Android and Apple Pay for a straightforward and quick process.
#4 Observe the buying journey of your customer
Lesley Pennington, CEO & founder at Bemz
A few key things to keep in mind while redesigning an eCommerce website for mobile responsiveness:
- Understand how your customers use mobile in their buying journey first, and adjust your mobile website design to this. Many customers use mobile for search and inspiration, but then prefer to shop on desktop or tablet.
- Decide if mobile, desktop or tablet is your priority. One design to cater to all needs is difficult to achieve, so you need to be clear of your priority.
- Design for conversion. Unless you are an inspiration site, your goal is conversion, so remember to make sure its very easy and clear to shop. Our first mobile responsive site looked great, it was a beautiful design, but it didn’t convert. We’ve now made adjustments to support our customers in actually purchasing as well as browsing.
- Site speed/page load is crucial. Mobile shoppers want a fast response and have little patience to wait for pages to load, so ensure this is a key metrics you keep track sight of in the design and implementation of the site.
#5 Be clear about your call-to-action
Nico Cabral, product marketing manager at Tech Armor
- Have a mobile-first mentality
With more traffic arriving to our site from mobile devices, it is unwise to design for the desktop and then find a way to “make it work” for mobile. Rather, the opposite approach is more beneficial to the overall goal of maximizing site conversion. Although this will add a little work at the beginning of the project, it challenges us to solve the major problems of space, file size, navigation first. We use Google Analytics data to see if traffic is coming from a specific mobile device more than others. In our case, we noticed that the Apple iPhone comprised nearly 60% of all mobile traffic with the remaining 40%+ dispersed in small amounts across a wide variety of devices. This makes the iPhone a prime candidate for testing our mobile environment.
- Variable Navigation
Large, drop-down “mega-menus” that are rich with content provide a fantastic desktop experience, but rarely transfer over to the mobile world. It’s very likely that two separate menu structures will need to be developed, with the mobile experience distilled down to the most important content in a clear hierarchy. While the menu should always be present on mobile, it should also collapse down to the smallest space when not in use (during product browsing and payment most importantly).
- Load Speed
Although this is an obvious consideration, it must be included in the conversation here. It is already common practice to have mobile-friendly image files that serve quickly through a CDN network, but what else can be done? Structuring your site code to load “above the fold” content first will give the user the illusion of faster page load. This could be as simple as placing CSS coding near the top of the page (to offer visual structure first) and Javascript coding near the end of the page (to offer interactivity last). Using 3rd party tools that optimize and minify your CSS and JS files will also reduce redundancies that could slow your page load.
- Design UI/UX for the Touchscreen
With limited real estate on the screen it’s imperative to utilize touchscreen features for a better overall experience. For example, swiping carousels offer an excellent way to browse categories, features, top sellers, etc. Our home page allows the user to swipe between devices they would like to protect in order to tackle the most important question first.
- Optimize for Conversion
We’re looking to eliminate hurdles towards conversion using clear calls to action like a “BUY NOW” or “ADD TO CART” button under product teasers on the home page. Adding a small, page-width, static “BUY” button (that does not scroll) on the bottom of product detail pages will help keep the option available as the user reads through the various features. This is something that we are currently exploring in our next development.
- Allow Easy Payment
Entering credit card info on mobile devices is excruciating. So leveraging mobile payment options (like Apple Pay) helps ease the pain. Our current site also offers other payment methods (like Paypal or Amazon Pay) provide users with a quick, accessible and secure option that gets them to the finish line easily.
#6 Optimize the UI such that it is actionable
Jignesh Gohel, founder at OLBUZ
It is always fund testing user experience and this is my favorite job while working with any eCommerce client. I also do most of my shopping through mobile website and this helps me to understand the different UI being designed by various eCommerce websites. Based on my experience and the result I have seen, I strongly recommend focusing on below points while working on redesigning your eCommerce website:
- Personalized product recommendation
Here I have published detailed article on Personalised Product Recommendation. The UI should be design such a way, it shows products based on user’s interest (that can be get based on purchase history / search / birth date / anniversary date etc). You need to create one custom section for each users that will contains products from personalized data.
- Less is more
Due to limited space, I recommend designing UI that lists the product with minimum but actionable information. Like; product name / images / price / ratings (with star) / Important features. As including lengthy product description will spoil the UI and can decrease the conversion rate. I know content is important for SEO purpose but that can be included in product detail page.
- Show offers / festival / call to action clearly
I have seen many eCommerce websites placing banners in footer area and user will have to scrawl down (if they do) to learn about offers. I am big fan of Amazon “deals of the day” promotion. One of the best example on how to promote offers to get maximum return out of it.
- Popup – No No
I am against displaying unnecessary pop-up, they distract customers. If you really want to display popup, make it meaningful and only display when require!
Apart from these, one need to keep monitoring the behavior of their users and accordingly make the changes in UI. Because, it will be different from industry to industry and same things may not work for all types of eCommerce business.
#7 Customize your product page to increase the conversion
Eytan Wiener, co-founder and COO at Quantum Networks
It’s all about the product page and conversion! It’s very important to have a fast loading site with high quality and speedy loading images , videos, and titles, as most shoppers won’t read the detailed descriptions or scroll below the fold on a mobile interface.
Many companies just use some type of mobile friendly plugin to make their site “responsive” but this is usually a mistake. This needs to be done in a more custom way as each site has its own nuances, and to carry that over to mobile and a condensed screen is a challenge. I recommend a new mobile template redesign that focuses on the core product information and still keeps the theme of the site intact. It’s also important to see how this new design renders on IOS and android phones and tablets.
#8 Remove unnecessary information from the page
Gabor Imre, eCommerce & Magento Blog editor-in-chief at AionHill
When the owner of an online store, which has been operating and generating revenues for years, comes to make a decision to have the store redesigned, it is important that he or she understands the “mobile-first” concept.
It is a commonplace that according to statistical data, mobile visitors by now have outnumbered desktop visitors.
It is a general but inappropriate requirement by clients that they wish to squeeze every element shown on the desktop interface, into the small display area of a smartphone, because they fear that if not all the details are seen, their products will not be attractive enough. When designing for mobile screens, a simple and clear user interface, proper sales funnel process and focus on achieving conversion are just as important to consider as with desktop screens, since you need to convince your visitors in a smaller display are in a very short time.
In this case less is more. It’s more useful to hide additional information behind a tab or menu title, driving more sales to the store owner in the end, than to show a screen crammed with information.
Additionally, you can have the most mobile friendly store (e.g. in the case of a self-hosted Magento store), but if it doesn’t load fast enough, users will bounce off. With mobile devices, people are less patient and want to see websites load quickly.
Therefore it is crucial to go for the maximum page speed. With proper caching solutions (Varnish + Reddish) and a professionally set up hosting environment load times can be reduced to 0.5 seconds.
#9 Take care of the website layout on mobile screen
Siddharth Bharath, VP of growth at Thinkific
The important thing is to understand that your layout will change when your site is viewed on a mobile screen. The typical desktop layout has images on the left and product pricing and description on the right. This means your CTA is above the fold, as is all the other pertinent information.
In a mobile view, this layout would not be possible. It would all stack, meaning you’d have images first and then you’d have to scroll below the fold for the rest. At this point the order of elements becomes important. You want your CTA right under the image, followed by product description. Then, you’d want another CTA for customers to avoid having to scroll back up to buy. Some sites make the CTA sticky so that it’s always at the bottom or at the top of the mobile screen. Be careful about their placement on the page.