WIRED_Final preview.png
 

Final subscription checkout form design

WIRED is a print and online magazine owned by the national mass media company Condé Nast. Their mission is report on technology and tell stories of how it impacts every aspect of our lives.

 
 

Challenge

WIRED needed to shift from an ad-based model, which usually skews a publisher’s incentives toward clickbait, to a paywall business model. This would diversify their revenue stream and align them better with their mission. Our team was against a three-month deadline to launch the first version of a paywall experience on the existing website. The new subscription form was one part of the paywall I worked on as the only product designer.

Contributions

Design research
Product design

Collaborators

3 Product managers (WIRED + Condé)
Consumer marketing team (Condé)
Creative directors (Condé)
2 Dev teams (WIRED + Condé)

 
 
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.
— WIRED Product Manager
 
 
 

Aligning design with business strategy

The product team's main objective was to increase conversion rate but there wasn't alignment on the technical constraints or goals. Before beginning the design of the spec, I pushed to get context on the company strategy and product objectives. I did research in the form of competitive analysis, stakeholder interviews, secondary research and understanding past user research. 

My approach was to design with no constraints and then make relevant tradeoffs as the spec gets defined. We were designing for an audience who gets the most satisfaction from accessing content. 

 
WIRED_Before.png

WIRED.com checkout flow prior to the paywall launch

 

Understanding the legacy system

For this new experience, I documented the current paths that lead to the subscription checkout page all the the way to becoming an active online subscriber. I also sought to understand how the back-end worked so we as a team could 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_Legacy System.png

User flow for legacy system

 

Determining requirements

The design vision was to have a shorter order form that optimized for a quick checkout process. Users had to option to subscribe to or gift print + digital (bundle) or digital-only.

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
 
 

Content mapping

I determined the minimum amount of information we needed for each offering (gift, digital-only, print + digital, domestic, international and student/educator) and grouped them in a way that section off the form into three steps.

 
WIRED_Content Mapping.png
 

Users are filtered into different paths depending on their previous input and in the order that's easiest 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. 

 
WIERD_User Flow.png
 

At this point, the team had decided to build a responsive form that aimed for WCAG AA. My strategy was to guide the user through checkout with responsive disclosure. This meant the input requirements adapts to the subscription type selected.

WIRED_Product variations.png
 
 
 

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 overwhemling?

 
 

guiding the user

Direction 1: Filtering users through the form by order destination and then by order type.
Unfortunately, this wouldn't make sense for digital-only subscription and entering the data would be extra work with the irrelevant fields. Moving order type before order destination would solve this.

WIRED_Filter by destination first.png

Direction 2: Filter users by order type and then filling out their mailing address if needed.
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 WCAG's AA requirement.

Express payments
Express payments, such as ApplePay and PayPal Express, only worked for specific devices and self subscribers. We would have to hide the express payment UI when it didn't apply since it was mobile device specific.

WIRED_Speed up process.png
 
 

Final Iteration

The product team had then decided parking lot express payments at this point because it would delay launch. I worked on refining the iterations with the stakeholders and finalized the creative direction with the art directors. Below was the final product design vision. 

 
WIRED_Happyframes.png

Final design version

 
 

Implementation

Our team 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 internal constraints. This affected the final design version by changing the number of input fields allowed or needed and number of forms that could be displayed.

We worked backwards to mold the proposed design into what was feasible in the timeframe and resource bandwidth. As a result the one-page form became 3 separate forms. The number of input fields increased. I wored closely with the dev team to walk through the designs so they would understand the details and my thought process.

 
WIRED_Control and feedback.png

Annotations for the dev team and interaction details

 

One of the product managers had a set of proposed error messages from another form. I had made suggestions that were more specific so the order form gave users feedback on what went wrong, why and what the user can do to fix the error in context.

 
Screen Shot 2018-08-04 at 6.25.22 PM.png

Collaborating with the PM on error message writing

WIRED_Final screens.png

Designs that were launched

 
 

Conclusion

It is definitely a challenge to work on a product when the team is discovering specs and limitations in the middle of the process. However, this taught me to constantly evaluate what the design decisions balanced the business needs and especially the reader experience since paywalls impact the reading experience. Even though what we launched was the MVP, I was still proud of what we accomplished with the intense deadline.