Change the design of the paywall on article pages for the members sites
Skills: User research, Figma, HTML5, CSS3, Bootstrap4, Javascript(vanilla), Google Analytics
Timeline: 1 week
Objective:
To improve the conversion rate of users purchasing a subscription through improving the UI of the article paywall.
Step 1. Gather data
Through using Google Analytics I was able to find how successful the paywall on article pages were in leading users to purchasing a subscription. The GA stats I had to my disposal followed the user through the membership funnel and where the main drop-off was. I found that the stats pointed towards most of our membership were being purchased through our membership page with little numbers coming from article pages. I decided, to try and improve the conversion rate for all 22 members sites to improve the paywall visually but also to highlight the benefits clearer to the user.
Step 2. Design stage
This was the old design. It had a repeat of the benefits in each list, if they were the same, meaning the columns were very long.
This was the second iteration of the design. Even though the look and feel was cleaner, as a team we felt the paywall needed to have more effect visually. The design came from research which was undertaken to find out how competitors showed benefits lists in article paywalls.
I continued to research other sites paywalls and in the end this is the design which we agreed upon which also aligned to our teams opinions. I added a background image, changed the column structure to three areas of text and limited the benefits list allowing the CTA's to be shown.
Step 3. Coding the changes
I made the code changes to the paywall and it included using these languages:
HTML5 | CSS3 | JavaScript | Bootstrap4 | mdBootstrap
I then rigorously tested the paywall and the user journey to make sure all was working as it should be on all broswers and all devices.
Step 4. Results
The code changes were made to all of the 22 members sites. These are a brief selection of the designs:
After placing the code live to all of the sites, I used the GA data to find there was a 10% monthly increase in the number of users who purchased their subscription through an article page. The changes I had made were successful and improving the conversion rate.
Here are some live links to the members sites where you can see the article paywall:
