WIRED (SF), owned by the mass media company Condé Nast (NYC), is a print and online magazine that reports on technology and how it impacts every aspect of our lives.
WIRED needed to shift from an ad revenue to a paywall business model so it's better aligned with their mission. Our team, split between WIRED and Condé, was against an intense deadline to launch a paywall experience on the existing website for an audience who gets the most satisfaction from accessing content. Most of these readers arrive at WIRED.com from external sources and range in age and gender.
Our goal was to design, implement, and internally test the first version within a three-month timeframe. The new subscription form was one part of the paywall I worked on and as the only product designer, I aligned the stakeholders and included them in the design process.
3 Product managers
Consumer marketing team (CM)
2 teams of developers
. . .
Aligning design with business strategy
The product team wanted me to execute designs right away but I pushed for time to get context on the company strategy, product objectives, and metrics to form the right design vision. Their main concern was conversion rate but there wasn’t alignment on the technical constraints or goals so I facilitated conversations between stakeholders to piece the specs together. In parallel, I explored ideas off of learnings from various research. My approach was to design with no constraints and then make relevant tradeoffs as the spec gets defined.
WIRED.com checkout flow prior to the paywall launch
Understanding the legacy system
For this new experience, I documented the paths that lead to the subscription checkout page all the the way to receiving entitlement and sought to understand how the back-end worked so we can be better informed when designing for all types of users (ad-free subscribers, print subscribers, non-subscribers with sign in accounts, new subscribers).
The subscription order form was the key to unlocking content for readers who cared about access. The design vision was to have a short order form that optimized for a quick checkout process.
General user tasks
- Pick a subscription type (bundle, digital-only, gift, or a combination)
- Gift a subscription
- Pay for subscription
- Select subscription type
- Mailing address
- Select payment/input payment information
- Gift recipient name
- Gift recipient email
- Gift recipient mailing address
Logical and Efficient Paths
I determined the minimum amount of information we needed for each offering (gift, digital-only, bundle, domestic, international and student/educator) and grouped them in a way that section off the form into 3 steps.
Users are filtered into different paths depending on their previous input and in the order that's easiest to fill out to hardest to fill out. This ensures that the form is as short as it can be and allows us to give them a sense of accomplishment respectively.
The team had decided to build a responsive form that aimed for an accessibility compliance level of AA. My strategy was to guide the user through checkout with responsive disclosure. This meant the input requirements adapts to the subscription type selected.
3 types of customization (bundle, digital only, and gift) x 3 offerings (domestic, international, and student/educator) = 9 custom views for the form
. . .
Explorations and refinement
With our design vision on mind, how does a one-page checkout responsive site with responsive disclosure show up on the UI without it being too disorienting?
guiding the user
Filtering users through the form by destination and then by customization
Unfortunately, this wouldn't make sense for digital-only subscription and entering the data would be extra work with the irrelevant field. Moving customization before destination may solve this.
Filter users by customization and then while filling out their mailing address
This groups relevant information and is placed in context but the interaction and visual change at this spot may cause the user to have to reground themselves too much.
Speeding up the checkout process
Google autosuggest search for the address
This saves time if it works well and if the address shows up but autosuggestion doesn't meet ADA's AA requirement.
Express payments, such as ApplePay and PayPal Express, only worked for specific devices and those who didn't gift. We would have to hide the express payment UI when it doesn't apply since it was device specific.
I worked through a few iterations with the stakeholders to optimize for short completion time.
Proposed subscription form
As we were narrowing down on the design, we had found out that there was less dev resources given to us and our long time third party subscription processor had their own back-end restrictions on top of WIRED’s own constraints. This affected the design vision by changing the number of input fields and number of forms.
We worked backwards to mold the proposed into what was feasible in the timeframe and resource bandwidth. As a result the one-page form became 3 forms and the number of input fields increase so I ensured that the interaction and affordances were designed to be in conversation with the user. I sat down the the 3rd party vendor to walk through the designs so the details were implemented correctly.
As I was iterating, I had chosen to take pieces of WIRED.com existing style guide to dictate the visual design. This would maintain brand integrity for a brand that’s known for their design. I adjusted where needed to meet AA ADA. I had left some space on a few paywall related designs for the art directors and other stakeholders to put together commissioned illustration and copy.