Digital Checkout
Task
At The Dallas Morning News, the digital checkout experience was redesigned to streamline the experience for potential subscribers by simplifying the checkout process.
Overview
The Dallas Morning News used a multi-page digital subscription checkout flow for their users. This required users to click through 3 different pages before finalizing their purchase. In doing so, this caused a high chance for potential subscribers to rethink their purchase decision and drop-off. Looking to increase subscriptions, the team looked at options to streamline the experience by simplifying the checkout process to increase conversions.
Strategy and Alignment
Working with Product Managers, Stakeholders, and Engineers, research was conducted for optimal checkout experiences both within and outside of the industry. This also included identifying edge cases and potential road blocks due to technical constraints. After gathering all the research and information, a user flow was created to help organize the new checkout flow.
Product Design
The member information, payment information, product benefits, and order summary were all displayed on the same page. After the user filled out the member information correctly, the payment information area was enabled to give a visual indicator to the user that the information they inputted was correctly formatted. This was designed in this manner also due to a technical constraint on the back-end that required correct member information to be filled out in order to create a subscription order.
A few key features were established to streamline the checkout experience for users:
Progress Bar
A visual indicator to let users know how many steps left in the checkout process are left.
Product Benefits
A box that showed the subscription benefits. This helped build more confidence in the user’s purchasing decision.
Sales Tax Detection
Sales tax was automatically generated when the user provided their ZIP Code information.
User-Friendly Input Fields
The input fields had clear labels, description text when necessary, and live-validation to facilitate proper information formatting.
After the launch of the new digital checkout (coined Single Page Checkout), we saw a 14% increase in digital subscriptions within the first month. After a few weeks of A/B testing, results showed a strong increase in conversions and was significantly outperforming the target subscription goal. The new checkout experience was received positively both internally and externally.
However, our work there wasn’t done. The team continued to optimize the checkout experience. We used Microsoft Clarity to help identify when users were getting caught up in the new checkout experience and made several tweaks to the design and back-end.
It was revealed that users were getting caught up in several areas on the page. The progress bar was confusing to users and users were clicking on the numbers thinking it was navigation. We removed the progress bar and instead made the headers on the form more prominent and clear. The payment information area was also taking too long to become enabled after the user would fill out their member information. Initially we thought this would be a good visual indicator to the user that their information was inputted correctly, however it turned out to be confusing to users and they would abandon the cart. Users were also spending too much time looking at the subscription benefits and then ultimately leaving the checkout. We still wanted to include the benefits for product trust but hid them in a toggle view so the benefits wouldn’t distract the user from completing the transaction. We also redesigned the whole sidebar to look less like the input fields of the form so users could focus on the form itself.
The Result
Following the second phase of changes to the design of the digital checkout, we saw an additional 7% increase in conversions in the 30 days following deploy.
