Paywall redesign
The project: UX/UI design, collaboration, stakeholders engagement and usability testing
My role: I led the User Experience and User Interface of the Espresso app
Collaborators: Espresso app team, marketing, legal, senior leadership, user research, content design
The impact: Improve conversion and engagement with the app
Problem statement
The Espresso paywall was underperforming in terms of conversion. Key issues included the absence of key subscription information and the lack of an annual subscription option, which was available on the web platform and had shown success.
Objectives
Introduce the annual subscription option to the paywall
Improve user understanding of the offering and legal terms
Optimise the hierarchy and layout for better user experience
How did it all start?
Our initiative originated from the strategic belief that introducing an annual subscription option could significantly boost conversion rates. This concept had been brewing within our team for quite some time and had gained endorsement from more senior stakeholders.
Initial exploration
I embarked on a thorough assessment of our existing paywall structure alongside with a research of best practices when designing paywalls and an analysis of our competitors' paywalls and offerings. The outcome of these activities was then discussed with the members of my product team and shared with our main stakeholders, leading to a shared agreement on important areas for change and the hypotheses worth investigating.
Define a plan of action
A carefully designed plan unfolded in three phases:
Iteration 1:
ONLY adding annual subscription option to paywall
Layout tweaks to accommodate additional subscription option (e.g. smaller Espresso logo, margin tweaks)
Iteration 2:
Make all the relevant content and copy updates and additions regarding the pricing and the benefits
Add all the mandatory legal requirements regarding the auto-renewal process
Iteration 3:
Layout UI, UX and hierarchy improvements
Perfecting the screen reader experience
First iteration
Given that we had a really tight deadline for this first iteration, I worked towards showing the monthly and yearly subscription choices in the clearest way and also easy to build. I looked at what our competitors were doing and how The Economist Web paywall solved a similar problem. I realised that using radio button component options was the best way to do it.
At the start, I kept it simple by only showing the prices. The plan was to make it better in the next iteration by adding more helpful information (e.g. savings for the annual option, labelling the two options etc.) and testing them with our users. The early designs were reviewed and improved with input from our the design team, our main stakeholders and the engineers.
Second iteration
Collaborative workshop: shaping essential content
Whilst engineers were building the first iteration, the content designer and I planned and ran a workshop with key stakeholders from marketing and legal departments. Our main goal was to align on what content was crucial for the upcoming Espresso app paywall. This alignment would guide our future design steps and testing strategy. The workshop focused on:
Any relevant information that need to be added
What information need to be more visible than others
How consistent we want to be with the The Economist Web paywall
At the end of the workshop there was a strong alignment. It was agreed that the primary information should be the pricing options and communicating the process of starting a free trial. This was accompanied by detailed information about the trial itself and when the subscription begins. Secondary information covered benefits of subscribing, the value of annual subscriptions, and comprehensive terms and conditions, addressing legal aspects of trials and subscription cancellations.
Design variants for user testing: a collaborative effort
Drawing from this crucial insight, I designed two design versions for user testing. Collaboration remained central to this phase, with ongoing partnership between me and the Economist app designer, who was facing a similar challenge. This collaboration allowed for a continuous exchange of feedback and ideas, fostering a seamless joint effort.
Key design enhancements: elevating the paywall
The paywall design underwent significant transformations:
Titles were revamped to emphasise subscription promotion in “v1“ and free trial initiation in “v2“.
One variant incorporated a comprehensive list of user benefits, while the other highlighted app features.
Clear statements about post-trial subscription renewal were introduced.
Concise bullet points clarified auto-renewal subscription procedures and essential legal disclaimers.
Usability testing: insights from user feedback
Our usability testing included the existing paywall and the two new variants. Our objectives were to understand user sentiment towards the existing paywall and identifying missing information or barriers to subscription. Furthermore, we wanted to identify the variant that resonated best with users in terms of clarity and conversion potential.
The results highlighted:
The existing paywall got positive responses, but it was considered lacking compared to the new variants
Variant two held an advantage and it was praised for how straightforward the ‘free trial title’ was in conjunction with the sentence after the pricing options
Legal copy additions were well-received for addressing user queries and promoting trial initiation
Including the app features in variant two helped users better understand the app's value
Most respondents would choose a monthly subscription over the annual one. Interestingly, some users preferred starting with a monthly subscription and transitioning to annual if they liked Espresso.
Finalising the designs: bringing it all together
Informed by user testing insights, we identified a winning design variant. After presenting the research findings, we sought input from stakeholders, leading to unanimous approval and final sign off.
This design was then handed to our engineering team, ensuring a seamless design-to-development transition. The culmination of this journey marked the launch of the transformed paywall in July 2023.
Third iteration
This last iteration involves making all the remaining UI and UX changes that would improve the paywall’s clarity, hierarchy of information and ultimately look and feel. The areas I looked into were:
Add the labels “Annual“ and “Monthly“ to the pricing options, as well as, adding how much the annual options is monthly and showing the percentage of how much people would save choosing annual (this was tested by my colleague who was working on a similar challenge)
Making the “Start free trial” button sticky so that is always visible
Change the position of the “Log in” link where is always visible
Improve clarity around the “Restore subscription” button
Move the T&Cs and Privacy links closer to the main button (as per Legal request)
Final UI polish and improvement of the page
Investigate the position of the app features (above or below the pricing options, to check with the research team the best way to test this)
Test some copy changes as per senior stakeholder request (some changes in the title and on the pricing options, to check with the research team the best way to test this)
After completing the initial design exploration phase, I worked with the engineers to check if the designs could be made from a technical perspective. We found that everything could be done. Furthermore, I talked to the research team to figure out the best way to test the copy changes requested by the senior stakeholders and the position of the app features.
These conversations helped me draft an action plan, which was shared and signed off by my product team and our stakeholders. The plan is to first make changes to how the design looks and how things are organised (UI, UX, and hierarchy changes). After that, we will do two different A/B tests to see if the changes in words help more people start a free trial, and to see if showing the prices before the app features list makes more people decide to subscribe.
Right now, we are waiting to start the first step of the plan, which is making the design changes. We are planning to start this in January 2024. After that, we will do the two tests to see how well the changes work.
The results
It went live in May 2023 and led to an increase in people trying out our service – more than 50%. By promoting the annual option we have increased the annual mix from 10% to 25%. The CLTV per average user has increased of 12%.
Lessons leaned
The most important lesson I learnt from this project is the power and efficiency of collaboration and re-iterated the importance of listening to all our stakeholders’ points of view and making sure they are followed up. I improved and nurtured a lot of good colleague relationships along the process.
From a design perspective, I had confirmation that clarity is key. I value more and more the importance of showing the right amount of information in the correct position, avoiding useless repetition.