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.
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.
3 Product managers (WIRED + Condé)
Consumer marketing team (Condé)
Creative directors (Condé)
2 Dev teams (WIRED + Condé)
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.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).
User flow for legacy system
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
- Select subscription type
- Mailing address
- Select payment/input payment information
- Gift recipient name
- Gift recipient email
- Gift recipient mailing address
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.
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.
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.
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.
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.
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, 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.
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.
Final design version
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.
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.
Collaborating with the PM on error message writing
Designs that were launched
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.