Revamping Entire Homepage
Phase 1
Case Background
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.
Phase 2
Case Background
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.
Phase 3
Case Background
Changes in the 3rd phase were focused mostly on remodelling multiple product pages for effective conversions. This stage mainly involved adding or changing elements to improve the product page’s credibility and information. Changes on the page included –
- Introducing more pictorial elements
- Adding a value proposition on the pricing section
- Emphasizing on social proof
This portion of the deck is a summary of the changes made to the product page in order to improve 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
• Trust elements absent on PDP
Customer trust is a crucial quality that a page should have if it wants to increase sales. Certain components, which were missing from the page, are essential for affecting buyers’ trust.
• Uninsightful pricing section
The price is typically the deciding factor for visitors before they make a purchase. However, if the presented offer is not compelling enough, they will not be interested.
• Lack of customer motivation for upsell
Upsells are helpful for increasing overall revenue, and there is plenty of potential for persuading users to purchase the more expensive product variations and increase the average order value.
• Offer Badge Missing In Product Slider
Users frequently interact with the product slider because they want to see how the product looks. The mention of an offer here encourages users to act quickly.
• Overwhelming / unclear element placement
The presence of two call to actions could be overwhelming for users, and the text on several sections did not explicitly state that they were interactive.
• Text-heavy information on page
Users scan text content on product sites and do not read it thoroughly, which lowers the likelihood of conversion if there are no visual elements on the page.
• Absence of engaging elements and social proof
Customers are reassured by social proof that their purchases are secure and will undoubtedly improve their lives. Additionally, interactive aspects are crucial since they increase user engagement.
• Information on How to Use product hidden in the image slider
A specific section outlining the product’s usage is required for specialised products like these. Despite being on the page, this piece is tucked away in the product slider.
Implemented Solution
• Placing ascertaining components to the product page
Original
Variant
When it comes to boosting sales, building consumer trust is crucial, and word-of- mouth is the best possible way to do this. Customers always consider other people’s experiences before deciding whether a product is worthwhile.
The addition of a 5-star rating system provides new users with some assurance regarding the product because other customers like them have given it a rating. This increase in self-assurance may help increase conversions. The addition of trust badges alongside the CTA reassures users that the site is secure to use and has the potential to significantly increase sales. Users may feel more confident to complete the purchase if assuring language and trust badges are added, such as “we assure a secure checkout”.
• Improving the pricing section display
Original
Variant
The lack of a currency sign and even a saved percentage indicator in the default price section made it impossible for users to estimate how much money they had saved and made it unclear which ledger the payment would be made in.
A currency symbol is essential since it informs clients of the ledger where the transaction will be recorded. Clear mention of the bargain value and the strikethrough of the dummy price allows site users to calculate their savings, which may help them make a purchasing decision.
• Influencing potential customer for an upsell
Original
Variant
Sales benefit from upgrading customers because it boosts overall profitability and total revenue.So we included components to the product page’s updated design that may encourage customers to make more premium purchases.
Highlighting the higher and more profitable variants can nudge users to consider that variant. Thus, assisting in increase profitability. Selecting the higher variant as default can help lift the average order value, as people might consider going for the upsell. We also mentioned price per meter
• Adding offer mentions on image slider
Original
Variant
Including an offer or bargain, or something that is “X% OFF” or a badge indicating “SALE” may act as a psychological trigger for consumers and cause them to experience fear of missing out, which may increase conversions.
The percentage of money customers would save if they made the purchase immediately away is indicated on the image slider in the revised version of the page.
• Making the page easier to navigate
Original
Variant
Both the primary call to action section and the one in the floating banner had two identically sized and coloured buttons. Multiple alternatives with equal importance can be confusing to users. Similar to that, the testimonials section was clickable and a video appeared when it was clicked, but the required action was not specified in the button.
Add to Cart is the primary Call to Action button on the updated version of the page, and One click buy is a hyperlink next to it. Additionally, we inserted a “Watch Video” phrase inside the testimonial cards and highlighted it so consumers know it may be clicked.
• Optimizing feature benefits section
Original
Variant
Users typically scan text-heavy pages and don’t pay much attention to them entirely. Additionally, tick marks for feature advantages seem pointless and do not adequately highlight the exclusivity of these pointers.
Pictorial representations of the benefits are essential for a contemporary website and vividly describing product characteristics while retaining visitors’ attention, so we’ve included these in our variation. Also adding a header mentioning “THIS IS WHAT MAKES US UNIQUE” displays the brand prowess in the industry and persuades people to go for a purchase
• Adding dynamic elements for social proof
Original
Variant
A modern looking page with dynamic elements is crucial for lifting conversions, as well as a user’s expression of the ideal sensation after using the product in a picture might increase the product’s appeal because even customers would like to have a similar experience. An image that depicts a user’s joy after using the product connects with the customer’s suffering and may persuade them to buy.A group of satisfied clients can be used as social evidence. Users may feel more a part of a group and connected.
We have added a mention of a satisfaction guarantee and a dynamic ticker mentioning 50,000+ satisfied customers on the page in the new version. Similarly, we have also added a collage of happy customers with an assuring text.
• Emphasizing on the How To Use section
Original
Variant
A description of how to use a product is necessary if it has many mechanisms and needs to be utilised in a specific way to perform effectively. If there are any questions about these, the consumer can become frustrated and decide against making the transaction.
On the original website, the image describing how to use the product was visible, but it was hidden inside the image slider. In our variant, we’ve taken it out and made sure it’s prominently displayed in the area with the product description.