Increase of CR by 13% for Zlato.ua: UI/UX features specific to the jewelry niche

Find out 6 essential features to be taken into account when designing an online jewelry store on the example of Zlato.ua, one of the company’s most detailed project.

Zlato.ua Project

The online store Zlato.ua, 2019 RAU Awards winner in the nomination “E-commerce retailer of the Year in jewelry”, is a jewelry superstore with showrooms in several Ukrainian cities and over 500,000 online users monthly.

In March 2019 Zlato.ua representatives contacted Turum-burum with a request to redesign their website, since the interface had not been updated for a long time. The site got outdated both visually and technically, it no longer met the company’s business tasks and experienced difficulties handling new marketing activities.

Identifying the main issues and the best site redesign strategy

Having started with the analysis of the analytics and a UX audit, we identified the main problems influencing the key indicators of the website:

• Outdated style – the site looked old-school and didn’t meet the needs of the target audience;
• Narrow website design – the width change from 960 px to 1366 px was needed;
• Poorly designed mobile version – low mobile conversion rates;
• Low concentration of entry points – the website homepage didn’t encourage the users to go further through the funnel;
• Inconsistency of the website functionality with the new user behavior patterns (today, scrolling and swiping have become common in interfaces; speed and ease of an online purchase are user priority needs).

We also highlighted a number of Zlato.ua advantages that were to be taken into account and communicated in the interface:

• High level of customer orientation

During a phone consultation, the manager can even take a photo of a jewelry item put on his/her hand and send it to the customer’s messenger.

• Option of exchanging the product if it doesn’t fit for some reason

The customer can exchange an item bought in the online store, if its size, color or any other significant characteristic turn out to be wrong, even though according to the Ukrainian legislation, jewelry can not be exchanged or returned.

• Wide selection and availability of famous brands
• Flexible discount system
• Pick up locations in partner stores all over Ukraine, etc.

Based on the identified problems and growth points, we made a decision to apply the RSR (Revolutionary Site Redesign) approach, since the site had not been updated for over five years and was not meeting the business tasks, so radical interface change was more rational than its adaptation.

In the course of the project we worked in close cooperation with Zlato.ua – Marketing Manager, Project Manager and the development team were actively involved in the process. We were presented with a clear concept described in accurate epithets, timely provided with references, detailed cases of orders placed and user interactions with the current interface. Photo and text content was also promptly provided, as well as the feedback on the possible website pagination and introduction of certain elements. Besides, the Zlato.ua marketing team took their time to prepare detailed technical tasks and check the hypotheses.

Below are some of the UI/UX solutions that helped communicate unique features of the company to the user and correct the main mistakes.

Key UI/UX solutions and features specific to the jewelry niche

We had already had experience working with the jewelry niche, so when designing the interface for Zlato.ua we took into account both common behavior patterns of online jewelry market customers and individual characteristics of the project.

1. Style redesign

The old version of the website was performed in dark brown, which made the online store visually heavy and inconsistent with the needs of the young audience.

‍
When creating a new design, we opted for minimalist tendencies and made the interface more light-colored and “airy”. Jewelry items are visually quite catchy, so we tried to bring the product into focus. In order to preserve the connection with the old site, we kept some brown accents in the new version, too (lines, bars, spacers).

The logo in the center was removed, since it is a common trend for online stores aiming to emphasize their belonging to the premium segment. And our task was to design an e-commerce website that would attract a wider target audience.

As a result, the new style highlights the content and communicates the brand’s idea about the availability and prestige image of jewelry items. The site has become more convenient and easier to operate, since now it meets the modern design trends.

2. Homepage

According to the analytics, the landing page of the website was its homepage, but it wasn’t utilized to its full potential. One of the identified issues was low concentration of entry points, so we paid particular attention to different approaches to the information presentation:‍

• Thematic blocks “Special moments” were redesigned

If previously only Wedding and Engagement were in FOCUS, we have extended this list by adding Birthday, Baptism, New Year, International Women’s Day, Prom, New Baby, St. Valentine’s Day, etc.

We placed these blocks on the homepage, thus creating additional entry points. This solution particularly influenced the desktop engagement indicators:

the visit depth increased by 19%, and the average session duration – by 11%.

• A separate “Trends” block was created

The design of this element chimes with that of the company’s Instagram page. However, this block doesn’t take the users to the social networks, it brings them to the product card, thus creating additional entry points on the homepage. We borrowed this method from the fashion niche, where it had a positive effect on the user engagement.

This solution highlighted the brand orientation at the young audience, added colors to the content and diversified the presentation of information on the homepage.

The bounce rate among homepage desktop visitors decreased by 13%, the exit rate –  by 16%

• New navigation principles were created

Based on Hotjar records and analytics data, key product categories were defined and placed in the horizontal menu on the homepage. Then top popular user requests were identified for each key category

For example, for rings, the following parameters were identified: gold, silver, wedding, engagement, design, most popular, gemstones, stone color. A new parameter was added for earrings – type of lock, and for bracelets – type of chain links., etc.

A carefully designed and structured catalog enables increasing micro conversions, as it makes the search of the necessary item easier.

As a result, the conversion rate for the users who started their path from the homepage increased by 14% in mobile and by 1.5% in desktop.

3. Product list page

According to the heat map and scroll map analytics, specific compilations of products and brands, situated at the very bottom of the product list page of the old site, were the most clickable areas on this page. That’s why we completely reconsidered the parameters of their grouping.

• The customer’s attention was shifted to the product

In the old version of the product list page only three product cards fit in a row, since there were filters on the left.

The product list page is a shop-window of the online store, where the whole assortment should be presented, enabling the customer to concentrate on the product. For this, we introduced the “Hide Filters” option.

Thus, nothing distracts the customer from the selection process.

