Overview

The news subscription product required better organization and a systems approach to designing and deploying components across the Postmedia Network. Through content strategy and modular components, we sought to unify experiences and create cohesion between all parts of the user journey.

The challenge

Although the subscription offer landing page was redesigned in 2017 (see below), the entire subscription experience was inconsistent and confusing. This directly hit customer support with complaints on both pre and post purchase experiences and dramatic churn trends were happening faster than industry benchmarks.

old subscription ui

The challenge was to break-down each subscription flow in detail, catalog that experience and map user research, customer data and analytics to understand each problem area. As we worked we found many holes in each funnel. Conway's law had taken over, and each experience — paywall, payment, email, identity — was in someway siloed. Users needed to cross-over these confusing and conflicting experiences to complete simple tasks like purchase and update information.

The business sought to increase registration and increase subscriptions. To meet this objective, we needed to build for reliability, consistency and delight. We needed a framework to enable the purchasing experience for users via cohesive components and patterns.

The process

01 Focus on the journey

We took a step back and connected with the subscription sales team to look at the lifecycle of our customers.

journey mural

Once we laid out all the assets — email campaign landing pages and printed invoices — it was immediately clear that the user was barely addressed in a personal way. For example, during the post-purchase cycle, one of the only communications was a notice if their card payment had lapsed.

02 User discovery

The user researcher launched a few tactical surveys that gave us clues into the value proposition and aspects of the experience strategy including content.

user survey

Further, we tested how the current state subscription flows operated from a usability stand-point and matched the user reactions with the survey data.

What we learned:

  1. Wrong time, wrong price: timing and the information surrounding when a price was requested, or how we introduced a paywall was crucial to getting the experience fine tuned.
  2. Content strategy would play a large part in getting users through the funnel. Both our content from editorial, but also the way the subscription UI speaks to the user.
  3. Operationally, it was a struggle and reward to work with diverse stakeholders and bring them through observing and participating in research and defining activities.

03 Discover the parts

In order to tackle each style of experience and behaviour, we identified and proposed UI patterns for five distinct categories of experience:

User State Registering Subscribing Purchasing Flow On-boarding
Awareness Article Counter UI In-app incentive msg. Payment Portal copy New info added to profile - email
Consideration Paywall Offer page + Price Grid UI Optimal Layout Form UI Feature overview and settings in profile UI
Conversion Account Registration CTA Button Payment Button Login UI
Transition Thanks and verify email Hand-off to payment portal Thank you page + email

Knowing the flow we could iterate on designs that worked for each experience. Using design iteration and research support, we began to understand how we might build solutions for each category.

04 Iterations on content strategy and UI copy

We found that the users responded the most when content design and UI shared a sense of simplicity.

registration flow

We found that helpful or flowery explanations were missed and glossed over if they deviated from more established patterns or expected messaging. Readers weren’t reading; they were more anticipating the next move.

transition copy

If we reached a “transition” point — between two experiences — we added extra details around the call to action (CTA).

05 Continuous research with users

We worked linearly through the user journey building out UI and task flows to lead a user through the four distinct states of the experience: awareness, consideration, conversion (the thing) and the transition to the next stage.

During this time we were also testing each of our solutions around each experience and state. The two key items we were looking for was what behaviour mades sense around the call to action and was it clear both what to do now, and what would happen next.

user moments

Knowing that some phases of building create heads down on the team, we started populating slack channels with reminders of who we are building for.

06 Design strategy

While a subscription is tied to the brand of a property, collaborating with marketing and product, we sought to tie the program to the greater network.

patterns

Instead of overcomplicating things, we developed consistent and shared design language that was minimal enough to connect beyond the individual brand. This would enable "heavy-lift" components and flows to scale across the network with little variation.

component example

07 Co-creation: Design your subscription

Working with the user researcher, we developed a user group to understand three main segments around subscription: subscribing to a service, maintaining their subscription, and gaining further value out of the subscription. Focusing on the user journey, and working with these users, we highlighted convergence points around key transitions between contexts and behaviours that prioritized UI and content strategy.

We continued by launching a series of co-creation studio sessions with users that drilled down on the convergence points to gather diverse perspectives and experiences.

The result

We shipped a cross-network product design that placed the customer and the product first. Focusing on actions and content worked.

  • 📈 Test Market Launched October 2019: 18,000 email registrations in a few weeks.
  • ✅ Larger than expected subscription conversions
  • 🚚 A transportable component library for faster designs and iterations as data comes back in and the strategy gets rolled out to other markets.
  • 🧐 Learned a ton about Conway’s law and how to break it up with collaboration!

The design strategy, through cross-team collaboration, was able to create a shared language and understanding of key components and experiences. Based on our outcome principles, teams are now empowered to expand and iterate subscription experience as the product scales.

Team details

Roles Team members
Design Lead: Josh Franco
Development Lead: Greg Reboul
Product Director Veronica Heringer
Product Manager: Sukeina Jethabhai
Research: Yvette Chen
Designer: Adriana D'addario
Information Architect: Peter Mogensen