Case Study: eCommerce UX design — 10 steps to increase conversion rates by 25%
All Insights

Case Study: eCommerce UX design — 10 steps to increase conversion rates by 25%

March 2022

eCommerce, UX Design

7 min reading

Many eShops, regardless of their success or size, are stuck in a trap of conversion rate stereotypes, which impedes their business performance. Some think that out-of-the-box UI solutions delivered together with their eCommerce platform are enough for optimal work, and that no tweaks are needed. There is still a widespread belief that the program platform is the most important for eCommerce business, and UX doesn’t play a key part in its success. Thinking like this is a fatal mistake, because clients won’t tolerate any inconveniences and disadvantages in eShop UX design in the modern ultra-competitive market. They will simply switch to competitors who offer better service.

Others, who value UX design more, try to copy particularly appealing UI patterns from successful competitors, trying to find a solution at random. Such an approach is costly and rarely brings anticipated results – UI elements of an eShop should be perceived holistically as a system that shapes overall user experience, not as different parts. The case is that clients don’t think of an eShop and their experience as separate parts. They think of it as a continuous process that they rank as a whole. That’s why eShop UX design improvement should be approached systematically.

Modern UX design is a key competitive advantage for eCommerce. The availability of eCommerce platforms has rendered digital business more accessible to a broader range of companies, which has resulted in harsher competition. Anyone who takes eCommerce lead conversion and retention rates seriously should pay extra attention to UX design. User experience improvement is not just about using UI patterns. It is also about improving clients’ shopping satisfaction, which combines the number of available shopping opportunities, an intuitive interface, and exceptional service provided by the eShop.

In this article we will share ideas on how to optimise eShop conversion rates, generally improve eCommerce UX design based on our experience with developing two multimillion-consumer electronics eShops, Bite MNO’s website and RD Electronics eShop that yield in conversion rates rise of over 25%.This brings us to an important question. If the client type is completely different for each product; if the retail shopping experience is different, and even the ownership experience is different… why, then, are the eCommerce experiences of contrasting brands — the low-end, mid-tier, and high-end — so similar? Why are very different customers being treated the same across eCommerce websites?

Bite online store and telecom
Bite online store and telecom
RD Electronics online store and retail
RD Electronics online store and retail

1. Conduct a website UX audit to determine customer conversion bottlenecks and UX design issues

The simplest but most important step you can take to reveal bottlenecks in your shop's UX performance is to conduct a UX audit. To do it, you can choose from various user behaviour tracking solutions, like Hotjar, Yandex Webvisor etc.

For example, in our work for Bite telecom website UX improvement, we analysed how customers used the current website, and identified obstacles on their pathways. What missing features might their behaviour imply? If we noticed that customers clicked on certain static page elements or sections that may be interpreted as leading to more refined or linked information, we looked for ways to improve the user experience.

The heatmaps, scroll maps, and user mouse tracking allowed us to understand website usage and improve its functionality. For example, we understood that we had to rework the cart to enable users to change the colour of the products, vary the secondary characteristics and alter the leasing terms. Also, the clicks heatmap helped us to identify the most popular sections of the product catalogue. The scrolling map helped us see that most users didn’t scroll for long enough to see essential items located “under the fold” of the page on some pages. The mouse tracking assisted us in improving the mobile version of the plan selector page, giving additional insight and helping us to hypothesise more elaborate solutions.

2. Organise in-depth interviews with the customers

Interviews with real clients are a perfect source of information about user experience. For a small reward like a gift card, you can conduct in-depth interviews with multiple clients to understand the context they use your website, what points they can remember, and why they like the website. Such interviews can help you get a broader vision of how clients look at your eShop’s functions and the company’s services as a whole.

Here are a few ideas on conducting a proper in-depth interview

Every good interview has something in common:

  1. Open-ended Questions

    Questions need to be worded so that respondents can reply in detail about the topic, not just answer “yes” or “no”. Many open-ended questions begin with “why” or “how,” which gives respondents the freedom to answer the questions using their own words.

  2. Semi-structured Format

    Although it is essential to pre-plan the key questions, the interview should also be conversational, with questions flowing from previous responses when possible. This is why it is called an “in-depth” interview. For example, if an interviewee remarks that “The elections are approaching,” an appropriate response would be, “How do you feel about the candidates involved?”

  3. Seek Understanding and Interpretation

    It is important to use active listening skills to reflect upon what the speaker is saying. The interviewer should paraphrase what was said, to let the speaker understand that the message conveyed is the message received. Reflecting emotions from the message back to the speaker to better understand the emotions behind the interviewee’s words.

  4. Recording Responses

    The responses are typically audio-recorded and complemented by the interviewer's written notes (field notes). Written notes include observations of both verbal and non-verbal behaviours, as they occur and immediate personal reflections about the interview. In sum, in-depth interviews involve asking questions and systematically recording and documenting the responses to probe for deeper meaning and understanding.

An in-depth interview consists of seven stages:

  1. Thematizing

    Questions need to be worded so that respondents can reply in detail about the topic, not just answer “yes” or “no.” Many open-ended questions begin with “why” or “how,” which gives respondents the freedom to answer the questions using their own words.

  2. Designing

    After you determine what you want to know, you should design a way to elicit this information through the interview process. An interview guide that includes the key topics and questions will be your formalised plan for collecting information. It can be helpful to focus on topics that are important to explore, maintain consistency across interviews with different respondents, and stay on track during the interview process.

  3. Interviewing

    In the beginning of the interview, it is important to make introductions, explain the purpose of the study, and put the respondent at ease. Your main responsibility is to listen and observe as you guide the respondent through a conversation until all of the important issues on the interview guide are explored.

  4. Transcribing

    Transcribing involves creating a verbatim interview text by writing out each question and response using the audio recording. The interviewer’s side notes should also be included in the transcription and properly labelled in a separate column or category.

  5. Analysing

    Analysing involves re-reading the interview transcripts to identify themes emerging from the respondents’ answers. You can use your topics and questions to organise your analysis, in essence synthesising the answers to the questions you have proposed. If the interviews raise more questions than they answer, more interviews may be necessary to examine the issue at hand properly.

  6. Verifying

    Verifying involves checking the credibility of the information gathered, and triangulation is commonly used to achieve this purpose. Triangulation involves using multiple perspectives to interpret a single set of information. A simple way to use triangulation in a study would be to have two colleagues read and analyse the same set of transcripts and then compare notes. If the notes agree, then the information is credible.

  7. Reporting

    Finally, it is important to share in-depth interviews with stakeholders through a written or oral report. These reports should describe the results and how the results will shape future work.

3. Use eCommerce UX design best practices

Today, guidelines and research on the effectiveness of UI patterns are available to purchase. Utilising them, you can avoid reinventing the wheel, and instead implement proven user-tested solutions, saving your budget from an expensive trial-error method and improving your eShop UX design. Such guidelines usually consist of hundreds of pages, and require time and effort to find the necessary ones and put them to use. These hints can bring good results by themselves, but to provide a solid user experience, you have to look at them systematically. That’s why we strongly recommend hiring a company that has experience in translating the best design practices into conversion rates methods that are suitable for your eShop.

4. Research your eCommerce category for good UX design ideas

Clever use of successful UI elements in your category is a great source of ideas for improving your website’s conversion rates. The industry doesn’t stay still, and every day new successful tricks in eCommerce UX are discovered. Studying rival experiences will allow you to identify methods you can incorporate in your solution. It goes without saying that these working design methods should be internalised and become a part of your unique UX design system, not stay as fragmented examples. Look for the tools and techniques that augment and amplify your existing and best-performing elements for the most profitable user categories (more about them in the next section). It doesn't make sense to copy everything that looks non-standard just because of its novelty. Implement only features that fall organically into your UX thinking and make the product more effective.

5. Develop CJMs and customer conversion rates improvement hypotheses

The previous sections should have granted you a deeper understanding of the problems of your current eCommerce shop, and highlighted some possible solutions. To put them in context and evaluate from the user's point of view, you can develop a CJM, which will successively describe the steps in the customer’s journey and allow you to combine all ideas into one common experience. A good guide for approaching such a task would be to draw up hypotheses for improving UX for different categories of users.

Browsers

A browser is a user without a clear and precise need, browsing different categories and deals out of idle and non-shaped interest. They look for interesting products or good offers. Sometimes it is possible to make a sale to those just wandering through, provided you can stimulate their interest, but keep in mind that many of them are simply attracted to the social interaction of shopping and have no intention of making a purchase. They may benefit from improvements in the following sections:

Clear and precise navigation

Work carefully on developing effective mega-menus structured based on how users group products in categories in their minds. User polyhierarchy menus to satisfy different user types.

All products page

Provide a list of all products grouped on a single page where the customer may browse a product category they might find interesting.

Popular and similar items

Use popular and similar items blocks to help customers navigate to alternatives they may find interesting, without any cognitive effort.

Researchers

These customers are keen to understand product details and compare characteristics. They look for the best available offer without a clear need. For example, they can be interested in one product but buy another or several ones that seem interesting. This consumer segment generates significant revenue for eCommerce shop owners. This type of consumer is usually receptive to upselling, and can become loyal if products and services meet or exceed their expectations and desires. They may benefit from improvements in the following sections:

A comparison tool

Design and implement a powerful and easy-to-use comparison tool, which would allow the customers to understand key differences between the products quickly. Allow them to view only differences in the compared products. Naturally, such a feature depends heavily on your product description and data structure quality, so design these carefully.

On-site search

Make the on-site as powerful and easy to use as possible. We created the RD Electronics website search, which simultaneously provides results in a category, vendor, and best matching product. Pay great attention to the most searched items by analysing the keywords and search intent, and constantly improving the search results.

Bargain Hunters

These customers get a kick out of buying an inexpensive product, especially if the deal seems like a bargain to them. Most likely, they won't be swayed by upselling techniques, which may cause them to move on. This type of customer has minimal potential to become a loyal customer, unless it's part of your business strategy to offer the lowest possible price points at all times. This customer also rarely, if ever, makes purchases on impulse. Advertising sales is the best way to appeal to this customer group.

