If you’re not thinking about the user experience (UX) that your website offers, you do a disservice to your customers and leave money on the table. Discover how AdMerch resolved their UX issues and what you can do to emulate them.
Web design has come a long way since the dawn of the internet. If before it was acceptable to just have basic text and a few links, now your visitors expect to go on a journey.
They expect a user experience (UX) that makes the experience of navigating your website as easy as possible. Also, they expect something intuitive that does not require them to think about the actions they’re taking on the site.
If you’re not providing that type of experience, you’re losing out on conversions. A bad UX is enough to turn some visitors off so completely that they never come back to your website. In fact, 88% of online shoppers say they won’t go back to a site if they have a bad experience.
As such, improving your website’s UX is a priority because it leads to an increase in revenue. Thankfully, you don’t have to resort to guesswork to make these improvements.
We know that there are over 650 data-backed guidelines about what constitutes a good eCommerce UX design. And it’s these guidelines that we leveraged when working with AdMerch on their UX transformation.
The AdMerch UX Transformation
AdMerch offers a wide range of products to businesses. It has a particular focus on trolleys, storage, and safety items. These are all essentials for many types of business, which means the company is certainly in a good niche.
And with distribution centers set up all around Australia, they’re able to service the entire country. This gives them a competitive advantage over many similar suppliers. The company prides itself in providing long-lasting and cost effective products. And they’re happy to work with businesses of any size.
So… Why would they need to come to Blaze Commerce?
Though AdMerch offers excellent products, the company wasn’t achieving the level of conversions that it expected online.
The Problems
We quickly established that the problems didn’t lie with the products that AdMerch offered. They had a true focus on quality and had prices that competed well with others in their niche.
The core problem came down to their conversion rate.
Why was a company that offered such quality goods falling behind the industry standard in this area? No matter what AdMerch did, it just couldn’t seem to achieve the same level of online sales as its competitors.
That’s why we needed to run a deeper analysis to discover the problems that existed on the AdMerch website.
What Blaze Commerce Did
We identified the AdMerch site’s UX as being a potential contributor to the conversion issues. This led to us carrying out a full eCommerce UX audit to drill down into the specific problems.
This started with an examination of each page on the website. We stacked each individual page up against our guidelines for search, navigation, category layout, product display, cart and checkout.
Does the home page offer complete clarity in what the company does and what the visitors should do? Are all products properly displayed and categorized? Does the checkout page make it as easy as possible for a visitor to buy?
This initial analysis helped us answer all of these questions and more. It also helped us to see that the AdMerch site violated many of today’s best practices for usability.
And we discovered that the majority of these violations related to the mobile-readiness of the website.
The simple fact was that visitors weren’t getting the mobile experience that they expected. This is a huge problem considering the fact that mobile eCommerce grows year-on-year. In fact, stats indicate that shopping via mobile will account for 54% of online purchases by 2021.
Worse yet, 62% of online shoppers will abandon a website forever if it offers a poor mobile experience.
Given these facts, we felt confident that AdMerch’s mobile UX was to blame for its low conversion rates. We delivered a detailed report to the client explaining our discoveries. And then, we got to work on fixing the violations that we identified.
The End Result
Based on our findings, we conducted a comprehensive redesign of the AdMerch site, with a focus on mobile UX.
That redesign had a huge effect on the client’s conversion rates, which increased by a staggering 87.8%.
And that’s not all.
The amount of revenue generated per session also increased, taking the total revenue increase to 92.5%. This is almost double of what it was before we completed the redesign. And all of this came without the company having to spend a single cent on marketing.
It’s clear that focusing on ecommerce UX had amazing effects for AdMerch. But now, you’re looking to make improvements of your own, right? The following are seven tips for creating a better mobile UX.
Tip #1 – Add a Sticky Menu
Appropriate navigation is a key component of any mobile UX.
It’s not enough to offer a navigation bar at the top of the page. For one, that bar may not appear clearly enough if you link to several pages from it. Plus, you’re asking the user to keep scrolling up to that bar to navigate your website.
A better solution is to incorporate a sticky menu.
These menus take the form of a button, typically with three horizontal lines, that follows the user as they scroll. The user can tap the button to open up the navigational options, without having to scroll anywhere. Ideally, this menu should also contain a quality search function.
The latter point is especially important. Mobile users tend to use the search function often to save themselves time. Yours needs to be able to recognize queries and direct users to the appropriate pages.
Tip #2 – Include Feedback Animations
Small animations can bring a website to life, especially on the smaller mobile screen.
For example, let’s say that you have a checkout button on your website. You could incorporate animation into that button that makes it grow slightly larger when tapped. This shows that the user has executed the tap correctly and that you’re taking them to the checkout page.
You can also use subtle animations to draw the user’s eye to important website features. For example, you could have a small hand icon that shows the user they can swipe products into a basket.
These small animations ensure the website doesn’t look static and boring. Also, they can serve as mini-tutorials on how to use the mobile version of your website.
Tip #3 – Use Collapsible Product Descriptions
You may have a lot to say about your products, but mobile users could get frustrated by having to scroll through pages of text.
Using collapsible product descriptions is a good solution for your mobile site. Relay the main product benefits on the product page so that the reader can see them all at once. Then, offer them the ability to click on a collapsible description that goes into more detail, if they want it.
Tip #4 – Get Rid of the Carousel
Google’s data tells us that fewer than 1% of mobile users interact with carousel banners.
That’s reason enough to get rid of them.
From a UX standpoint, carousels create too much clutter on a mobile website. The images flash by a little too fast and prevent the user from being able to focus. Instead, stack the content and allow the user to scroll through it. This is a more natural action on a mobile device.
Tip #5 – Use Appropriate Font Styles and Sizes
Accessibility is the name of the game when it comes to the fonts used for mobile devices.
Avoid any stylized fonts, as these become difficult to read on a smaller screen. Furthermore, consider making all fonts 14pt size or more. This means the user doesn’t have to keep pinching the screen just to read your text.
Tip #6 – Keep Your Forms Short
Your visitors don’t enjoy filling out lengthy forms at the best of times. However, it becomes a real chore on mobile devices, where it’s difficult to click on small fields.
To resolve this issue, keep your forms as short as possible. Only capture the necessary data and ensure all fields are large enough to tap easily.
Tip #7 – Avoid Flash and Flash Video
You want your mobile website to load on all devices, which means you need to avoid Flash. This technology doesn’t load on every mobile device, with Apple products being the big issue here. If you’re not yet aware, neither the iPhone nor the iPad will show Flash content.
With over 2.2 billion iPhones sold since the device’s debut, coupled with 350 million iPads, that’s a huge audience. You can’t risk alienating them just because you want to use Flash.
Your ecommerce UX Is the Key to More Sales
That’s what AdMerch discovered when working with Blaze Commerce. Clearing up their site’s multiple best-practice violations led to a huge boost in conversions. And now, the company’s keeping pace with all of its competitors.
But perhaps you’re worried that your website has UX issues of its own. Following these tips will help you, though you’ll need a team with the technical know-how to implement them.
And before you do that, you need to know about the specific UX problems that your website has.
Blaze Commerce can help with both. Get in touch today if you’d like to find out more about our eCommerce UX audits and how they can help you.
