SHIPPED
Google Ad page: Jira Software
Redesign signup form and product shot
I led the redesign of the Jira Software Paid Google Ad landing page's hero section, optimizing it to convert visitors into leads or customers with targeted information and a clear CTA.
Product
Google Ad Page - Jira Software Product Tour
What I did
Product Design
Stakeholder Management
Interactive Prototyping
Wireframing
Quantitive Analysis
My Role
Design Lead
Time Line
4 Weeks
Experiment Results
Treatment A
+14% Account creation submit email
+24.6% Viewed OTP email screen
- 4.5% Signups
- 6.3% Land Business Domain Signups (Not Statsig)
Treatment B
+20% Account creation submit email
+29% Viewed OTP email screen
- 0.9% Signups (Not Statsig)
- 0.7% Land Business Domain Signups (Not Statsig)
Problem
Over 80% of desktop traffic comes from branded and non-branded paid searches, with a 5.1% conversion rate.
However, the product tour page's hero section devotes one-third of its space to an embedded signup form, limiting users' ability to present crucial information for informed decision-making.
The objective is to optimize the layout to communicate critical details better while maintaining conversion opportunities.
I saw a valuable opportunity to enhance users' understanding of the product by identifying this gap.
Project goal
Design a more compact signup form in the hero section, freeing space to display critical information. Add an interactive 'show, don't tell' component to help users better understand the product.
Key metrics
53% of the paid traffic goes to one variant, so I redesigned that one variant for this experiment and eventually rolled out what was successful to the other variants as separate experiments.
This assumes a 5% increase in the signup rate for the targeted paid JSW Product tour variant.
Control
What we learned
Treatments A and B resulted in a lower signup rate than the control.
Primary setbacks
Treatments A and B reduced signup rates compared to control.
The signup rate significantly decreased in Treatment A, while it was smaller and not statistically significant in Treatment B.
We observed a significant positive impact from both treatments on initial signups. However, despite the increase in signups, there was a considerable drop-off afterward.
Treatment A
Treatment A focused on repositioning key elements to improve the layout and user flow. The product shot was moved to the right, while the re-designed signup form was shifted to the left.
The signup form was also re-designed to enhance clarity and usability, creating a more balanced and effective user experience.
Treatment B
Treatment B aimed to enhance user engagement by repositioning and updating key elements. The product shot was moved to the right and replaced with an animated version to capture attention.
The redesigned signup form remained, while a social proof carousel was added below to build trust. Additionally, the copy was updated to better communicate the product's value.
Process
Data-Driven Analysis of User Behavior and Engagement
To understand user behavior on the page, I analyzed secondary and quantitative data. I specifically examined scrolling patterns, tracked the percentage of users who clicked on key areas after viewing them, and assessed overall engagement rates to identify areas for improvement.
Heatmap analysis used
Leveraging Exposure Rate to Evaluate Visibility of Key Hero Section Elements
I I used the exposure rate metric, which measures the percentage of users who viewed specific elements on the page. This helped me understand how well users could see and interact with the key components of the hero section
Imbalanced user engagement - Click Rate
The original hero section had a strong focus on the embedded signup form, leading to a relatively high click rate on the form but low interaction with the product shot. This indicated that users were engaging primarily with the signup form while overlooking important product details.
Engagement Rate Analysis
To evaluate the impact of the redesign, I utilized the engagement rate metric, which measures the level of user interaction with specific elements on the page. By analyzing engagement rates before and after the redesign, I could assess how effectively the new layout captured user interest and encouraged interaction
Before the Redesign: The original hero section had a high click rate on the embedded signup form, but it also showed low engagement with the product shot and other key information. This suggested that users were focused on the signup form, missing out on crucial details about the product
Attractiveness Analysis
To evaluate the success of the redesign, we employed attractiveness analysis, which measures how visually appealing and engaging different elements of the page are to users. This helped us determine whether the redesigned layout effectively captured and maintained user interest
Before the Redesign: The original hero section had an embedded signup form that dominated the space, which, while functional, did not effectively highlight the product shot. Users were less engaged with the product visuals, leading to a lower overall appeal of the hero section
I aimed to balance user needs with business objectives in the early redesign phase. The signup form, while highly clicked, overshadowed vital product details. Data showed users engaged with the form but missed crucial product information.
To address this, I re-designed and adjusted the position of the signup form to reduce its prominence, creating a layout that showcased the form and the product shot. This data-driven approach ensured easy access to essential details while optimizing conversions.
Solution
The redesigned signup form in the hero section has created more space to highlight key details. Using an animated product shot and addressing user pain points, the new layout presents essential information more clearly without compromising conversion opportunities. Data-driven refinements have enhanced user experience and conversion rates, resulting in a more balanced and engaging hero section.
Redesign hero section
Animated Product Shot: Incorporated dynamic visuals to enhance product presentation.
User-Centered Approach: Addressed user pain points by presenting essential information more clearly.
Data-Driven Adjustments: Leveraged analytics to guide design decisions and optimize conversions.
Improved User Experience: A balanced layout increased engagement and conversion rates.
*Updated design with new branding
Next Project
Data-Driven Design:
Improving the Atlassian platform page through user research and testing