CATCHPLAY Landing Page Iteration
Brief: The data and user feedbacks showed that the exit rate on the landing page is high, meaning users didn't get to see our product page and so the signup rate was low. Our goal is to have more user signup, make plan intro page simple and clear, and have users understand our product benefits right away.
Timeline: 3 weeks
Process: User testing, New User Flow, Prototyping, A/B Testing, Publish New Page
My Role: Interview with users to get their pain points and used them as the guide to redesigning the landing page. Worked with marketing team to get the plan introduction simple and easy to understand and coordinated with engineers to deliver the final product.
The Old Version
It total had 10 pages. The idea was to tell user 1 of our features each page and for those who scrolled all the way down can take a sneak peek at our home page. Each page had very cool animation and transition. But the data showed the exit rate was high, so our mission was to find out the problem and fixed it.
User Testing
We ran user testing for 22 users. By watching them use our product and asking them questions, we got some insights from them.
"With so many information and buttons, it's hard for me to decide with one to click."
- female, 32 years old, working in mall
Goal#1: Simply our information and reduce the page numbers.
"When I look at the first page, I assume the information on the rest pages is the same as the first one."
- male, 28 years old, soft engineer
Goal#2: Put the most important information on the first page.
"I thought the pages are selling me movies, not telling me the features of the product"
- male, 31 years old, sales
Goal#3: One page should focus on new movies and some pages should focus on product features, not all together.
Content Restructuring
After identifying our redesign goals, out team started to sketching out some ideas for each page and the new flow.
UI & Prototyping
With the flow and the content in the right position, now it's time to draw user's attention to where we want it to be. For the prototyping, I use Framer js for its high fidelity, so it's easier to communicate with engineers and inner testing.
The most important thing we want users to know is that they can get a free movie once they sign up and if they don't want to sign up, they can take a sneak peek or scroll down for more information. And we trimmed the pages down to 4. The message we wanted to deliver were the same, but we used a smarter way to do it.
A/B Testing
Once the new design was ready, we ran an A/B testing to see if the new version beats out the old one. And ofter 2 days testing, with the new landing page our sign up rate went up and exit rate on landing page dropped down dramatically. Below is the mobile web version.
