Revamping the JA Payment Page experience to boost conversion

Background

JustAnswer Desktop payment page has a legacy design with a split-screen design: the left side of the page has the plan details and payment input fields, while the right side shows expert information and membership benefits. The page was doing well in terms of engagement. From behavior analytics and user heuristics ( F-pattern scanning behavior), there was a misalignment: on the landing page, users typically scan left to right and engage with the chatbot on the right. However, on the CC page, users read the content on the right and engage with the payment field on the left side. This behaviour was counterintuitive, disrupting the natural flow. This created cognitive friction and contributed to non-conversions. I decided to revamp the layout with minimal effort — a lean solution that could optimize reading flow, reduce bounce, and improve conversion without a complete redesign.

Goal 🎯 - 

Revamp the payment page layout to make the experience align with the user's natural reading pattern with keeping in mind the low-resolution and small screens devices where users can see the full payment form.

Payment Page - Identifying pain points 😮‍💨

To understand the reason behind non-conversions, I analyse the user cursor movement, reading pattern, and check the page's performance and speed insight.

Page view on low-resolution and small screens devices 

⭐️ Key Insights 

● The page has various performance issues and a poor accessibility score.

● The full load time of the page is >3.4 sec, which can be reduced to 2 sec.

● The CTA is not visible in the first fold of the view on smaller-sized window devices.

●The reading pattern is counterintuitive to the natural pattern.

🖌  Recommended Solutions

1. Layout Planning - 

As per Fitts' law, the page layout should align with natural scanning patterns and cursor movement to create a more intuitive flow. This alignment helps reduce cognitive friction and builds user confidence, making them more likely to complete the desired action.

2. Remove Unnecessary elements - 

Remove or replace unnecessary elements, such as background images and other heavy assets, that negatively impact load time or distract users. It ensures faster performance and greater focus on the payment process.

3. UI Consistency - 

Maintain visual consistency between the landing and payment page to support a cohesive user journey. Consistent UI elements reinforce trust and reduce mental load.

🖌  Layout planning

While planning the layout, I reorganized the service and membership details to match how users naturally scan a page. Since some elements had fixed placement, I took a lean approach to improve flow without disrupting key content.

Brainstorming ideas- Hi-fi design variations

Final design variations

We have a practice of UAT (User Acceptance testing) before making it live for all the task that goes to production for real testing. This process is an important step to provide consistent UX from Design to Development, the issues that will be found in this step get assigned priorities and go into consideration to get resolved before making it live for real users. 

The design was going to be used with multiple landing pages, so there was some rework needed on the logos that I've also done to match the overall visual aesthetic.

📈 Test Result and Success Metrics

We ran an A/B test for an average of 50 days, with a traffic split of 50-50%.

For the time we ran the test, we got an 8% (CC CR) Conversion uplift.

Primary metric - CC CR significantly increased with an 8% lift compared with the older variation.

Final decision - This test ended up being normalised.