Optimize the product landing page to increase conversion rate

Company

Role

Responsibility

Imweb
(Industry)

UI/UX design intern

Research - data tracking and analysis
Design - IA design, UI design

Project Overview

My responsibility was to redesign the landing page to increase conversion rates of registration and encourage more potential users to create their own sites and experience the product's value.
Because of time constraints and limited user research resources, I used data analysis tools such as Google Analytics and Hotjar to analyze the problems of the landing page, and worked closely with the product manager and marketing team to deliver the design.
This redesign project increased the overall conversion rate and reduced bounce rates with less marketing spending.

Background

Imweb is a website-building platform that began expanding its market in Taiwan in 2020. In late 2022, the company adjusted the operation strategies. We had to increase the conversion rate with less marketing spending. Therefore, the landing page, the first touch point of new users, was the most critical item for improvement - such as the design needed to be consistent with the brand's style and the wording was strange for users requiring modification.

User research for approaching the problems

Before starting the redesign, I researched how users used landing page, what they wanted to know, and what frustration they encountered. However, because of the time constraints and limited user research resources, instead of recruiting users for interviewing, I used Hotjar, and Google Analytics(GA), conducted heuristics evaluation, and collected feedback from sales team for digging into the core problems.

Gain insights

Information

According to GA, the most visited pages on the main site were “Theme” and “Price.” It means users had more interest in the design template and the pricing plan.
The display and the content of the pricing plan section violated human intuition(violated #4 Consistency and standards of 10 Usability Heuristics). It caused a lot of cognitive loads and time to understand the information.

The pricing plan design violated human intuition - (1) The free plan was at right hand side that users can’t scan it quickly while the most expensive plan was at the left hand side. (2) There are 2 display ways of discount that confusing users.

Trustworthy

For a new brand, displaying the users’ quotes on the landing page is very powerful for convincing and building trust.

Usability

From the users’ data in GA, the mobile users were more than desktop and tablet users, especially the screen sizes of 390x844, 414x896, and 375x812. We should pay attention to the display on these screen sizes.
Through Hotjar, I learned that there were many misunderstood UI that made users angry. For example, the blue text looked clickable button, but actually it wasn’t. The confusing UI resulted in rage clicks.

Design tasks

Increase user experience

Modify the wording to a more Taiwan localized tone.
Define the design guideline that the UI is intuitive.
Design a mobile friendly user interface.

Show product strengths

Add the design template section.
Add the users’ quotes section.
Iterate the pricing plan.

Communicate the brand spirit

Follow the new brand style to design the landing page.

Design metrics

The Call to action(CTA) button conversion rate on landing page increase.
The bounce rate of the CTA button on landing page decrease.
The conversion rate of “Create my site” increase.

Initial design

Hero image

Collaborate with the marketing team to design the hero image and animation that using the effective marketing terns for communicating the key value.

Key features

Collaborate with the marketing team to decide the key features that should be shown.

Design templates

Show the most used design templates.

Pricing plan

Reorganize the information architecture.
Highlight the discount.
Each plan can be shown completely on mobile size screen without scrolling.

Users’ quotes

Not only show the clients’ websites but also show how Imweb helped them.

Footer

Follow the brand design style.

Data tracking & Feedback

I tracked data by GA and found that the engagement rate increased, but the conversion rate decreased. After internal discussion, we decided to highlight more “0% revenue share,” one of the most different features from competitors.
Besides, we decided to show the monthly payment price instead of the yearly price. Though the annual pay price is lower, more new users buy the monthly payment plan. Displaying the monthly payment price is more user-friendly.
Furthermore, we reordered “Pricing Plan,” “Users’ quotes,” and “Design templates” sections. We hypothesized that if the plan attracted users, they would be more willing to scroll down to see more or click the CTA button.

Design iteration

Reorder the sections

Iterate the pricing plan section

Highlight the 0% revenue share.
Display the monthly payment price.
Add wording that we have long tern plan that the price is lower.

Outcome

After launching iterated design, the conversion rate increased, and the bounce rate decreased while the marketing spending was less than before. Overall, the users who came to the landing page became more willing to register accounts and create their sites to experience our product.

Before

After

Design guideline