DataVinci Optimized The Entire Lideka Homepage
Resulting Conversion Lift Of 100%
Case Background: Phase 1
On the Lideka LED site, in the 1st phase of changes we made some sitewide changes to ease navigation and improve aesthetics. Some of these included:
- Optimizing the top Navigation section
- Giving users multiple conversion opportunities
- Streamlining site navigation and usability
This summary presents which sitewide changes were introduced in order to improve conversion on the website.
The website has a custom storefront and uses Vue JS codebase.
Lideka LED caters primarily to the younger generation, who can install LEDs in their living rooms, bedrooms, and other spaces.
Overall, the company sells solar-charged batteries and lights in various forms, as well as LEDs of various sizes, in the Netherlands and throughout much of Europe.
Challenges/Problems
• Top Navigation bar consumes 45% of screen space
The Top Navigation bar, along with the floating Call to Action ribbon at the top, took up a lot of space and obstructed the user’s view.
• Redundancy of data and unnecessary step within user journey
Identical data was present on the category and product pages. The category pages directed users towards the product pages, which ultimately led to a conversion. In this case, the category page was merely an additional step in the funnel and created friction among users.
• Delayed response on clicking CTA, also other clicks not disabled during this load time
As the site is built on a custom storefront which uses Vue JS, it has a slow load functionality and users during load could click on other options after making a selection which would cause the site to
• Opportunities for conversions not utilized well
There were several sections that added value and kept users interested, but there were no links to take users to the next step when they were most interested.
Implemented Solution
• Reduce the Search Bar width on the top navigation bar
Original
Variant
The top navigation bar and the search bar is a convenient way for the users to navigate throughout the site. The other options had to be positioned downward in a different section entirely because the search bar was wide enough to take up the entire section.
By reducing the width of the search bar, it was possible to remove a banner section and give users more page visibility by placing the items below the search bar in the same section of the top navigation bar.
• Optimize the burger menu width
Original
Variant
It’s crucial to present the burger menu options succinctly so as not to interfere with users’ ability to view the page.The dropdowns on the site’s initial iteration filled the entire screen width, making it impossible for users to view them.
The user can navigate more easily and can see where they are on the website by adjusting the menu so that the columns are placed closer together and the white background does not obstruct user view.
• Enhance Top Navigation bar display
Original
Variant
As was already mentioned, the top navigation bar interfered with users’ ability to view nearly 40 to 45 % of the top of the page.Users were unable to easily view the page’s content as a result, which increased conversion process friction.
Since this section was essential on the homepage , we came up with a solution to make the background transparent so that it would display both the options in the top nav section and the contents of the page. Due to the overwhelming number of options it contained, this section was made non-floating because it was not necessary for it to be on the product page.
• Adding a loading screen for page load
Original
Variant
The site is custom-built in such a way and uses relative frameworks that it has a bit of a delay in response time when a user clicks Add to Cart. Users would become confused and click on multiple alternatives during that period because they weren’t disabled, generating a load or an irregular response.
In the variant, all other options were deactivated and a loading screen with a luminous brand logo and a black background was added so the website could get time to react to the user’s query.
• Introducing Multiple Call to Action buttons
Original
Variant
The website offered a good amount of interesting and interactive content, but consumers had little to no understanding of how to advance in the funnel because there were no cues to let them know.
Giving customers several options to buy the product is good for sales. To make it easier for users to go at their own pace, Call to Actions with distinctive colours were added to key parts in the variant.
• Restructuring the funnel to improve the user experience
Original
Variant
Depending on the user’s choice, the top navigation bar led users to the category pages and subsequently to the product pages. Separate size variants had different product pages.
However, this area of the pages worked as an additional step in the conversion process for the users. It didn’t offer anything unique as well,. In the revised version, users were then sent to the product pages where they could choose from product variants using radio buttons.
Case Background: Phase 2
In the second phase, we concentrated only on the homepage and tried to make it more conversion-oriented. Some of the changes included –
- Revamping the above the fold banner
- Improvements to the category slider
- Eliminating Duplication
The improvements to the homepage are summarised here in order to increase website performance.
The website has a custom storefront and uses Vue JS codebase.
Lideka LED caters primarily to the younger generation, who can install LEDs in their living rooms, bedrooms, and other spaces.
Overall, the company sells solar-charged batteries and lights in various forms, as well as LEDs of various sizes, in the Netherlands and throughout much of Europe.
Challenges/Problems
• Above the fold not utilized to its full potential
The banner present above the fold was dim, not attractive enough and had no value propositions or call to actions whatsoever on the first glance
• Category Slider not sized properly
This part had material presented utilising a lot of width, large graphics, and each column that was wider than necessary and was overwhelming for users
• Redundant Sections on the homepage
On the page, there were multiple sections with repeating infographics and content, that may have annoyed and confused the customers
• Single background color failed to highlight some important sections
It was challenging to read and comprehend the text due to the black background of the homepage and several of the section’s features which were mentioned in dark colors as well
Implemented Solution
• Improve the above the fold on the homepage
Original
Variant
When compared to modern website standards, the original above the fold had a dimly illuminated video playing inside of a frame that wasn’t full width. Additionally, the call to actions were placed below the fold, requiring the user to scroll in order to reach them.
In order to prevent the material from obscuring the video, the current version contains a brighter movie that demonstrates the usability of the LEDs as well as a header hook and call to action with a distinctive background and visual cues placed atop a transparent overlay.
• Enhance the category slider functionality
Original
Variant
The category sliders were not only wide enough and the photos were large, but the slider also concealed two categories because not every customer used the slider capability. Customers would have to click the arrows to reveal the remaining categories.
In order to accommodate more columns into the same space and give customers greater visibility, each column in the new version slider was condensed and the images shrunk.Each of these cards now has a hover effect that makes the product details visible over a transparent background when the user moves their mouse over it. A call to action button is also always present for each column.
• Replacing the redundant sections with an engaging creative
Original
Variant
The recurring sections wasted valuable real estate on the homepage, caused confusion among customers, and were less effective on the homepage because there was no active Call to Action nearby.
In contrast, this part could be used to highlight the product’s benefits and how they improve the lives of the users. Such a creative was substituted for a repetitive portion on the homepage.
• Alternating background color on the homepage
Original
Variant
The black background of the homepage and some of the section’s elements that were mentioned in dark colours made it difficult to see and understand the text. Due to the backdrop, some of the images and significant components on the website were also not highlighted.
For some sections, a brighter backdrop will not only improve the aesthetics of the website but would also draw attention to the key elements of the page and let users know where they are on the page.
Conclusion
Based on the conducted experiments on the proposed homepage variants by our team, it is evident that optimizing the homepage had a positive impact on the conversion rate. Lideka witnessed notable improvements in user engagement, a more enhanced user experience, and ultimately achieved higher conversion rates. These outcomes clearly indicate that investing effort in homepage optimization can yield significant benefits for businesses. By implementing effective strategies to optimize the homepage, companies can effectively engage users, enhance their browsing experience, and successfully convert them into customers. Therefore, it is recommended for organizations to prioritize homepage optimization as an integral part of their overall conversion rate optimization strategy.
