UX Case Study
Embedded Files
Redesigning and making the subscription experience simple and user-friendly for new users.
Role
Product Designer
Team
Customer Acquisition
Test Timeline
January-March 2025
Project Overview - Javatar Payment page
The page has a legacy split-screen design with plan and payment details on the left, and expert information plus membership benefits on the right. The page showed good engagement metrics, but user behavior analytics and heuristics (F-pattern scanning) revealed a problem.
Problem -
On the landing page, people naturally scan left to right and interact with the chatbot on the right. However, the payment page forced users to read content on the right, then move to payment fields on the left. This behavior was counterintuitive, disrupting the natural flow and creating cognitive friction that contributed to non-conversions.
I chose to redesign the layout using a lean approach — fixing the reading flow to reduce bounce rates and boost conversions without rebuilding everything.
This is how customers feel while interacting.
Goal 🎯 -
Redesign the payment page layout to match natural user reading patterns, ensuring the entire payment form is visible on low-resolution and small-screen devices.
HOLD UP, HOW DID I GET HERE?
To understand why conversions weren't happening, I studied user cursor movement, reading patterns, and evaluated page performance and speed metrics.
Page view on low-resolution and smaller devices
List of devices
Core Web Vitals Assessment - High load time and has accessibility issues
Page elements and the blurred image used in the background were causing high load time
⭐️ Key issues from page analysis
● The page has various performance issues and a poor accessibility score
● The full load time is over 3.4 seconds, which could be reduced to 2 seconds.
● The CTA isn't visible above the fold on smaller screen devices
●The reading pattern goes against users' natural flow.
Solution - Core design changes to the Page
1. Layout planning
According to 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 slow the page or distract users. This improves faster performance and keeps users focused on completing their payment.
🤔 Brainstorming - Design variations
When redesigning the layout, I rearranged service and membership information to match natural user scanning behavior. Since some elements had fixed placement, I took a lean approach to improve flow without disrupting key content.
3. UI Consistency
Keeping visual consistency from the landing page to the payment page for a smooth user experience, matching UI elements builds trust and makes the process feel easier.
The design was going to be used across multiple landing pages, so I reworked the logos to match the overall visual aesthetic.
Final design variations
Currently
Design Variation
Design Testing
I always conduct User Acceptance Testing before launching anything to production for real user testing.
UAT - This process is to identify bugs to ensure consistent UX from design through development. Any issues we find get prioritized and resolved before launch.
📈 Test Result and Success Metrics
We ran an A/B test for an average of 50 days, with a traffic split of 50-50%.
Primary metric - Conversion rate significantly increased with a 8% lift compared with the older variation.
For the first time, we achieved an 8% conversion rate uplift on the payment page with a test.
Final decision - This test was eventually normalized.
Google Sites
Report abuse