How Even Small UX Changes Can Result In An Increase In Conversion (A Case Study) — Smashing Magazine

Quick abstract ↬
In this text, we can be taking a better have a look at a design case research and focus on attainable the reason why its prospects abandon their on-line purchasing carts and what options are advisable in every explicit case.

Sunuva is a worldwide trend model for youths established in 2007. Today, their merchandise are featured in well-known luxurious retailer manufacturers, equivalent to Bloomingdale’s, Harrods, Barneys, Harvey Nichols, and different luxurious division retailer chains. This is a good instance of how — after conducting a UX audit — the crew and I at Turum-burum established modifications primarily based on analytics knowledge that may have vital outcomes.

Sunuva cell and desktop interface after the redesign. (Large preview)

UX Audit and Support Over the Implementation of Recommendations

Since our buyer, Sunuva, already had a development crew, our activity was to conduct an intensive UX Audit with additional help over the implementation of the suggestions.

Turum-burum was employed by the swimwear firm to do the next:

  • Perform an intensive website usability audit with every website element deeply researched;
  • Provide optimum options and explanations for the customers’ issues;
  • Be readily available to advise the shopper’s development crew for any additional clarifications.

We performed an intensive audit of the website through the use of knowledge analytics instruments, Hotjar recordings and click on maps and knowledge of identified consumer snag factors supplied by the shopper.

The means of the mission evaluation consisted of the next three principal phases:

  • UX auditing of the website (cell and desktop);
  • Interviewing enterprise representatives;
  • Providing additional help and recommendation on any additional clarifications.

After the audit was accomplished, we’ve accomplished the next:

  • Created a doc itemizing the issues for every key web page;
  • Prioritized all these points;
  • Provided a full detailed proposal of amendments with documented examples and indications of how every modification may enhance the consumer expertise.

Key Problems and Recommendations

The evaluation of the website metrics confirmed that the website had engagement indicators, site visitors composition, and the conversion charge for each new and returning customers alongside the bounce and exit charge had been throughout the regular vary for this phase.

Yet, we discovered a number of points that wanted to be addressed, such because the interface errors that adversely affected the important thing metrics and prevented prospects from changing. The details of progress embody:

  • Increase the conversion charge on the cell;
  • Increase the variety of views of the product element pages;
  • Increase the add-to-basket charge on the desktop;
  • Minimize the purchasing cart abandonment charge;
  • Increase the checkout completion share charge.

The most important factors that we discovered had been the next:

They are all outlined and described intimately under. Let’s dive in!

More after bounce! Continue studying under ↓Feature Panel

Catalog Structure

Problem

The catalog construction resulted within the product record containing a variety of blended merchandise. In flip, it grew to become tougher for customers to search out the merchandise they wanted. According to warmth maps, customers typically used filters — measurement (age) and gender, if it’s not specified within the chosen class. Those who’ve by no means used a filter had problem discovering gadgets on the record. According to our analytics knowledge, solely 37% of customers who seen the product record discovered the product they wanted, grew to become desirous about them, and determined to go to the product particulars web page.

A screenshot of the product list before changesLook on the product record earlier than modifications. (Large preview)

Recommendation

To ease the seek for the merchandise, quick tags underneath the product record with frequent teams (for instance, Boys, Girls, Baby, Kids, Teen; Shorts, Suits, Vests) needs to be added. Also, it’s advisable to point out an expanded record of sizes and gender filters by default, in order that customers can discover them rapidly and use them. This ought to shorten the time wanted for the search. In the cell, the filter button ought to all the time keep in a hard and fast place, whereas the consumer scrolls down the web page.

A screenshot of the page with fast tags on the product list in the desktop version of the siteImplementation: Added quick tags on the product record within the desktop model of the positioning. (Large preview)A screenshot with added fast tags on the product list on the mobile versionImplementation: Added quick tags on the product record on the cell model. (Large preview)

Users’ Mistakes

Problem

No error notification would pop up whenever users clicked on the “Add to basket” button without selecting a size beforehand. It made them go back, select a size, and click the button again.

Recommendation

Whenever users don’t select a size and click on the “Add to basket” button, the size list would open automatically, and users tend to shift their focus to it.

Implementation: Users not only receive an error notification but they will also be taken back to the product page so that they can choose the right size of the product.Implementation of the feature in the mobile version of the site

Incorrect Notification On The Checkout Page

Problem

Whenever customers go to the checkout web page, they might see a notification about some quantity lacking from free transport. This will make the customers depart the checkout web page and proceed purchasing. In this case, customers may by no means return to the checkout web page. According to our analytics knowledge, as much as 38% of customers by no means full the transaction on the checkout web page, and, almost definitely, that is the explanation why they by no means full the transaction.

A screenshot of the checkout pageThis is how the checkout web page seems earlier than the modifications. (Large preview)A screenshot with using heat maps on the checkout pageThese are the outcomes of utilizing warmth maps on the checkout web page. (Large preview)

Recommendation

It can be higher to not present the notification that some quantity is lacking from free transport on the checkout web page. Adding a progress bar within the basket or including an information message about free transport and all the main points ought to work significantly better.

A screenshot of the page with a shipping address(Large preview)A screenshot of the page with a payment methodImplementation: Users not solely see the step they’re in however get all the required details about the order, transport, funds, and so on., whereas nothing distracts them from ending the operation. (Large preview)

No Priority In Header Elements And Information

Problem

There was no precedence within the info and adequate variations within the visible accent within the header parts. The incorrect placement of the accent confused many customers. This subject ruined the shopper expertise.

