Lumier website redesign: creation of a user-centric interface that sells

How to give e-commerce a second living and boost business conversion after a long period of stagnation? What is the role of UX audit in developing a client-oriented interface? Based on Lumier's case, in this article, we will consider some common website drawbacks and ways to turn them into efficient growth points.

About the project

Lumier – is a Norway company that offers electrical equipment and lighting of premium quality at reasonable prices. The store has a broad target audience and provides its services to the B2B and B2C segments.

It is a family business that is relatively young, but can hardly be called a startup. The company’s owner Per Norman Nielsen has already set up several well-known brands connected with electronics. And now, with more than 40 years of experience, together with his son, he is working on a new entrepreneurial project – the Lumier store.

The business owners addressed Turum-burum to:

• Improve the website interface;
• Attract new and retain customers;
• Increase brand awareness;
• Boost e-commerce conversion rate.

UX Audit: defining redesign strategy and potential growth points

Our first step was conducting comprehensive research on the current desktop and mobile versions of the Lumier website. During the UX audit, we placed the main focus on analyzing the visitors' interactions with the interface and revealing any obstacles that distracted them from completing the desired action – placing an order. 

Based on the results of the usability audit, we also defined the most efficient website redesign strategy.

We opted for a Lumier website redesign using the ESR (Evolutionary Site Redesign) approach developed by Turum-burum, which lies in detecting current interface problems via analytics and their step-by-step illumination since the results of the UX audit revealed the following:

• The Lumier platform is relatively young and has little traffic;

• The website was functioning well, but there were some shortcomings in the interface that affected the user experience;

• There were some aspects of the website to be improved to make it more competitive.

In such a way, we didn’t create a new site design, but gradually optimized its current version. In the case of Lumier, this approach allowed us to manage the company’s budget efficiently and optimize its conversion in the shortest time possible with reduced risks.

Improving website usability: the most critical issues and their solutions 

Below are some of the most critical interface issues revealed during the website UX audit that had a negative impact on business KPIs and Turum-burum recommendations as to their solution.

1. Discouraging main page

Problem: The UX Audit showed that at least 40% of users who viewed the main page were returning users. At the same time, we revealed that for such clients, there were not many personalized ways offered to continue their interaction with the site. The website's main page was boring and didn’t motivate visitors to move further. Long product lists and endless text without visually separated blocks led to a high bounce rate, low engagement rate, and poor depth of website viewing.

Solution: Since 80% of consumers are more likely to buy from brands that offer personalized website experiences, we offered to add some client-oriented blocks to the main page. For example, for repeated visitors, it may be blocks “last orders” or “last viewed products”. For new visitors – different blocks with products grouped by usage, category, or popularity criteria. 

Considering the fact that 64% of customers feel emotionally connected to the brands they know, we recommended adding a section with popular and promoted brands that cooperate with Lumier to the website’s main page. Such a solution creates effective entry points and increases the customers’ engagement rate.  

Practical tip: The main page is a visiting card of e-commerce where users get acquainted with the company and its services. For that reason, a homepage must convey the main purpose of the site and provide various entry points to encourage visitors to move further within the website. It will help you decrease the bounce rate and boost the depth of website reviewing.

2. Navigation issues: uncomfortable and distracting menu

Problem: The menu for the desktop version consisted of 3 levels and was difficult to read. There was no indicator of whether the 2nd level category had subcategories, and some categories were written in 3 lines, so it was hard for users to find the needed category and product. It could cause a decrease in the number of orders and affect the conversion rate. 

At the same time, besides this gap, the UX audit revealed that the adaptive version of the Lumier website also had other issues with the menu. Thus, when users view a product list and want to switch to another one, they often use the back button. But in the Lumier case, instead of opening the previous page, customers ended up on the burger menu. And if they clicked the back button again, they ended up on a product list page of a category they hadn't even viewed before. Such things can irritate visitors and make them leave the website.

Solution: For the menu in the desktop version, we recommended letting the categories of 2nd and 3rd levels be opened by default and placing them within the available width of the screen.

For a mobile version of the Lumier website, we recommended returning users directly to the previous page that they viewed before with a click "back" button. Apart from this, since the top left corner of the website is the ‘primary optical area’, and it’s where the user’s eyes are first drawn, we offered to move the burger menu icon to the left. That let us split processes and unload the right side of the website, making the interface more user-friendly.

Practical tip: Since 37% of users say that poor navigation and design cause them to leave websites, it is pivotal to ensure website visitors don’t have obstacles on their way to a target action. So, go through the customer journey by yourself to make sure it's easy to navigate the website, even when visiting it for the first time. 

