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.

 
 

Challenge

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.

Role

Design research
Product design

Collaborators

3 Product managers
Consumer marketing team (CM)
Creative directors
2 teams of developers

 
 
On the design side, Tiffany Yu from the WIRED team created over 120 detailed specs for this project. Tiffany’s passion for the user helped us at every turn. Her redesigned order form now converts at a 12.15% rate, up from 7% pre-launch.
 
 

. . .

 
 

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_Before.png

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).

 
WIRED_User Flow_Subscription_032318.png
 

Determining requirements

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

Information requirements

  • Select subscription type
  • Name
  • Email
  • 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.

 
WIRED_Logical and efficient paths.png
 

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. 

 
WIRED_Checkout Order Form Flow.png
 

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.

WIRED_Filter by destination first.png

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.

WIRED_Filter by customization.png
 
 
 

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
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.

WIRED_Speed up process.png
 
 

I worked through a few iterations with the stakeholders to optimize for short completion time.

 
WIRED_Happyframes.png

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.