A screenshot of the website with underlined header elements with no sufficient differences in the visual accentThis is how the positioning seems whereas conducting a UX audit. (Large preview)

Recommendation

  • Visually separate parts, equivalent to Currency, Wishlist, Search, My Account, and Basket.
  • Place extra emphasis on the catalog classes.
  • Align the foreign money, wishlist, search, account parts, and so forth with the brand. It helps customers give attention to the extra necessary elements of the positioning and shortens the time to seek for the required merchandise.

A screenshot of the website with separated and aligned header elementsImplementation: All the weather within the header and the knowledge was prioritized and structured which is able to assist enhance the shopper expertise (CX) and enhance the conversion charge. (Large preview)

Problem

It was troublesome to note the catalog classes within the burger menu and differentiate them from the data classes. Users needed to spend extra time discovering the required class and its gadgets.

A screenshot of the burger menu where it's difficult to differentiate between catalog and info categoriesThis is how the cell model seems earlier than the modifications. (Large preview)

Recommendation

It’s higher to visually differentiate the catalog classes from the data classes. Make much less emphasis on the data classes. It will assist customers to give attention to the product classes and quicker discover the wanted gadgets.

A screenshot of the burger menu with different colors between catalog and information categoriesImplementation: Changed the colours of the catalog classes and data classes by making the primary brighter to focus the customers’ consideration on them. (Large preview)

Absence Of “Recently Viewed” Blocks

Problem

There had been no blocks or lists with just lately seen gadgets and no fast “Add to basket” button. According to the analytics knowledge, customers can be 2.5 instances extra prone to return than to purchase items throughout the subsequent session. In this case, they’ve already seen some items and could also be prepared to purchase them faster. Users may not be capable to discover the gadgets once more or spend an excessive amount of time doing that. This drastically affected the conversion charge.

A screenshot of the website with no blocks or lists with recently viewed items and no quick 'Add to basket' buttonThis is how the web page seems earlier than the modifications. (Large preview)

Recommendation

Show the seen merchandise record. Add the “Add to basket” buttons on the product record playing cards, hover on desktop, and glued on the cell. It will assist customers discover the merchandise they’re desirous about a lot faster.

A screenshot of the website with added blocks of recently viewed items with product cards with fast 'Add to basket' buttonsImplementation: added blocks of just lately seen gadgets with product playing cards with quick ‘Add to basket’ buttons. (Large preview)

Not So Obvious Category Blocks

Problem

Users by no means clicked on the class blocks, as a result of the labels had been too onerous to learn, and it appeared to dam a part of the banner. That’s why it was onerous for customers to search out the required gadgets rapidly and took extra time to seek for them.

A screenshot of the website with heat maps where you can see that users never clicked on the category blocksThis is how the blocks appeared earlier than the modifications had been made on the desktop. (Large preview)A screenshot of the mobile version of the website with heat maps where you can see that users never clicked on the category blocksCategory blocks earlier than the modifications had been made on the cell. (Large preview)

Recommendation

Change the looks of the title and the blocks. Visually detach them from the banner, in order that customers know they’re clickable and result in the class itemizing.

A screenshot of the website after the title was added, and the category labels were made more visible and readableImplementation: The title was added, and the labels had been made extra seen and readable. (Large preview)

Results of the Work Done on the Sunuva Website

Our team has utilized analytic tools, session recordings, heat maps, and other customer data to execute their tasks and provide recommendations. As a result, our customer has reported an increase in the conversion rate and site traffic after nearly implementing every recommendation.

“Turum-burum’s work drove an increase in the client’s conversion rate and site traffic. Proactive and detail-oriented, they took the time to understand all of the available data to provide optimal solutions and explanations for the client’s problems. They were supportive and transparent throughout.”

— Jennifer Tully, E-Commerce Manager, Sunuva

How to Get Started with UX/UI Changes to Increase the Conversion Rate?

These are seven simple steps that you can follow in order to conduct a UX audit on your own that will help you find and eliminate some interface mistakes:

Steps
1. Follow the user’s footsteps.Make a purchase like you are the customer
2. Analyze micro and macro conversions.Using GTM and GA
3. Conduct audience research.What is your target audience portrait?
4. Conduct a technical audit.Is everything working on your website?
5. Check heatmaps and scroll maps.Hotjar and Plerdy could be helpful.
6. Watch session recordings.
7. Analyze feedback.(Hotjar, Survio)

After these steps are taken, establish several hypotheses on how your website could be improved and prioritize them according to their impact on conversion. Following that, start checking these hypotheses with A/B testing or measuring the changes in analytics. This process can be endless.

Converting a user who has already visited your site can cost your business much less than attracting new ones with the help of marketing tools. That’s why you should constantly improve the interface to meet new business goals, new market demand, and new user behavior patterns. If you can’t do this on your own, hire a team of UX/UI experts regularly.

Find Out More About UX/UI Agency Turum-burum

🇺🇦 Turum-burum, a UX/UI and CRO company from Ukraine, has over 12 years of UX/UI experience, and its primary focus is on e-commerce and SaaS projects. They influence key website metrics to increase clients’ revenue with the help of design.

They are Google UX Partners and take part in Retail Development Programs from Google in Ukraine. They cooperate with Baymard Institute, CXL, Hotjar, etc.

If you need any UX/UI or CRO services, check this Turum-burum’s presentation where you can find their contacts.

Smashing Editorial
(ah, vf, il, yk)

Leave a Reply

Your email address will not be published.