navigation
navigation
navigation
navigation
navigation
navigation
Tinder
Tinder
Dynamic Paywalls
2021 - 2022
2021 - 2022
design strategy
design strategy
product design
product design
design systems
design systems
about✐
Dynamic Paywalls is on ongoing takeover of all ALC and subscription paywalls within Tinder. Paywalls across the platform's experience haven't been updated since 2015, and since then, the brand design language has changed significantly as well as how users interact with different types of modals/paywalls.
Dynamic Paywalls is on ongoing takeover of all ALC and subscription paywalls within Tinder. Paywalls across the platform's experience haven't been updated since 2015, and since then, the brand design language has changed significantly as well as how users interact with different types of modals/paywalls.
✄impact
My role as the leading designer on this project allowed me to redefine the visual language and user interactions of all revenue experiences across the board. Also, my work with creating dynamic and reusable components has allowed for flexibility in designing, building, and testing all new forms of paywalls.
My role as the leading designer on this project allowed me to redefine the visual language and user interactions of all revenue experiences across the board. Also, my work with creating dynamic and reusable components has allowed for flexibility in designing, building, and testing all new forms of paywalls.
fig 01;existing paywalls
fig 01;existing paywalls
↪ The existing Tinder paywalls have inconsistent layouts across different products (a-la-cart / in-app currency / subscription paywalls) and across different platforms (android / ios / web). This is because each paywall is hard-coded and the individual components are not reusable, creating irregularity across the different experiences.
↪ The existing Tinder paywalls have inconsistent layouts across different products (a-la-cart / in-app currency / subscription paywalls) and across different platforms (android / ios / web). This is because each paywall is hard-coded and the individual components are not reusable, creating irregularity across the different experiences.
subscription
subscription
a-la-carte
a-la-carte
in-app currency
in-app currency
fig 02; paywall customization
fig 02; paywall customization
↪ Existing paywalls are only optimized for price testing (highlighted in green), but the majority of the paywall contents are not customizable (highlighted in red). This makes the original paywalls Incapable of personalization across different users or countries with content.
↪ Existing paywalls are only optimized for price testing (highlighted in green), but the majority of the paywall contents are not customizable (highlighted in red). This makes the original paywalls Incapable of personalization across different users or countries with content.
↳
↳
Version 1.0
For the first milestone, we tested two layouts. The 3-SKU version has the same format as the current paywalls, while the carousel version introduces a new paywall layout.
For the first milestone, we tested two layouts. The 3-SKU version has the same format as the current paywalls, while the carousel version introduces a new paywall layout.
3-SKU
3-SKU
3-SKU
3-SKU
-> No CTAs
-> Stacked SKUs
-> Aligns with current in-app paywalls
-> Upsells are always visible at the bottom
-> No CTAs
-> Stacked SKUs
-> Aligns with current in-app paywalls
-> Upsells are always visible at the bottom
carousel
carousel
carousel
carousel
-> Clear CTAs
-> Focused SKUs
-> Flexible cards
-> More real estate for packages
-> Clear CTAs
-> Focused SKUs
-> Flexible cards
-> More real estate for packages
3-SKU
-> No CTAs
-> Stacked SKUs
-> Aligns with current in-app paywalls
-> Upsells are always visible at the bottom
carousel
-> Clear CTAs
-> Focused SKUs
-> Flexible cards
-> More real estate for packages
+
+
=
Round 1
-> Moderated Usability Test
Round 2
-> Unmoderated message comprehension test
Milestone 2 final designs
Round 3
-> Unmoderated usability test
↳
Milestone 2
research
For our final and most impactful milestone, we conducted 3 rounds of qualitative user testing to iteratively come to our final designs.
research; version 1.0
research; version 1.0
↳
↳
Version 1.0
research
research
Through an AB test, we saw that both options performed better than the existing paywall. Boost cash was up over 6.5% (stat sig), and total cash was up 0.6% (stat sig). Annualized, this is about an increase of $10MM.
Between the two, Boost cash increased significantly in the carousel view, as it sold more ‘5 Boost’ packages.
Through an AB test, we saw that both options performed better than the existing paywall. Boost cash was up over 6.5% (stat sig), and total cash was up 0.6% (stat sig). Annualized, this is about an increase of $10MM.
Between the two, Boost cash increased significantly in the carousel view, as it sold more ‘5 Boost’ packages.
3-SKU
3-SKU
A
A
3-SKU Version Removing a CTA resulted in less conversion
3-SKU Version Removing a CTA resulted in less conversion
carousel
carousel
B
B
Carousel Version Users weren’t scrolling through the carousel, so subscription cash was lower in the carousel version.
Carousel Version Users weren’t scrolling through the carousel, so subscription cash was lower in the carousel version.
carousel
B
Carousel Version Users weren’t scrolling through the carousel, so subscription cash was lower in the carousel version.
3-SKU
3-SKU
carousel
carousel
3-SKU
A
3-SKU Version Removing a CTA resulted in less conversion
3-SKU
carousel
B
Carousel Version Users weren’t scrolling through the carousel, so subscription cash was lower in the carousel version.
carousel
Version 1
Version 1
Version 1.5
Version 1.5
↳
↳
Version 1.5
Carousel Layout Improvements For Version 1.5, we wanted to focus on increasing subscription cash in the carousel version, which meant improving the upsells.
Carousel Layout Improvements For Version 1.5, we wanted to focus on increasing subscription cash in the carousel version, which meant improving the upsells.
A
A
B
B
Sticky Upsell By making the primary upsell sticky at the bottom, we hope to make the upsell more obvious and accessible to the user.
Sticky Upsell By making the primary upsell sticky at the bottom, we hope to make the upsell more obvious and accessible to the user.
Deep Links We built in deep in deep links to other paywalls, thus removing the ‘paywall-within-a-paywall’ user experience.
Deep Links We built in deep in deep links to other paywalls, thus removing the ‘paywall-within-a-paywall’ user experience.
B
B
Deep Links We built in deep in deep links to other paywalls, thus removing the ‘paywall-within-a-paywall’ user experience.
Deep Links We built in deep in deep links to other paywalls, thus removing the ‘paywall-within-a-paywall’ user experience.
A
Sticky Upsell By making the primary upsell sticky at the bottom, we hope to make the upsell more obvious and accessible to the user.
A
Sticky Upsell By making the primary upsell sticky at the bottom, we hope to make the upsell more obvious and accessible to the user.
↳
Version 1.5
Carousel Layout Improvements For Version 1.5, we wanted to focus on increasing subscription cash in the carousel version, which meant improving the upsells.
↳
Version 1.5
Carousel Layout Improvements For Version 1.5, we wanted to focus on increasing subscription cash in the carousel version, which meant improving the upsells.
research; milestone 2
research; milestone 2
↳
Milestone 2
research
For our final and most impactful milestone, we conducted 3 rounds of qualitative user testing to iteratively come to our final designs.
Round 1
Round 1
-> Moderated Usability Test
+
+
+
Round 2
Round 2
-> Unmoderated message comprehension test
+
+
+
Round 3
Round 3
-> Unmoderated usability test
=
=
Milestone 2 final designs
Milestone 2 final designs
↳
Milestone 2
research
research
testing round 1/3
testing round 1/3
For the first round of user testing, we wanted to compare the interactions of the carousel layout vs. the 3-SKU layout in the context of subscriptions.
For the first round of user testing, we wanted to compare the interactions of the carousel layout vs. the 3-SKU layout in the context of subscriptions.
original
original
*
With Tinder Gold being one of our most impactful and highest revenue drivers, we wanted to apply our learnings to the Gold paywall for all of our Milestone 2 tests.
*
With Tinder Gold being one of our most impactful and highest revenue drivers, we wanted to apply our learnings to the Gold paywall for all of our Milestone 2 tests.
With Tinder Gold being one of our most impactful and highest revenue drivers, we wanted to apply our learnings to the Gold paywall for all of our Milestone 2 tests.
testing prototypes
testing prototypes
testing prototypes
3-SKU
3-SKU
carousel
carousel
↳
↳
Milestone 2
research
research
testing round 1/3 (results)
testing round 1/3 (results)
Overall, users didn’t communicate a preference between the two layouts, but majority needed more information about the subscription tiers in order to make a purchase.
Overall, users didn’t communicate a preference between the two layouts, but majority needed more information about the subscription tiers in order to make a purchase.
A
A
3-SKU
3-SKU
->
->
Users liked being able to compare prices all in one screen.
Users liked being able to compare prices all in one screen.
->
->
Users preferred Tinder Platinum being displayed in an external paywall in order to keep the information separate.
Users preferred Tinder Platinum being displayed in an external paywall in order to keep the information separate.
B
B
carousel
carousel
->
->
The last card of the carousel was mistaken as a summary of all of the SKUs from the previous cards.
The last card of the carousel was mistaken as a summary of all of the SKUs from the previous cards.
->
->
Swiping through each of the cards felt like high effort.
Swiping through each of the cards felt like high effort.
testing prototypes
testing prototypes
testing prototypes
A
A
3-SKU
3-SKU
A
3-SKU
->
Users liked being able to compare prices all in one screen.
->
Users preferred Tinder Platinum being displayed in an external paywall in order to keep the information separate.
B
B
carousel
carousel
B
carousel
->
The last card of the carousel was mistaken as a summary of all of the SKUs from the previous cards.
->
Swiping through each of the cards felt like high effort.
A
Contextual entry point
Users weren't able to make the distinction that they were getting the Tinder Gold subscription, and thought they were just getting the individual feature mentioned in the header.
B
Learn More screen
The paywall and the 'Learn More' screen were analyzed in isolation, and users weren't able to make the connection between what they were purchasing and the list of features.
↳
↳
Milestone 2
research
research
testing round 2/3
testing round 2/3
For the second round, we decided to test our existing paywall to understand the interactions with the contextual entry point in the header, the header image, and the functionality of the subscription tier comparison page.
For the second round, we decided to test our existing paywall to understand the interactions with the contextual entry point in the header, the header image, and the functionality of the subscription tier comparison page.
A
A
Contextual entry point
Contextual entry point
Users weren't able to make the distinction that they were getting the Tinder Gold subscription, and thought they were just getting the individual feature mentioned in the header.
Users weren't able to make the distinction that they were getting the Tinder Gold subscription, and thought they were just getting the individual feature mentioned in the header.
B
B
Learn More screen
Learn More screen
The paywall and the 'Learn More' screen were analyzed in isolation, and users weren't able to make the connection between what they were purchasing and the list of features.
The paywall and the 'Learn More' screen were analyzed in isolation, and users weren't able to make the connection between what they were purchasing and the list of features.
A
3-SKU
testing prototype
testing prototype
testing prototype
testing prototype
testing prototype
existing layout
existing layout
testing prototype
↳
Milestone 2
research
research
testing round 3/3
Cumulating all of our insights from experiment data and user testing results, we identified two new versions that we hypothesize will lead to a better performing paywall.
Cumulating all of our insights from experiment data and user testing results, we identified two new versions that we hypothesize will lead to a better performing paywall.
carousel
B
Carousel Version Users weren’t scrolling through the carousel, so subscription cash was lower in the carousel version.
testing prototypes
testing prototypes
testing prototypes
list
list
carousel
carousel
↳
Milestone 2
research
research
testing round 3/3 results
paywall
paywall
sub merch page
sub merch page
sub merch page
paywall
*
View more plans CTA No usability issues reported on the Sub Merch page, and all users were able to swipe between the offered plans. Overall, users enjoyed the addition of ‘View More Plans’.
View more plans CTA No usability issues reported on the Sub Merch page, and all users were able to swipe between the offered plans. Overall, users enjoyed the addition of ‘View More Plans’.
carousel
carousel
list
list
*
Carousel vs. List Most users were successfully able to swipe or toggle between options, locate the purchasing CTA and ultimately make the purchase for both layouts.
carousel
carousel
list
list
*
Carousel vs. List Most users were successfully able to swipe or toggle between options, locate the purchasing CTA and ultimately make the purchase for both layouts.
Carousel vs. List Most users were successfully able to swipe or toggle between options, locate the purchasing CTA and ultimately make the purchase for both layouts.
*
Feature List 4/10 users expected the tiles to be clickable and wanted more information about the individual features upon clicking on the tile.
Feature List 4/10 users expected the tiles to be clickable and wanted more information about the individual features upon clicking on the tile.
final designs
contextual header text
The feature in the header title changes depending on where the user encounters the paywall.
carousel layout
We chose the carousel layout for more flexibility for future iterations of subscription paywalls and adjusted sizing so users can compare the pricing of two SKUs at once.
sticky cta
The CTA is fixed at the bottom to encourage the user to scroll lower and view the full list of subscription features.
feature list
Since this feature list has the same information as the subscription comparison page, we kept the styles between the two aligned. The original design from the user testing was using a tile-like display of the features, which was misleading to users because the content seemed clickable.
dynamic sticky scroll CTA
To prevent the need for users to recall their selection at the top, the sticky CTA is dynamic while scrolling and changes depending on what package the user has selected. It also reflects the total price to reduce cognitive load.
contextual header text
contextual header text
contextual header text
The feature in the header title changes depending on where the user encounters the paywall.
The feature in the header title changes depending on where the user encounters the paywall.
The feature in the header title changes depending on where the user encounters the paywall.
carousel layout
carousel layout
carousel layout
We chose the carousel layout for more flexibility for future iterations of subscription paywalls and adjusted sizing so users can compare the pricing of two SKUs at once.
We chose the carousel layout for more flexibility for future iterations of subscription paywalls and adjusted sizing so users can compare the pricing of two SKUs at once.
We chose the carousel layout for more flexibility for future iterations of subscription paywalls and adjusted sizing so users can compare the pricing of two SKUs at once.
sticky cta
The CTA is fixed at the bottom to encourage the user to scroll lower and view the full list of subscription features.
sticky cta
The CTA is fixed at the bottom to encourage the user to scroll lower and view the full list of subscription features.
feature list
Since this feature list has the same information as the subscription comparison page, we kept the styles between the two aligned. The original design from the user testing was using a tile-like display of the features, which was misleading to users because the content seemed clickable.
feature list
feature list
Since this feature list has the same information as the subscription comparison page, we kept the styles between the two aligned. The original design from the user testing was using a tile-like display of the features, which was misleading to users because the content seemed clickable.
Since this feature list has the same information as the subscription comparison page, we kept the styles between the two aligned. The original design from the user testing was using a tile-like display of the features, which was misleading to users because the content seemed clickable.
dynamic sticky scroll CTA
dynamic sticky scroll CTA
To prevent the need for users to recall their selection at the top, the sticky CTA is dynamic while scrolling and changes depending on what package the user has selected. It also reflects the total price to reduce cognitive load.
To prevent the need for users to recall their selection at the top, the sticky CTA is dynamic while scrolling and changes depending on what package the user has selected. It also reflects the total price to reduce cognitive load.
dynamic sticky scroll CTA
To prevent the need for users to recall their selection at the top, the sticky CTA is dynamic while scrolling and changes depending on what package the user has selected. It also reflects the total price to reduce cognitive load.
final designs
final designs
final designs
fig 03; implementation
fig 02; paywall customization
↪ Since this project, we've iterated on the dynamic paywall template to create 19+ new, unique paywalls that use the same components and styling. This demonstrates the impact as well as the scalability of the project, as every a-la-carte, subscription, and offer paywall has moved towards the dynamic paywall template. Since it's release, we continue to improve on the success of our paywalls as well as the alignment of the revenue experience across all features.
↪ Since this project, we've iterated on the dynamic paywall template to create 19+ new, unique paywalls that use the same components and styling. This demonstrates the impact as well as the scalability of the project, as every a-la-carte, subscription, and offer paywall has moved towards the dynamic paywall template. Since it's release, we continue to improve on the success of our paywalls as well as the alignment of the revenue experience across all features.
the future of paywalls
With Project Dynamic Paywalls, we can build a framework for future iterations of all in-app paywalls and define Tinder’s visual approach to revenue features.
↳
Componentized Paywall Elements
↳
Premium Branding
↳
Using componentized, reusable elements across our revenue paywalls increases alignment across designers and reduces workload for engineer implementation.
↳
Our updated paywalls aim to improve the premium user experience and visuals across the board to modernize the current Tinder revenue services in terms of usability and brand design.
the future of paywalls
the future of paywalls
With Project Dynamic Paywalls, we can build a framework for future iterations of all in-app paywalls and define Tinder’s visual approach to revenue features.
↳
Componentized Paywall Elements
↳
Premium Branding
↳
Using componentized, reusable elements across our revenue paywalls increases alignment across designers and reduces workload for engineer implementation.
↳
Our updated paywalls aim to improve the premium user experience and visuals across the board to modernize the current Tinder revenue services in terms of usability and brand design.
↳
Componentized Paywall Elements
↳
Premium Branding
↳
Using componentized, reusable elements across our revenue paywalls increases alignment across designers and reduces workload for engineer implementation.
↳
Our updated paywalls aim to improve the premium user experience and visuals across the board to modernize the current Tinder revenue services in terms of usability and brand design.
the future of paywalls
With Project Dynamic Paywalls, we can build a framework for future iterations of all in-app paywalls and define Tinder’s visual approach to revenue features.
↳
Componentized Paywall Elements
↳
Premium Branding
↳
Using componentized, reusable elements across our revenue paywalls increases alignment across designers and reduces workload for engineer implementation.
↳
Our updated paywalls aim to improve the premium user experience and visuals across the board to modernize the current Tinder revenue services in terms of usability and brand design.
hi
hi