UX Case Study
Embedded Files
Making the JustAnswer payment experience more secure and trustworthy for new users
Role
Product Designer
Team
Customer Acquisition
Test Timeline
April-June 2024
Project Overview - JA Payment page
The page has a legacy design that shows basic service details and a form for membership sign-ups. The page was performing well in terms of engagement, but the mobile and web versions were designed differently.
Problem
When I looked at the last 6 months of Page performance data, I found that users were landing on the CC page, but conversions weren't happening as expected. I needed to understand what elements were causing users to bounce and how I could fix the issues they faced during payment.
🎯 Goal
Evaluate the payment flow from landing page to checkout, and rethink the experience while finding ways to increase user confidence and build trust, leading to higher conversion rates and increased usage.
User Data Analysis
JA Users:
🧑🏻💼 - 30% of JA users are female
👨🏻💼 - 70% of JA users are male
User Data Analysis - Gender Vs Session, Engagement & Conversion
Don Norman Said -
"Don’t rush to a solution, try small interventions"
User Research
😮💨 Identifying pain points
User Surveys - To understand user behavior and why conversions weren't happening. Given the diverse age range of our user base, I have strategically chosen surveys as an effective means to gather insights.
I decided to run a Non-Converters Survey for users who didn't complete their payment on the checkout page.
Then I analyzed the feedback to identify pain points.
Non-Converters Survey form - 2000+ responses
Survey Insights
⭐️ Key Insights moving forward
27% of users feel the website isn't trustworthy.
13% of users can't find clear info about how the service works.
9% of users aren't sure experts can answer their questions if they subscribe.
7% of users want more information about the experts.
8% of users find the pricing confusing.
38% of users don't want to subscribe for the membership.
Understanding LP Heatmaps
Identifying improvement areas in the design experience.
30% of users on the LP only stick to the 1st fold.
40% of users scroll down to see benefits - what you get.
50% of users scroll after the 2nd section.
Research to Design decisions -
1. Visual Hierarchy -
The labels should clearly communicate to inform users about the page, because my assumption is
"Upon arriving at the page, the user might feel confused and struggle to understand the page's purpose and what they're actually paying for".
2. Plan details -
The Plan details with price should be shown clearly in the order description because my assumption is
"Users aren't clear about the joining and membership fees, and what benefits they get for the amount they pay".
3. Expert Details and Specialization -
The expert details should include more information about their specialization and provide plenty of social proof to assure users that they're real and able to solve their problems, because my assumption is
"Users don't feel confident when they can't find expert reviews and qualifications".
4. CC Logos -
The credit card logos on the payment page should be updated to the most recent versions because my assumption is
"The outdated logos don't help build authenticity and don't make users feel secure".
5. Membership benefits -
Membership benefits need to be displayed prominently in a small section near the order details and payment options above the fold, because my assumption is
"Many users are unclear about what benefits they get with membership, like how they can connect with experts and question limits".
6. Secure text -
Show security text such as 'secure payment' near the CTA to reassure users that their data is protected, because my assumption is
"Without any security element, users often don't trust the website and worry that their payment information isn't safe. These concerns are common since scam websites typically lack proper security indicators".
7. Placement of Security Logo -
Eye-tracking studies show security logos are the second thing users notice on payment pages. We should place these logos close to the CTA above the fold because my assumption is
"Users don't feel confident when security logos are hard to find. Also, nearly half of users don't scroll down since the CTA is above the fold".
8. Help and Support -
Customer support details should be on the payment page to help users recognize, diagnose, and recover from any errors, because my assumption is
"Without these options, users may feel stuck when they encounter problems and end up leaving the page".
🪄 Finalized Design Solutions (TA-DA!)
At JustAnswer, we follow the LEAN approach.
LEAN Design and Testing - The fundamental activity of turning ideas into designs, building them, measuring how customers respond to them, and then learning whether to pivot or persevere.
We decided to break the solutions into smaller experiments and prioritize them based on impact.
Solution 1- Adding trust elements on the payment page
Trust elements show users that a site is reliable, credible, and secure.
I placed these elements above the fold on the payment page because most people don't scroll down. We're testing to see how users react to these trust signals.
Research proves that trust signals directly boost conversion rates:
According to TrustedSite, 49% of consumers see missing trust badges as a sign of fraud on websites.
About 31% of consumers worry most about credit card information being stolen.
Note - To make it Lean I've used the existing design elements from the Design system.
Position and placement of trust elements and SSL encryption
Final design - trust elements and SSL secure badge
Control Design
Variation Design
💛 Building Trust & Security
Solution 2- Adding benefits on the Interstitial page in the funnel
The funnel has been short and quick, allowing users to engage and pay to have their questions answered. However, users reach the payment page with a lack of understanding about who we are, why they can trust us, and what else we offer.
User scrolling data reveals that only 66% of non-converters see the first bullet point on mobile, and just 50% of users see all the membership benefits on the payment page.
I added an interstitial page highlighting Membership benefits in the pre-conversion funnel to establish trust and build confidence with users before they reach the payment page.
Interstitial Page
Payment Page
Solution 3- Showing benefits above the fold and making CTA sticky
With all the required components on the mobile payment page (pricing, terms, forms, etc.), there's limited room to effectively market our product and service.
I learned that only 50% of users see all the membership benefits on the payment page.
I redesigned the payment page format by adding a sticky CTA button to show marketing content before the payment fields.
To keep it lean, I swapped the placement of the membership benefits with the current elements and only added sticky CTA functionality.
Inspiration and placement research - Sticky CTA
Control
Variation
Sticky CTA and Payment fields - 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 40 days with a 50-50 traffic split.
1. Trust Element Test
Out of all visitors, the CVR was 9%.
Primary metric - CC CR significantly increased with a 4% lift compared with the older variation.
2. Showing benefits above the fold and making CTA sticky
Primary metric - CTR on the CTA button increased to 24% for the new design.
✨ Learning - Users who saw the trust icons were more likely to convert.
Tools used -
Google Sites
Report abuse