Guardian Weekly
Initial brief:
Re-design the Guardian Weekly product page to reflect the upgraded, more premium physical product.
Extended brief:
Very early on it became clear to me that the product page shouldn’t be tackled in isolation. The brief got extended to the subscription/checkout flow.
Process
Understanding the context
Research and Testing (old design)
Kick-off meeting and workshop
Sketching up ideas
Design system
UI
More testing
Kicking-off the checkout flow redesign
Context
After identifying all stakeholders across marketing, design, data and business analysis, editorial, user help, engineering and UX, I ran a cross-functional kick-off meeting where everyone had a chance to declare assumptions, identify the unknowns, assign roles and responsibilities and agree on the project objective and expectations.
My next steps:
Collecting and reading through all existing research (e.g. customer surveys, market research into the readership of the Guardian weekly, contact drivers), I interviewed individual stakeholders - the members of the Acquisitions and Retention team, the editorial team and the Operations.
Running a landscape analysis to familiarise myself with the industry standards and users’ mental models. I created a Pinterest board with common patterns and knew the subscription and checkout flows of The Economist, the FT, the Times, the New Yorker and many other by heart.
Looking at the performance of the existing page using GA metrics - I requested to have access to the analytics and spent some time looking at the funnel. The challenge of course was that Guardian Weekly had a fairly small amount of traffic.
Getting my head around (and documenting) complex fulfilment and subscription management rules - from delivery and shipment information.
Assessing all inward and onward journeys (journey mapping using draw.io). How would a user end up on the product page? Where would they come from and what would they expect to see? The Guardian has a fairly complex ecosystem and is spread across at least 4 platforms.
Co-creating a recruitment brief for testing the existing subscription page to validate our assumptions. The results of the lab test highlighted the main user pain points and areas of focus.
Issues with old design:
The existing page lacked a prominent call to action, had suboptimal mobile experience, very low conversion rate, and didn’t do the newly redesigned magazine any justice
The checkout process that followed the product selection was confusing, consequently it had very poor conversion metrics across all products
There was a lack of clarity around pricing, delivery, currency and discounts
It is a low traffic page, therefore achieving statistical significance during split testing was hard. We had to rely heavily on qualitative testing.
How did we know what were the right problems to solve?
Teaming up with a UX researcher, I lab-tested the existing product page and the onward journey (checkout). The results highlighted the main user pain points and areas of focus (e.g. unclear subscriber benefits, complex pricing etc). The main finding was that most of the problems our subscribers would encounter were around the check-out process, as opposed to the actual product page.
I shared our findings with the Product team and advised extending the project beyond the Product page redesign, stressing that the most impact would come from improving the entire journey and approaching it holistically, ie placing the product into the wider context.
Unexpected bonus: Design system & Improving internal process
One of the things I noticed when assessing the existing product/subscription pages and journeys was a lack of shared design language, layout or even a grid. I learnt that every product page was designed in isolation, from scratch, which proved to be quite effortful, laborious and wasteful in terms of resources.
The subscription pages lacked cohesive UI, which translated into a jarring experience for the readers, especially in the product comparing scenario. I proposed to approach the Guardian Weekly subscription journey redesign as a foundation for the new design system across the subscription platform.
I’ve also started a process of redesigning the header section and the navigation.
Phased approach
Once I’ve sourced all the pieces of the puzzle, I started looking at the best way to deliver the work. That led me to propose a phased approach - releasing the journey updates in stages (that also fed my passion for lean, “fail fast, learn fast” approach). Together with the PM we outlined requirements for each stage, and I started sketching.
Sketching
After running a bunch of white-boarding sessions with designers and engineers, I came up with a set of heavily annotated Phase 1 wireframes and a backlog of ideas for Phases 2 and 3.
Solution for Phase 1
I removed one extra step from the user journey which allowed the readers to access important information (e.g. price)
I introduced a single, prominent call to action (that also looked like one!)
I looked at the entire journey, from all entry points to welcome email and subscription management.
Bonus: I pushed for the gifting option (as an industry standard for subscription products) to be delivered in time for Christmas to increase sales and give the marketing team more options for their pre-Christmas campaigning.
I then engaged our in-house creative agency (Oliver) and the marketing manager in discussing UX copy and our SEO & communications strategy.
Visual design and prototyping
As soon as I created my first mock-ups in Sketch, I put them in front of an engineer (collecting early feedback from developers is an essential part of my process). Once the first round of feedback was applied, I paired with our Visual designer. Within a day we came up with a few visuals that I stitched together into a Marvel prototype.
Lab & A/B testing
Together with a UX researcher, we composed a recruitment brief. Soon we had 8 participants lined up for 2 days of lab testing - a combination of usability and content testing. The goal was to test the new layout, the level of information provided, whether or not the pricing and the offering matched user expectations. We also wanted to confirm our assumptions regarding issues that needed to be solved in Phases 2 and 3 (checkout process) - to capture those I created a quick empathy map in Excel.
In the meantime, we also took a decision to go ahead with an A/B test against the control version. That way we would have both qualitative and quantitative feedback to present to the stakeholders.
Stakeholder review & Next steps
Following the positive feedback on the new Guardian Weekly page and its steady 71% probability to be more successful in the A/B test, the Guardian fully switched to the new design. We achieved a 13% uplift just from covering Phase 1.
Once Phase 1 changes went into A/B testing, I went back to the whiteboard to sketch and solve the problems around the payment/checkout flow based on the testing results.
I’ve since fully redesigned the checkout flow for 3 subscription products. All of them use the same design system, modular approach and are highly re-useable and easy to test. The most important change would come from the introduction of the 2-step sign-in (SEPARATE CASE STUDY COMING SOON).
I also lined up some visual changes and new features to the product page based on the user testing results.
To sum it up…
13% uplift
The re-designed subscription page alone resulted in a 13% increase to the conversion rate (Phase 1 out of 3).
Holistic approach
Looking at the entire subscription journey instead of the product pages in isolation increased visual consistency and offered the users a less jarring, more coherent experience.
Design system
I introduced design system thinking to the project and laid a foundation for reusable components to be used with all future product pages.