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 A

This version revised the text content and layout of the paywall.

View Prototype >>

Version B

Added three slides of animated visuals to showcase AllTrails' key features and revised paywall.

View Prototype >>

Version C

Original version of AllTrails' 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."

View Prototype>>

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.

View Prototype>>

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.

Figma File

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