Landing Page Re-design - Ux/Ui Design
Introduction
Keystone Education Group (KEG) consists of 450+ platforms (brands/websites) that act as a hub where soon-to-be students and schools can meet, worldwide. We have two different kinds of users, the schools and the students, both are equally important. Keystone relies heavily on generated content such as articles and other text-based content. We want the users to go further into our site and apply to relevant schools/education which in turn makes a more attractive service for the education providers to be on.
My role
I conducted the setup of the test and made sure all our tracking was in sync with Google Analytics. I also summarized the data and presented it to relevant stakeholders.
Quick Overview of the Project
Keystone relies a lot on SEO content such as articles and guides that give the user value by providing suggestions on different schools and education. One of our formats is Top 10 pages that provide the reader with 10 different educations within a certain field.
When I was introduced to this project the new design had already been created. My task was to set up an A/B test environment and analyze it as well as refine the design further based on the results.
Since the previous test didn't give us an obvious winner, we decided to update the CTA text from “Contact Provider” to “Visit Course Page”.
This decision was made due to the obscurity of the word “Contact provider“ and what it means to the user…
Situation
Keystone relies a lot on SEO content such as articles and guides that give the user value by providing suggestions on different schools and education. One of our formats is Top 10 pages that provide the reader with 10 different educations within a certain field.
This is an image of the original design that needed a facelift*
Goal
Create a new layout for the Top 10 pages, that requires minor copy and content changes. We want to get more users to visit the education pages.
User story 1 - As a user, I would like to be able to create an information request directly from the Top 10 page when I see an interesting education I want to learn more about
Known Issues
The original design for the Top 10 pages is noisy and confusing.
It is unclear what the user should click on.
The Top 10 pages do not convert many users as of today.
My process
When I was introduced to this project the new design had already been created. My task was to set up an A/B test environment and analyze it as well as refine the design further based on the results.
This image is what the new first iteration of the design looked like*
Google Optimize set up
Firstly I needed to make sure all the tracking links were set up so we actually could receive proper data. I wanted to know how many users clicked on the CTA as well as how many total visitors we had.
Test 1 - The phantom test
During the first test, I tested the original design against the new one. The test was active for 14 days and received 853 sessions. The original design received 18 conversions (4,17%) while the new design received 22 conversions (5,23%). An increase of 79,73%.
This test did not result in a clear winner due to a lack of data, but it leaned toward the new design’s favor.
Test 2 - The attack of the tests
Since the previous test didn't give us an obvious winner, we decided to update the CTA text from “Contact Provider” to “Visit Course Page”.
This decision was made due to the obscurity of the word “Contact provider“ and what it means to the user. What happens when clicking on the CTA is that the user gets to an education page, where you can read more about that specific school/course and contact them through a form (if the user wants to).
This time we noticed a clear winner. Out of 3,031 sessions, the original design had a conversion rate of 5,82% while the new design had a conversion rate of 17,70%. This time around we had the test going for about a month before deciding on a winner.
New CTA copy
Test 3 - The revenge of the test
We also tried the original old design against the new design with the new CTA copy. This was to make sure that it was the new CTA that improved the CTR.
We could see a winner after about 16 days, and it was as expected with the new design. Out of 1,009 sessions, the old design received 6,12% conversion while the new design received 16,82%.
The next step
Now that I knew the new design with the new CTA was performing the best I presented my insights to one of the stakeholders of findcourses.com. She was immediately sold on the results and wanted to implement the design on all pages. The challenge here is that it is needed to be done manually on each page, so each stakeholder has to take it upon themselves to make sure the design got updated.
I created a document with all the necessary background information and results as well as how to implement the HTML and CSS code to make sure the design would look and behave as expected.
With this link, you can see the final page design live Top 10 Leadership courses
What I have learned
I have learned that A/B testing can be super useful when you know that a specific element is flawed and could be improved upon. But it takes a lot more time than I expected it to, due to setting it up properly (Im glad Google Optimize is ending for good in September). It also needs time if the page you are testing doesn’t have too much traffic, in this case, it took several weeks to receive the sweet spot of 1000 users.
I understand why and when to use A/B testing and it is a powerful tool when complementing with more qualitative user testing, such as interviews.