Increase of transaction rate by 32% as a result of Perfumer website redesign

What are the design features that affect the e-commerce website KPIs? Denis Studennikov,
Head of UX/UI department at Turum-burum, briefed us on the details of the interface redesign for Perfumer, a B2B fragrance company.

About Perfumer and their business tasks

PERFUMER  is an official dealer of Reni bulk perfumery and the largest supplier of bottles in Ukraine. The brand creates original fragrances inspired by iconic perfumes.

The company has been active in the market since 2000 and belongs to the B2B segment, i.e. is wholesale-focused.

Concerned about the poor performance of their website, the business owners turned to us as experts on design issues and website usability improvement.

Our task was to create an online store, where:

• it would be convenient to place a big wholesale order;
• the users could easily track their orders;
• there would be an option of creating a recurring purchase order;
• each page would engage the user in online shopping as opposed to shopping on the phone, thus taking the load off the call center;
• the site would correspond to the identity of the brand that positions itself as a reputed, trusted, reliable business partner creating original quality products.

Looking for the course to be taken

Perfumery was a new niche for us. Even though we used to work a lot with related areas – beauty products and fashion – it was important for us to get a deeper sense of the subtleties of this particular business. That’s why the process of the project review and analysis consisted of several stages:

• UX audit of the website;
• Interviewing business representatives.

As a result of the analysis of web analytics data, Hotjar recordings and click maps, numerous issues in HTML coding and layout were identified. The company’s old website got obsolete, the users were often unable to find the information they needed because of the massive amount of poorly structured content: they couldn’t scroll to the key elements, didn’t understand how to place an order, had no chance to find out about the specific features of this or that product.  

We made a list of the critical interface mistakes that adversely affected the key metrics. Most of the issues were identified in the adaptive version, so a decision was made to redesign the website following the mobile-first principle.

Creating the project concept

As a B2B project, the site needed to be simple and minimalist. Besides the sales function, it should also serve as a catalog, so that the user could quickly receive as much information about the product as possible. In other words, the main thing on the site was content.

‍

‍

To highlight the selected minimalist vector, multiple custom graphic elements were used in the interface.

Perfumer demonstrated maximum involvement in the process: company managers and business owner Alexey took an active part in making decisions and harmonizing the concept, which let us quickly move on to the implementation stage.

We created layout designs for all the pages, and WebHome successfully developed and implemented them.

Interface solutions that were implemented

Let’s go through the key pages of the PERFUMER online store and once again see how fixing seemingly minor interface errors affects the quality of user-interface interaction, and therefore the website KPIs.

Home page: creating engaging entry points and structuring by means of of custom elements

We started off by fixing the most critical errors:

• The header was too big, taking up 1/3 of the screen.
• The burger menu contained only information blocks, with no option to log in to the personal account. The categories that should be available from any part of the page were available only on the first screen.
• Sub-categories in the catalog and on the product list page were different.
• Unusual location of the page elements: catalog, filters and sorting, search.
• No information about the viewed and favorite products.

Solutions:

The home page structure was enhanced, the entry points were optimized, an opportunity for the business to communicate with the users was created in the above-the-header banner: from the very first seconds of interaction the seller could now inform them on various promotions to motivate them to navigate further.

The header size was optimized, all the necessary key elements were added to it: “Viewed” and “Favorites” icons, access to the personal account, an opportunity to track the order quickly, the cart was accentuated.

As the niche is close to fashion, the logo was centered. Thus, we draw the users’ attention to the brand equity and history (the company has been in the market for over 20 years).

Navigation was designed as a horizontal menu in desktop and as a burger menu in the adaptive version. Prioritization of the blocks was revised; the promotion block was visually highlighted. With the help of custom icons, a particular accent was made on the appearance of the bottles for bulk perfumes, as their design was specially created for Perfumer by Arriba Studio.

We created a style for the banners and made a special guide for changing them. Now the store marketers can update their content themselves without ruining the general style of the website.

The entry points engage the user with catchy, emotional pictures, showing the products in their best light and letting the customers see the real picture.

Perfumer also offers special package deals with starter kits for those who would like to start cooperation with the brand. We studied the specifics of each package, and, similarly to the previous menu items, presented the information in a structured way, using images for better visual perception.

Special attention was given to the search tool. Convenient full-text search engine was developed, which lets look for products by partial match in the product name and ID.

Thanks to the flexible search engine, the selection process is easier and quicker.

Product list page: prioritization of filters and rational space management

After the home page we started moving further down the funnel and identified the following main issues on the product list page:

• improper operation of the sorting tool;
• space mismanagement in mobile, demonstration of only one product thumbnail in one line, even though there is enough space for more;
• filters are located on the second screen, which restricts access to them.

‍

‍Solutions:

Since there were a lot of filters to deal with, we placed them in the left sidebar. In accordance with the analytics data and observations of the company representatives, “New Arrivals” and “Bestsellers” filters were prioritized, followed by collection names, fragrance descriptions and designer alternatives.

In the upper part of the filter block a slot was added, where the user could immediately see which filters were applied, and quickly clear them.

Thus, we encourage the user not to terminate the session and keep navigating instead.

In the adaptive version two product cards were placed in one line. Attention was focused on the filter button. The filter bar opens in a separate window, which is minimized right after the “Apply” button is pressed. The users were also provided with an opportunity to add the product to their cart from the product list page.

Product card: block structure and accessible comprehensive information

The next step down the funnel is the product card. Its main issues that needed to be addressed to increase the conversion were as follows:

• In mobile the “Add to Cart” button was located too low, so the users just didn’t scroll down to it;
• The product description, which the users view most often, was also placed too low;
• Payment and delivery didn’t look like clickable links with additional information;
• Selection of the bottle color was too far from the image, the users had to scroll down to see all the available options;
• The users didn’t understand how to place an order and often contacted the call center.

Solutions:

The new product card featured a large product picture and an image of the designer alternative. Key information was structured and split into blocks for better visual perception. Call-to-action was accentuated.

Now any user, including dealers who sell these products, could use the website as a catalog and receive information about every fragrance. We also added arrows that let browse the catalog pages and quickly look through all the scents of the collection.

If in the old site version finding information about the product was rather difficult, now the first screen contains a link to the product description: the “Description” field with a “Read” link was added, which brings the user to the page section where the detailed product characteristics are located.

Thus, we help the user move down the funnel, increase page depth and session duration.

Cross-sell and upsell tools were added to the product card: “Similar fragrances”, “Fragrances in other collections”, “Frequently bought together”.

On the page with bottles an option of buying per box (as opposed to “per item”) was introduced. Now the user can add a whole box of bottles to the cart with just one click.

The user is encouraged to place an order in all possible ways.

Checkout

Checkout is the final step in the user path. It is very important to make this process as simple and convenient as possible so that nothing could prevent the user from completing the order.

Key errors that have been corrected:

• Full-fledged header and categories on the checkout page;
• No addresses of offline stores mentioned for “Click and collect” option;
• The order value is not indicated during the checkout steps, especially where the minimum amount for free delivery is mentioned.

Solutions

Simple and understandable checkout was created – it was split into semantic blocks and effectuated in three steps:

• personal data input;
• delivery and payment;
• order confirmation.

At the first stage of the checkout process registered customers log in using their phone number and password, and new clients must specify their name, phone number and email. Next, the user must pick the delivery and payment methods.

At each step the user is informed what will happen after this or that button is pressed. Thus, at the first step, instead of “Next”, the “Delivery and Payment” button was introduced, at the second step – “Confirm the order”.

Once checkout is completed, the user sees a thank-you page, where he/she is informed what will happen further. A link to the personal account is given with a remark that the order status can be tracked there.

Checkout is the final stage of the customer path, it’s very important that nothing could prevent the buyer from completing the deal there. That’s why we removed as many potential exit points from the header as we could.

Results of Perfumer interface redesign

We implemented many proven solutions in the design of the Perfumer online store:

• Maximum number of entry points to other website sections was concentrated on the home page.
• Information was structured on the website in general.
• Proper operation of search, filtering and sorting tools was ensured.
• Cross-sell and upsell instruments were introduced.

As a result of joint efforts of Turum-burum designers, WebHome developers and Perfumer representatives, not only was the interface made user-friendly, but the website KPIs were affected:

Transaction rate increased by 23.97% in desktop, and by 43.42% in mobile.

This once again confirms the fact that interface is an important part of business that needs to be constantly worked on in order to ensure efficient site performance, which will in its turn result in the conversion of traffic into company revenue.

‍