Shabo website redesign: new UX/UI design for conversion rate optimization

Denis Studennikov, Head of UX/UI at Turum-burum, explained how a website redesign can increase the conversion rate of an online store. How can UX/UI design solve business problems, improve customer loyalty and attract new users? Read on to get practical tips on how to optimize the conversion rate of an online store using the example of Shabo's website redesign.

Project details and tasks to solve

Shabo is a Ukrainian wine company founded in 1946, one of the leaders in the Ukrainian wine industry. Today, Shabo has its own vineyards and a modern winery, with its products sold in many stores and restaurants across the country. The company uses only natural ingredients and traditional technologies, ensuring high-quality products.

The previous website design did not meet the new business objectives and did not fully reflect all the features and additional services of the company. Therefore, Turum-Burum's main task was to develop a new concept and structure for the website to demonstrate all the company's advantages, reveal the brand features, and focus on wine sales through UX/UI solutions. After all, the range of wines is quite extensive, including both fine and budget wines.

Redesign process: the journey of improving the Shabo website interface

We divided the website redesign process into several stages and iterations. To ensure the most positive outcome, we:

• Conducted interviews with business owners and corporate marketers;
• Created a consolidated list of requirements;
• Studied product and company features;
• Analyzed the market, competitors, and target audience;
• Conducted a usability audit and analyzed the existing site's analytics;
• Created an updated content architecture;
• Developed mockups and prototypes;
• Created a new UX/UI design of the website with adaptive design to provide a better user experience for mobile customers.

Below you can learn more about the stages of the website redesign with practical examples of the UX/UI solutions we implemented.

UX audit and new concept development

First, we conducted a detailed UX audit of the Shabo website to identify flaws and barriers in the user journey, including:

• Website stylistics did not convey the brand's vision and mission;
• Poorly structured navigation and catalog made it challenging to find the right product;
• Non-adaptive site design increased exit and bounce rates for mobile users;
• Key pages (home page, product page, shopping cart, and checkout) were cluttered with unnecessary information and blocks, creating barriers to purchase.

Based on the research, analytics, and website design principles, we developed a redesign strategy that included the creation of a more user-friendly and intuitive interface. The new version is to provide a better user experience and make the ordering process smooth and clear.

Revamped structure to meet new business goals

Based on the analytics data, we developed an improved and optimized site structure:

• A more attractive and functional interface;
• Quick and easy access to information about the company and its history;
• Emphasis on the company's benefits, product range, and services.

Homepage

The homepage is where users get acquainted with the brand, the company's product range, and services. The previous homepage UX/UI design had an unstructured information architecture, was overloaded with banners, and did not communicate the company's benefits.

We structured the content on the site homepage and unified the format and style to emphasize the brand identity.

We also used UX/UI solutions to draw users' attention to the company's additional services. In fact, not only can you buy wine and spirits on the Shabo website, but you can also sign up for wine tastings and excursions. That was not obvious to users on the previous site version.

By adding blocks about the company and additional services, we informed users about the company's non-obvious services and emphasized the benefits of the brand.

Website navigation and filters

Easy navigation, a structured catalog, search, and filters are essential parts of the updated design. Based on the analysis results, we developed and improved the structure of the menu and catalog, and set up filters and site search based on the most popular user requests to make product selection faster and easier.

Product page

Before the redesign, the product page contained a lot of text information, which made the page cluttered and not conducive to making a purchase decision. And on the mobile version of the site, the page was too long and awkward because there were no fixed buttons. As a result, users had to scroll long enough to return to the purchase block.

We prioritized and structured the information on the page so that the user could quickly access the most critical information for making a decision. We also added visualization elements to make text information more readable.

We also added useful cross-sell and upsell tools with discounts in a single ecosystem to increase the average check.

Category listing page

In the previous site version, the category listing page was uninformative and overloaded with numerous product items.

After the site redesign, the category listing page includes the following:

• A quick product preview with main features and important product details that appear when the cursor is over the item;
• The ability to add a product to the cart without opening the product page;
• Quick search by the most popular user requests according to analytics;
• A quick filter for selecting wines by grape variety, color, flavor, food pairing, etc., to simplify search and choice.

Checkout page

The checkout process should be simple and convenient so that a customer can complete the purchase as quickly as possible, with order details clearly visible.

The usability audit and analytics data revealed several flaws in the checkout page, including the following:

• A poorly structured and illogical sequence of blocks;
• Too many fields to fill out;
• Duplicate information that distracts the user;
• The “Checkout” button is too low on the page.

We developed a new page structure, reduced the number of form fields, removed duplicate information, and moved the block with products and the “Checkout” button higher so that customers could complete their purchases without scrolling.

‍‍

Results of Shabo website redesign

Thanks to the close cooperation and involvement of the client's team, our partner's team of developers Linecore, who accurately and professionally implemented all our UX/UI solutions, and our team, we succeeded in achieving the desired result with minimal iterations:

• Developed both commercial and non-commercial pages of the site.

Thus, the user can easily get acquainted with the manufacturing company, its history and all available services. In this way, not only do we build the brand, but we also increase the level of trust and customer loyalty.

• Optimized site navigation and customized filters.

Sophisticated site navigation and customized filters shorten the user journey and speed up the search for the needed information and products.

• Added upsell and cross-sale tools.

Added “You may also like” and “Save money together” blocks to the product card and emphasized the ability to purchase gift wrap to increase the average check.

• Structured the category page.

The user can view key information about the product and add it to the cart without going to the product card, as well as filter products using quick filters.

• Developed and optimized the site's adaptive design.

The previous site was poorly adapted for mobile devices, which negatively affected the conversion of the online store. Therefore, it was critical to develop a mobile-friendly website design that would meet the needs of both users and new business goals.

The new Shabo website design has a much more modern and fresh look that better communicates the brand and improves the user experience. This concept allows the brand to better develop its own spirits ecosystem and build a loyal community of Shabo product connoisseurs through the website.

‍