My Portfolio
Website Transaction Page UX Design & Usability Testing

<< BACK

6 minute read

Reimagining the Harvard Business Review subscription flow on HBR.org to reduce transaction abandonments.

The Challenge
For Harvard Business Review, a relatively large percentage of visitors to the subscription page abandon their transaction before subscribing. My team was tasked with experimenting with a redesigned flow and UI and then A/B testing the result to see if it made a dent in subscription abandonments compared to the current flow and UI.

We also knew from historical analytic data that many new subscribers were not "syncing" their accounts. This meant that they had a subscription account, but they either didn't have an account on HBR.org, or they had a free account that was not yet linked to their subscription. The second part of the challenge was to eliminate the issue of subscribers not having a synced account on HBR.org, because without one, a subscriber would not have access to subscriber-exclusive features on the site.

The Team
I was the sole UX researcher/designer on the team, and I worked with an interaction/visual designer, a front-end developer, and the product manager on an Agile scrum team in two-week sprints. Once the product was ready for development, the front-end dev manager worked with two remote front-end engineers to make it all happen.

The Analytics
Our first order of business was to review the Adobe Analytics data to get a sense of exactly when users were abandoning their quest to subscribe to HBR. We found that users were abandoning their task at the address form stage; specifically, they were abandoning after they chose their country from the drop-down menu, which was at the very top of the form.

As mentioned above, the analytics also told us that a sizable chunk of users never sync their accounts on HBR.org.

The Sketches & User Flows
To envision a better user flow and UI, I started sketching out components on paper, cutting them out, and arranging (and re-arranging!) them on the table. The entire team took part in this process, using what we know from our respective disciplines to create a (hopefully) improved experience.

In the end, the improvement we designed was what we called the new "sub sync flow." Instead of a flow that directed users to a series of separate pages, with seemingly no end in sight, we designed a flow that presented the next step in an elegant way only when the user was finished with the previous step. Each step built upon the last, so if the user had to go back and edit something they entered previously, they could simply scroll up to do that.

In addition, to solve the problem of so many users not syncing their accounts, we included an account creation/syncing step at the beginning of the flow. Currently on HBR.org, users are prompted to "sync" their account only after they subscribe. This step entails linking either a new or existing HBR.org account to your subscription account, and it's a manual process fraught with usability issues. The new flow brought this process up front and made it less manual.

The Interactive Prototype
After the interaction/visual designer took the paper sketches and created high-fidelity mockups in Sketch, I created an interactive prototype using Axure. The main features of the prototype were the sequence-based flow and the up-front sub syncing step.

UX Research Method #1: Unmoderated Remote Usability Testing
I conducted unmoderated usability testing on the UserTesting platform to gather user feedback on the flow and UI. We ran the tests with 20 users, half of whom were HBR subscribers who had a subscription account on HBR.org, and half of whom were users who had a free account on the site, but were not subscribers ("registered users").

Once the tests were complete, I reviewed both the videos (qualitative data) and the survey responses (qualitative & quantitative data) and entered the information in a spreadsheet. I converted the feedback into a rainbow spreadsheet for easier visual analysis.

The results showed us that the new user flow and UI was delightful to users, and the team decided to move it into preliminary production for an A/B test.

UX Research Method #2: A/B Testing
Before the business took the plunge of fully developing the new flow, they asked us to add the sub sync step to the beginning of the current flow and UI. After conducting the A/B test comparing the current site with the sub sync up front to the current site with the sub sync as is (at the end), we discovered both a success and a failure:

• Success = for users who already had a free HBR.org account, abandonments decreased and all of the users were automatically synced with their HBR.org accounts. This meant these new subscribers had instant access to subscription benefits on the site.
• Failure = for guest users (with no existing account), abandonments increased by 23%. For those guest users who went through with the transaction (and created their HBR.org accounts in the process), they had instant access to subscription benefits on the site. But that 23% increase in abandonments for these users needed to be addressed.

The Bottom Line
From this experiment, we learned that while the redesigned flow reduced transaction abandonment and eliminated the problem of unsynced accounts for registered users, guest users were scared off by the up-front requirement to create an account on HBR.org. The analytics from the A/B test showed that guest users were abandoning the entire process much more than other users, and in fact 23% more than via the original flow.

What does this tell us? We need to consider keeping the account creation and syncing step towards the end of the transaction process instead of at the beginning. We also need to develop a preliminary version of the site that includes the sequence-based flow researched above (but with the sub sync step towards the end) to see if its higher ease-of-use decreases abandonment. This will be the next iteration of the project.