2 weeks
Product Designer (UX/UI)
Strategy
UX research
Visual design
Prototyping
Usability testing
Commercial case study,
Paywall interface
This project is a fictitious scenario.
Figma, Adobe Suite
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.
All Trails’ paywall interface contains some confusing elements, leading new users to be hesitant to subscribe.
01.
Make the paywall interface cleaner and incorporate elements that increase user satisfaction.
02.
Utilize visual elements to communicate the app's features.
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.
I create two prototype for A/B testing:
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.
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.
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.
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.
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.
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.
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.
I make two prototypes plus the original AllTrails' paywall for usability and A/B testing.
Added three slides of animated visuals to showcase AllTrails' key features and revised paywall.
View Prototype >>I conducted a survey asking users for their opinions on each paywall adjustment, allowing them to choose between 'Useful' , 'Normal', or 'Not Necessary' options.
Would adding visual animations to showcase features be helpful? Do users find it too lengthy and abandon it?
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.
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"
Three-slide feature introduction too lengthy.
Unclear pricing stops them to subscribe.
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.
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.
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."
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.
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.
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.
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.
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.
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.
The results of usability testing can be unexpected, requiring adaptability and quick adjustments.