Clever discount strategy and discount block placement

Work on establishing a thorough discount strategy using email campaigns, closed sales, timed sales, seasonal campaigns, etc. Develop them as one cohesive system where every component supports the rest. Think about equipping major views on the site with an organically fitting sales-oriented block, especially on the category, home, product pages, and add to basket slip and the basket itself. Use tags to mark product cards in the category pages as being on sale.

Product-Focused

These users come for a particular product and are solely focused on it. Although they generally make purchases decisively and quickly, they're easily lured away by the competitors once they find what they're seeking. However, it is possible to convert them into loyal customers. They often have practical questions or concerns that can be addressed with specific sections on the website.

Product description

Along with the same thinking used to develop a great comparison tool, a sharp, complete and no-bullshit product description is the key to enticing a curious researcher and making them want to acquire the product.

Financing options

Make financing information easily accessible and provide all required hints about availability and ease of use vividly apparent using superior UI design.

Delivery options

Most product hunters compare not only prices but delivery costs and times. Provide plenty of ways to get hold of the product, from pick up in the store to courier delivery. For the store's pick-up, invest in an easy-to-use UI that allows users to find the nearest shop without any cognitive effort.

6. Prioritize UX design ideas and develop a prototype

It’s a good idea to prioritize the list of all the possible UX design improvements you came up with to focus your design effort on the most crucial features first, develop an interactive prototype and add secondary functionality to the prototype later. This will help you arrive at major improvements in customer conversion rates faster. It’s essential to develop an interactive prototype and emulate UI functionality to be able to test it with the actual customers or UX testers. From Axure, Adobe XD to Figma, there are many tools to achieve it, and you can pick the one that suits your team or business the best. We use Figma to establish a convenient design and communication environment and develop advanced UI animations to create high-end interactive prototypes.

7. Testing your UX design ideas

The best way to validate your conversion improvements ideas is to test them on real customers or UX testers. In both ways, you implement it by presenting the interactive prototype you’ve developed to a group of users and asking them to perform specific tasks to see how they navigate the site, how easy they locate certain features, and work with the contents. You may also ask about their feelings during the experience. This will give you a deep insight into the effectiveness of the design. You may perform the tests by filming the user on video if tests are done in a lab environment. Alternatively, you can deploy an automated service with remote UX testers that would allow for high cost and time savings.

A/B testing

If you have several competing design ideas for a particular UI element, you may design a prototype for all of them and test all versions with the UX testers by asking them to use each option and share their opinion about them. It makes sense to test three or fewer design options. Otherwise, the testers will find it difficult to focus and understand the differences among them, and the quality of your testing will deteriorate significantly. Five testers are usually enough to test the design, and a higher number of testers won’t yield better results.

A/B testing example: menu for a consumer electronics eShop

When designing the main navigation menu for RD Electronics, we weren’t sure which navigation menu layout was the best. We have several working hypotheses: a vertically aligned menu expanding either fully or gradually or a horizontal drop-out menu. To find the best, we measured how fast and easily the UX testers arrived at the required place in the menu by designing the interactive prototype and setting up the UX test session.

A/B testing example: MNO data plan selector

We made three types of plan selector page for Bite Telecom to choose the best working one, both on desktops and mobiles. To understand which style users prefer, we conducted a UX test by showing the participants our design options at random and asking them questions. We focused on ease of data plans perception. We asked specific questions to force respondents to shift between several customer perspectives in the test process and choose a data plan accordingly.

8. eShop visual concept testing

If you have several equally good design concepts and cannot decide on one, an effective way to resolve it is to combine A/B testing technique with a five-second test. You show the competing concepts to the testers for five seconds only. This doesn’t allow them to get deep into the detailed analysis, and they have to provide you with feedback based largely on their intuition and emotional reaction, which is commonly associated with liking or disliking the visual design. This way, you will remove the guesswork and select a concept that most of your clients will like.

RD Electronics online store various design concepts
RD Electronics online store various design concepts

9. Design all pages incorporating insight gained from the UX testing

Design all websites pages containing valuable ideas gained from the UX testing. When implementing UI design, don’t get carried away with advanced ideas: they will quickly fade away. Instead, think first and foremost about usability and how convenient it is to interact with the product. Pay close attention to the consistency of the design and deploy design components in the environment of choice. They will make the task significantly easy.

10. Launch, measure, and improve your eCommerce store's UX and UI design based on actual conversion analytics

Carefully measure and analyse how improvements in the UX design affect your website. Systematically monitor how customers use the new elements via mouse tracking and customer interviews. Try to find a way to introduce quick and easy fixes for certain elements which aren’t that obvious or intuitive for users to grasp. Remember that User Experience isn’t only about the visual design but also about overall satisfaction with the quality of the services you offer, so be in touch with your customers as frequently as possible and try to make sure you understand their needs.

Get the edge with award-winning design and development for your eCommerce store!