View
More

The Independent: Sales page

Helping the online newspaper succeed in their first foray in building a premium subscription service.

Live preview

About the Project

The subscription product at the Independent evolved throughout my time there. When I joined the product team there was some concern around users’ views on their new subscription product “Independent Minds.” Rather than relying on assumptions I undertook multiple types of user testing to get real user feedback, which went on to inform the rebrand of the product to "Independent Premium," a much easier to understand product title.

Date:

September 2020

Client:

The Independent

Services:

Product Strategy

My role

Working closely with the marketing team I led the subscriptions page redesign and the on-site conversion rate optimisation programme which ran in parallel.

Internal traffic sources

From the internal traffic source data below we can see that for many visitors the subscription page was not found via an on-site prompt, which contains contextual information, but via a solitary button on the nav bar. Therefore the subscription page has to work hard in conveying the product quickly and succinctly.

Heat-maps

To start to build an understanding of the current performance of the subscriptions page I used Hotjar to analyse scroll depth and click hotspots. Two key areas of interest were found at this point; over 75% of visitors to the page were dropping off before viewing the full suite of product SKU's and there was a high concentration of clicks on the "View monthly plan" CTA, showing a potential need for a customer to view all product types before being comfortable making a purchasing decision.

On-site surveys

Further quantitative data was collated via on-site surveys. Targeting users on the subscriptions page I pulled out a number of top level themes. For many the pricing of the product was an obvious concern, highlighting the need to convey the value of the product benefits clearly. Another common theme was that there was confusion between the two different products, Premium and the Daily Edition, especially as most benefits were shared between the two SKU's.

Voluntary churn feedback

I had recently brought together user feedback across the business to build a robust UX roadmap. This allowed me to validate some of the assumptions made via quantitative data with qualitative user feedback. Below is a copy of my initial UX roadmap visualisation, which ranks frustration themes via value (qty of times a theme is mentioned) and complexity (assumption on how hard it would be to unpick the core issue and solve it), I have hidden the data as it is business sensitive.

The difference between the two product SKU's was a definite concern amongst users, and had been a common reason why people ultimately cancelled their subscription. There was also a validated frustration around pricing, with many users not realising what price they would be paying after the initial offer period.

Problem statements

I presented the initial data back to the marketing and editorial team. Together we came up with a number of tangible problem statements that would inform the new subscription pages design moving forward. We knew that the page was currently too long, meaning we needed to be extremely careful with how much information we include. There was also a decision made to bring the two product SKU's together, creating two tiers instead, which would reduce confusion around why benefits could be found on both products.

Future flexibility

The marketing team also wanted the new page to be built within our subscriptions platform, Piano, so that we could gain the flexibility of IFrames and A/B test in the future. I undertook a workshop with the marketing team to map out their potential future tests, which helped determine which potential solutions wouldn't be sustainable.

"There was also a decision made to bring the two product SKU's together, creating two tiers instead, which would reduce confusion around why benefits could be found on both products."

Usability testing

An initial round of user testing with the current selling page also highlighted a performance discrepancy between desktop and mobile. The last design had been desktop first, and so it was important that this time the mobile format took precedence.

Ideation

Through the ideation process I looked at a number of different options to present the product as succinctly as possible. I knew there was a need to show product benefits as early as possible, and to make our pricing structure clear.

I played around with different hierarchies, but wanted to keep the key CTA's above the fold where possible. Through a number of feedback meetings I was able to work with the wider team to understand which design would adhere to future business objectives and the marketing teams needs in terms of creative flexibility. Below you can see four different options I initially mocked up.

Prototyping and usability testing

After two rounds of usability testing on the tabbed and card approach (option 3 and 4) it was clear there were pros and cons of each. After each round of testing I would plot user feedback to highlight areas that users didn't like or understand, areas they did like and elements they expected to find but didn't. From there I presented the feedback to the wider team and defined areas of improvement and actions for future prototypes.

Refining the solution

Ultimately I was able to design a mixed approach solution using elements of both designs. This prototype performed best across qualitative feedback and metrics and was a good starting point for future iteration. I also worked closely with Piano and our internal development teams to undertake assessments and ensure the UX was technically viable.

View Figma prototype

UI involvement

At this stage I started working with a UI designer to start pulling together the building blocks of the final design. I would take their designs, create a prototype around them, test and iterate. Through this iteration I was able to identify many smaller frustrations that we could solve relatively easily.

Iteration

The Daily Edition app was a continued source of confusion, and so a tooltip was added to provide the user with much needed context. A rolled up yearly price was included to help users compare prices quickly and easily. A question was added to the FAQ's letting prospective customers know what payment types were allowed. We removed the term "Digital" from one of our SKU's, as it implied the other product was partly non-digital. We moved to the much clearer offer pricing terminology of "£1/month for 3 months," in this way users knew that the total price for 3 months was £3, not £9 as many people had answered before.

Key results

Through six rounds of usability testing I am extremely happy with the final result. Qualitative metrics steadily increased through the design process. 100% of users now say the product offering and pricing is either very clear or clear (up from 20% on our current design).

View final UI

On-site prompts

On top of redesigning the main selling page I looked to optimise of our on-site prompts, which can be the first touch point our users' interact with before deciding to subscribe. These optimisation tests are done over two weeks using our subscriber platforms' A/B testing functionality. The tests followed a round robin load balancing format and the winning variant goes on to become BAU. We also used Google Optimise where possible to run larger variants outside of the on-site prompts.

Showing the product proposition more clearly and providing a value driven CTA had huge impacts on some of our highest exposure prompts. The example below shows an increase in conversion rate of +898%.

No items found.