Landing Page for identi App Campaign

Data-Driven Web Design

Web Analysis, Heatmap, Marketing Repot, Responsive Web Design

Overview

I designed the responsive landing page for this campaign on mobile, desktop, and apple tv. The website is live https://identi.app.

The design process was driven by data from hotjar and Facebook business manager. The new landing page was quite successful because it converted 20% of visitors to registered beta testers, and acquisited 500+ registered testers with a low cost per click of 0.1 $ mainly from India area.

01. Previous Scenario

They had a landing page before, see as below, on desktop and mobile. The sign-up number of the landing page was very low, with almost no one click through.

02. The Problem

To diagnosis the landing page, hotjar engine was setup with the landing page to see how users were navigating the page. The heatmap allows us to see where the users clicked and focused the most. We decided to mainly focus on the heatmap of the mobile version because data shows 92% of the traffic from mobile. The heatmap of the original landing page on mobile was as follows:

There was two areas being tapped on the landing page. When scrolling down, people did tap on the price card of personal development and the footer, but no one tapped on the main CTA. The conversation rate was only 2.9%.

According to the heatmap data, the main issues were found as following:

1. The first screen was with too much irrelevant info (countdown), but lack of a demo of the product.

2. The copies on the CTA button are too long and complicated, the users hardly understand what they will get.

3. There should be the main CTA also at the bottom of the page.

4. The price scheme should be removed for the current scenario because we wanted to scale up the number of users so the free users were important.

03. Data-Driven Design

Referring to the data from Facebook Ads, which led to the different version of landing page, we kept on testing the landing page with different copies and design assets. The KPI that we looked up were:

• Conversation rate on each version of landing page

• Click-through-rate (CTR) of FB ads

• Cost-per-lead

Test 1. Copies on the head

The top 4 ad with different copies were with >> 1% CTR, and cost-per-lead around $.16, which means they were very good. Then we found out that different copies on the ads can arouse different levels of interest from viewers, thus arousing their desire to click through and register. For example, the ad with the word “procrastination” brought quite a lot of potential users to the landing page with a low cost per result rate.

Set-Up: We then integrated those findings of the best copies into our landing page. We also changed the subscribe button text from “Get 90% Off When We Launch” to “Sign-Up”. Below are our A / B landing pages on mobile with different copies and their heatmaps.

On both pages, the main CTA attacked most of the taps, the tapping rate was 52% on landing page A and 43% on B. After running the ads for 24 hours, surprisingly, the best sign-up results were from landing page B, we received 129 sign-ups among 644 leads, the conversation rate was 30%, quite successful!

Most of our leads were from India and thanks to discussions with fellow students and one guy who contacted us over Instagram, we learned that their willingness to pay, especially to contribute to a crowdfunding campaign is close to zero. That learning encouraged us to run the next test separately towards with Indian audience (later we enlarged to eastern countries), and the western audience.

Test 2: Usage of video on the header

The product team created a 30-s video of quick-cut of the CEO pitching the concept combining with an animated demo of the product. We wanted to test the impact of having this video on the landing page.

Set-Up: we copied our landing page, and insert the video on another landing page.

Surprisingly, the CTR went down dramatically, even though the ads are exactly the same for the new ad-sets and the old ones.

We confirmed our hypothesis: the video, as is, is having a negative effect on our CTR and conversion rates.

Test 3. Main CTA

Instead of collecting the emails, we hypothesized that it might be more efficient to directly bring them to the beta test page to download the app.

Therefore we started to run a A/B test with different direction of taking CTA:

However, in both tests, we also realised that 80% people just clicked the CTA once but never took any other action anymore. Therefore, running test B, which directs to beta testing page was a risk, because 80% of the visitors wouldn’t take the action on the beta testing download page, it is more feasible to get as many email address as possible to keep them in contact rather than let them download the app immediately. So finally we decided to keep A version.

05. Conclusions

The design process was driven by data from hotjar and Facebook business manager. The new landing page was quite successful because it converted 20% of visitors to registered beta testers, and acquisited 500+ registered testers with a low cost per click of 0.1 $ mainly from India area.

Next step, we would like to continue experimenting landing page with FB Ads, for example, to improve the video with more authentic customer interviews, or ran ads that directly bring people to the beta testing download page.

I really enjoyed data-driven design process and believe it plays an important role to drive us to the best solutions, it has helped me gain confidence with the product team to find the best solution.