• The product selection process was simplified

We added a hover-preview featuring the main characteristics of the product when the cursor is placed on the item. The user can add the product to the cart or “Favorites” right from the product list page.

Thus, we made the product selection easier and faster, avoiding extra moves to the product card and back.

After the function of adding products to the shopping cart was added to the product list page, 5.27% of the site visitors started using it, which is quite an impressive number of users for a project of this scale. Thanks to this solution, their path to the target action became 1 step shorter.

4. Product card

This is a page, where the customers should find answers to all their questions regarding the product, its characteristics, payment and delivery terms, return and exchange policy, etc.

• Product image slick slider

During scrolling, the product image keeps following the user. Thus, the item stays in sight together with the price and the “Buy Now” button.

If there is a supplementary product to the selected item, the user who has scrolled to the end of the page will be offered to buy them together with a discount. The picture of the auxiliary product is then added to the slick image, thus forming an upsell offer.

• Grouping key product characteristics

The block with the product characteristics was made as informative as possible, still compact, so that the user could assess all the product characteristics right away. The block can be expanded and collapsed.

• Size calculator

A tool helping to figure out the right size of the product was added.

Such a tool is a demonstration of care for the customer, which increases loyalty to the store.

• Price tracking tool

Tools enabling price change tracking were added.

• Custom icons

On the product card the central focus was placed on the competitive advantages of the Zlato.ua online store. For this, a series of custom icons that catch the user’s eye and emphasize the affiliation of the store with the jewelry niche were developed.

• Quick order tool

To place an order, it’s enough to provide your phone number, after which you will be contacted by a manager, and the order placement will be completed on the phone.

These solutions helped increase the conversion of adding the product to the cart after viewing the product card by 22.5%.

5. Checkout

Previously the checkout page was very long, which often scared away the users. In the new design it was simplified to the maximum , the information in the order form was structured and split into semantic blocks by means of visual accents:

• registration/signing in;
• delivery;
• payment;
• comments to the order.  

A slick slider with the main order details was placed on the right.

As a result, the number of users who moved to the Checkout page and completed the checkout increased by 83.69%.

6. On-site search

The operation of the search box and prompts, appearing when the search query is entered, was improved. In the new design the user sees 4 suggestions in the search results – not only text, but also image, item code, full name and price, as well as the relevant catalog sections.

Search has become much more convenient, which is confirmed by the analytics data: the average visit depth among the users using on-site search grew by 22%, and the transaction rate from search increased by 33%.

7. Content pages

Another specific feature of the online store Zlato.ua is a big number of content pages: About Us, Delivery and Payment, Return Policy, Warranty, Pay in Installments, Packaging and Storage, etc. We gave particular consideration to them, elaborated design in detail, and created custom icons that highlight the ambience of the site for each page.

Results of the online store Zlato.ua redesign

Because of the specific nature of the commodities and purchase cycle, it is  the powerful marketing that makes jewelry niche projects successful. The interface should be a tool in the marketer’s hands, contributing to the improvement of the website performance indicators and sales growth. In order to increase the effectiveness of this tool, follow the below six tips for the jewelry niche projects:

1. Take into account the key search criteria

For most of the jewelry stores the main on-site search parameter is the product type: a ring, a bracelet, earrings etc. All the other criteria (e.g. who this product is meant for – men, women, children) are secondary, and this should be taken into account when developing the catalog structure and website navigation.

2. Place central focus on the product

Jewelry items are visually catchy and speaking for themselves, therefore it’s important not to overload the interface. It’s better to develop simple, light and welcoming design, not distracting attention from the product, but on the contrary, highlighting it. Follow this principle throughout the whole interface.

3. Highlight the key product characteristics – weight and size

It’s important to draw the user’s attention to the main product characteristics – weight and size – not just in the product card, but also on the product list page. For the convenience of users, a calculator can be created that will help figure out the right size of the product. Don’t forget to warn the customer that the size of the product can influence both its weight and price.

4. Show what the product looks like on a person

By demonstrating what a product looks like on a person you create an atmosphere similar to that in a brick-and-mortar store, where the user can touch and try on items.

5. Introduce tools to win back lost customers

In the jewelry niche people often abandon shopping carts. It’s a common practice for the consumers not to make a purchase during their initial visit to a website. That’s why, the completion of most of the target actions happens thanks to the well thought-out marketing strategy.

In order to make your marketers’ life easier, implement the price-tracking tool. It helps to get contact details of the potential customers and find out about their preferences. Then you can send these users letters with reminders about the products abandoned in the shopping cart, focus their attention on the advantages using remarketing, offer personal discounts in notifications, etc.

6. Offer an option of installment payments

This function is important for those who don’t want to pay the full amount right away. It is more convenient for the modern user to get the product first and pay for it later, and when it comes to jewelry, it is actually a common pattern.

When designing the online store Zlato.ua, 200 pages and their 60 states  were created. Beauty is in the details, and the Zlato.ua project is the best illustration of this statement – every tiny icon was customized by the Turum-Burum team in its course. As a result of coordinated work of Zlato.ua and Turum-Burum, a light-colored welcoming interface was designed, which emphasizes unique characteristics of the brand without distracting the customer from the purchase.

The conversion rate increased by 13% for the period “1 week prior - 1 week after” the website redesign, taking into consideration the homogeneity of traffic.

To achieve positive results, it is important to equally consider the specific features of the niche and competitive advantages of the business, find collaborative solutions within teams and constantly develop and improve the interface.

If you haven’t updated your interface for a long time, the website functionality has stopped responding to the tasks of your business, there are navigation issues, problems with on-site search, abandoned shopping carts, low average order value, then RSR should be your choice.  

A new design will be a perfect start for the project to break new ground and for the development of new marketing activities.

‍