The Problem
B/R LIVE is an online sports video streaming service with close to 1.5 million users. The service offers single games on a pay-per-view basis or via a subscription (billed monthly or annually). We recently revised the purchase process based on a few issues:
The engineering team wanted to make the purchase form off of the page streaming video (users were getting a free preview while they checked out). Conducting commerce along side live video was causing massive load issues and was causing users to be unable to complete their purchase.
Through qualitative user research we discovered some usability issues with the process, especially around the ability to enter a coupon code. We wanted to address those issues.
The Product Marketing team wanted to be clearer about what the different price points are and to explain that for more dedicated fans, purchasing a subscription might be a cheaper option in the long run.
Goal
Create a stand-alone purchase experience that performs reliably and clearly informs users of the options available. Additionally, craft an easier experience for users that possess a coupon code.
Previous State
The call-to-action to purchase wasn’t very clear. What does “$1.99+” mean, exactly?
Streaming live video and processing payments at the same time was a nightmare scenario for our engineering team.
Process
Initially I reviewed findings from our research team from a usability study they performed on our site the year before.I also conducted competitive research by looking at best-in-breed ecommerce sites to examine their attributes. I also purchased a copy of Nielsen Norman Group’s Ecommerce User Experience report, looking specifically at their recommendations for the checkout process.
Once I completed my research, I created a flow diagram to convey my recommended approach. I suggested combining the existing flow into fewer steps and making the up-sell message part of its own, clear step. I also stressed returning the user to where they came from once they completed their purchase and providing a clear link to their purchase library.
With the flow agreed upon, I began creating wireframes. Collaborating closely with Product Strategy, Product Marketing, and Engineering, I worked through 5 different versions of wireframes and interactive prototypes, trying out different options and styles. You can see the final prototype I created here: https://eq4mxi.axshare.com.
After reviewing with the team and revising the wireframes and prototype, I worked with a UI designer to tighten up the presentation of the screens and the responsive aspects of the experience.
Results / Next Steps
Flow diagram showcasing the different paths we would have test subjects move through
The revised purchase flow launched in early August of 2019. To make sure we’ve addressed the problems we were trying to solve, I partnered with our UX Research department to conduct a usability study. We developed a Research Plan in tandem, and the test concluded that while our flow was straightforward, there was more that we could do to better spell out the fine print so customers clearly understood all of the content they would have access to if they were to opt-in to a subscription.