3. Product Catalog: uncomfortable filters

Problem: During the UX audit we revealed the following problems with the website’s catalog:

1. A long list of parameters, some of which were used rarely: Users needed to scroll for a long time to find the right filter;

2. No list of applied filters: Potential customers couldn’t see whether they have chosen all the parameters they needed;

3. No button to clear the chosen filters: Users had to look through all the options on the list to disable each individually.

All these interface issues had a negative impact on user experience since the product catalog was inconvenient, and customers had to spend much time finding needed products. It could result in a high bounce rate, low engagement rate, and poor conversion.

Solution: To make a convenient and effective filtration we recommended leaving only 5-7 most popular and frequently used parameters so as not to overload the page. We also offered to show the rest parameters in the form of a drop-down menu. Adding a search string for long lists of parameters is also a good way to make the interface more client-oriented. Another essential solution for creating a convenient catalog was including a section with applied filters and a button that allows users to clear applied filters.

Practical tip: Note that selecting all filters doesn’t make sense – users do not need to choose all parameter values because they see them by default. A long list of parameters is just an additional element that distracts users from target action and increases the bounce rate. So, based on the analytics, leave only the most popular and used parameters to ease and hasten the search.

4. Product list page: lack of purchase-encouraging elements

Problem: Since the majority of users are not professional electricians, their choice of products is mainly influenced by reviews from other clients, beneficial prices, and special offers. During the UX audit, we revealed that the Lumier product cards lacked this information on product previews. As a result, users had to learn the details of each product by themselves, which required extra steps and time. Because of this, it was difficult for customers to make quick shopping decisions and/or spontaneous purchases. 

Solution: We offered to add to card blocks the products’ overall ratings, information about special offers, and sales. Apart from this, we recommended adding key characteristics and an “Add to shopping cart” button. It helps users find the goods they need faster and motivates them to purchase. As a result, it may lead to an average bill increase and conversion rate optimization.

Practical advice: By adding labels that characterize the peculiarities or advantages of the products, you increase their value and attract users’ attention to them. So, it is a great idea to include blocks with reviews and ratings of the products and such categories as “Top Sellers”, “Recommendations”, “Discounts”, etc.

5. Product card: lack of details about delivery conditions

Problem: Details on delivery time, price, and method are essential for customers when making a purchasing decision. Since the previous version of the Lumier website contained no information about shipping conditions, users had to search for it on their own. As a result, most of them left the website because they lacked the time or energy to take extra steps, which affected the KPIs.

Solution: Add a visually separated block with delivery and payment method details. It is better to highlight this information with bright icons or make this section in the form of a list.

Practical tip: Nearly 50% of consumers are willing to wait within two days for delivery, and around 30% don’t mind waiting within 3-4 days. So, by providing fast shipping, you can increase the company’s revenue and conversion considerably.

6. Unstructured and cluttered shopping cart

Problem: The shopping cart didn’t have clear accents and was inconvenient. The quantity buttons for the mobile version were small and were easy to misstep. Moreover, the delete button was the main accent of the page. So, instead of calling for interaction and placing the order, the website page could motivate users to remove chosen goods. Consequently, the UX audit showed the high exit rate of the page. 

Solution: We recommended enlarging the quantity buttons, decreasing the emphasis of the delete buttons, aligning the price with the amount, and reducing the distance between the name and the price/quantity for both desktop and mobile versions.

Practical tip: For e-commerce a high level of cart abandonment means lost opportunities because 86% of online shoppers abandon items on their cards before the checkout – a final step of making a purchase. The reasons may be various and you need to take into account all possible issues and provide solutions for them.

For example, many customers add products to their shopping carts just to compare the chosen goods, review them lately, or get to know the approximate order price. In such a situation, you can reduce the cart abandonment rate by implementing “Add to favorite” and “Compare” buttons to the product cards.

Lumier website redesign: achieved results 

In this case study, we have highlighted just a small part of the work we have done. After the UX audit, the Turum-burum team made an inventory of nearly 60 recommendations written in Norwegian to optimize the conversion rate of Lumier. 

Thanks to high-quality UX audit and efficient cooperation with the client, we:

• Defined the most critical usability mistakes that influenced the KPIs;
• Were able to choose the most efficient redesign strategy for this particular case;
• Developed a client-oriented interface with intuitive navigation;
• Highlighted the benefits of the offered products;
• Placed appropriate accents;
• Provided essential information for making purchase decisions.

Lumier's case proves that some interface problems can’t be seen with the naked eye, but they may be the reason for the high bounce rate and low conversion. A usability audit is an effective way to find new growth points and e-commerce hidden potential. 

‍