Redesign AllTrails' paywall
to increase conversion rates
Timeline
2 weeks
Role
Product Designer (UX/UI)
Responsibilities
Strategy
UX research
Visual design
Prototyping
Usability testing
Project Type
Commercial case study,
Paywall interface
This project is a fictitious scenario.
Tool
Figma, Adobe Suite
What is AllTrails?
AllTrails is an outdoor fitness app, catering primarily to hiking and park adventure enthusiasts. The app offers both freemium and premium upgrade options, which is AllTrails +. Subscribing to the premium membership grants access to the full range of features.
Challenge
All Trails’ paywall interface contains some confusing elements, leading new users to be hesitant to subscribe.
Solution
01.
Make the paywall interface cleaner and incorporate elements that increase user satisfaction.
02.
Utilize visual elements to communicate the app's features.
Heading
High Level Goals
01.
Enhance user confidence and build trust in AllTrails by meticulously designing the paywall.
02.
To understand outdoor sports enthusiasts, what factors influence their decision to pay.
Design process
Since time is tight for this case study, I've started by planning out the design and research steps, making sure to manage my time effectively.
01. Define the problem
- In addition to summarizing the issues myself, I also refer to the paywall case studies and paywall references provided by Adapty.io to deduce and validate problem points.
02. Identify target users
- Understand the target audience for AllTrails.
- Gain insight into the motivations of existing paid subscribers.
03. Summarize personas
- Personas help me select usability testers.
04. Research & Brand Immersion
- Crafting the Style Mood Board.
- Understand the design systems of AllTrails.
05. Create Prototype
I create two prototype for A/B testing:
- Version A: Focus on revising paywall text content and layout.
- Version B: Besides adjusting the paywall text content, also add visual animations to showcase the app's features.
A/B testing needs more participants for accuracy, but I had limited resources. So, I focused on asking users their opinions through surveys to understand what they think about the paywall's modification. This feedback will help me make better adjustments to the paywall in the future.
06. Usability Test
- 10 participants for A/B testing.
- Conduct surveys to assess user satisfaction for each added modification.
07. Iteration
- According to the feedback received, prioritize and make adjustments accordingly.
Define the problem
The unclear layout of information on AllTrails' paywall may make users hesitate about subscribing.
Actually, AllTrails' paywall is already well-designed, but I believe we can enhance it with some more impactful elements to increase conversion rates.
Research
I focus on understanding what paid AllTrails users care about or like in the app features, and immerse myself in AllTrails' branding.
I defined 2 user archetypes and mapped them to their needs for an outdoor activities app. Personas help me select usability testers.
Personas
AllTrails CEO Ron Schneidermann emphasizes that AllTrails is focused on serving "people who simply being outside," not just professional hikers. So, my persona mainly includes economically stable working professionals and families who enjoy outdoor activities but may not be highly knowledgeable about hiking.
Understand existing paid subscribers' motivations
I joined AllTrails user forums on Facebook and Reddit to find out why users decide to pay for the app. I discovered that feature like Lifeline are valued by users but haven't been well advertised（It also doesn't appear on the paywall）, so many users don't know about it. I want to highlight its importance because safety is crucial for our key users.
Safety is the top concern for AllTrails paid users.
Inspirations and paywall reference
AllTrails is a 'landing page' paywall. This type of long-form paywall can effectively highlight the app's features.
Therefore, I will make the following adjustments for new paywall:
1. Adjust the placement of prices.
2. Add elements of social proof.
3. Explain the premium version’s value in comparison with the free version.
4. Avoid using ambiguous language.
5. Add voluntary contributions information.
I obtained a lot of knowledge about paywalls from case studies on Adapty.io.
My goal is to design within the visual style of the AllTrails design system rather than creating a new design.
Crafting the Style Mood Board
I designed a style mood board to serve as a visual reference, ensuring that the prototype's visual design stays true to the AllTrails style.
First prototype and usability testing
I make two prototypes plus the original AllTrails' paywall for usability and A/B testing.
Version B
Added three slides of animated visuals to showcase AllTrails' key features and revised paywall.
View Prototype >>The objective of testing
1. Understand user opinions on each adjustment
I conducted a survey asking users for their opinions on each paywall adjustment, allowing them to choose between 'Useful' , 'Normal', or 'Not Necessary' options.
2. Understand user habits
Would adding visual animations to showcase features be helpful? Do users find it too lengthy and abandon it?
Usability test feedback results
Insight
I found that users are more concerned about whether there are discounts or free trials, the features they are paying for, and other users' reviews when considering a subscription.
Point 10: When users hesitate, they are more willing to pay because they can contribute to charity.
Point 11: When users are unsure about subscribing, the reviews of others can serve as a powerful motivator.
Point 1: This sentence instills confidence in users.
Point 9: Some testers didn't understand the concept of "lifeline" from the text alone. They said the animation that showcase the lifeline feature helps them know what it is.
Point 4: When the price is fair, users feel more confident subscribing, knowing they can easily cancel their subscription if needed.
Observing the habits of users
Insight
When observing users, I noticed a common behavior: many skip the onboarding animation and head straight to the paywall. Out of ten users, only three don't skip the onboarding screen. When I asked why, it became clear that they prefer visual cues for understanding. Conversely, those who skip the onboarding animation lean towards text-based thinking. Nonetheless, what matters most is that all users carefully read the paywall, making its text critical.
Users find "7 days free trial" more straightforward and understandable than "your first week‘s on us"
7
out of 10 like
Version A
Revised paywall
Three-slide feature introduction too lengthy.
3
out of 10 like
Version B
Revised paywall +
animated features showcase
Unclear pricing stops them to subscribe.
0
out of 10 like
Version C
Original version of
AllTrails' paywall
Then, I asked users if they would subscribe directly on the sign up page for a trial period. The answer is 'No'. They prefer to first try the free version, and only consider subscribing when they are certain they need to access premium features.
Therefore, the best approach is for the paywall to appear immediately when users click on the premium service they desire, informing them that the service requires payment.
Revised prototype
Based on user feedback, I have adjusted the prototype accordingly. I have shortened the onboarding pages and animation duration to prevent users from feeling bored and wanting to give up. In addition, I also added a pop-up paywall. Whenever users click on a paid service, a paywall screen will directly pop up.
Revised paywall of AllTrails
Reduced the number of pages for animated feature introductions.
Speed up animations and avoid blank screens, ensuring that the screen remains visually engaging. (Even in static states, the message conveyed by the visual should be clear.)
Changed "Your first week’s on us" to "7 days free trial."
Pop up paywall
Added a pop-up paywall when clicking on premium features.
I discovered that AllTrails also features a pop-up paywall, along with discounted offers. As a result, I created an additional version with a discount interface.
Figma Files
If you'd like to view high-resolution images, feel free to visit my Figma file. Any questions or suggestions are welcome, please feel free to contact me.
Key learnings
I want to create AllTrails' paywall because I enjoy using it for hiking. However, I noticed that their subscription details are a bit unclear and might confuse users. I also observed similar concerns from other users. So, I decided to work on this theme. This project is not commissioned by AllTrails company. Throughout this process, I gained some key insights.
· Gain accurate results with high-fidelity designs
Although wireframes are important, in this case, conducting usability tests directly using high-fidelity designs will yield more accurate results. Because users are very cautious about payments, they are highly sensitive to the information presented in the paywall.
· Text is crucial
While images may effectively convey the app's functionality, when it comes to the paywall, users still prefer to rely on text to determine whether to subscribe. The interface text is clear and concise, with comprehensive feature descriptions and user reviews serving as a significant driver for transitioning from freemium to premium.
· Extended user testing cycles and increased user count
For outdoor fitness apps, a longer schedule is required for testing. This is because users typically consider subscribing only when they find the app's features truly useful. Additionally, the number of users is a crucial factor for the accuracy of AB testing. If the budget allows, I will invite more users to participate.
· Be Prepared to Adapt
The results of usability testing can be unexpected, requiring adaptability and quick adjustments.
Next Project
A Responsive Website For Customers To Find Ideal Open Account Solution In 3 Minutes
Next Project
A Parking App Seamlessly Integrates With In-Vehicle Infotainment For Quick Payments By Drivers
