While I was at Sportsrocket, I worked with the National Lacrosse League to build a mobile streaming app for iOS. The app allowed their customers to watch live and prerecorded games, catch up on news, and learn about their favorite teams, watch highlights and more!
There where several aspects of the app I’m proud of (the team filter and cms-powered navigation are very cool). But, for this post I’m going to focus on the purchasing flow.
To start with, a little context - The NLL wanted to build an app that encouraged exploration. As a new league, it was determined that they wanted to dangle a fairly large carrot without hassling users to buy until it became necessary. Once they decided to buy, the app had to be simple - the major use cases and personas all fell into the “sports fan first, technical people second” categories.
To achieve this, I designed a straight forward purchasing flow that leveraged the iOS pay functions that also used visual designs (like selecting an option mimicking a physical ticket) for improved usability. In the end, I was able to narrow it down to two flows:
Video Demo
Before we get into the details, here's a quick video demo:
MVP Goals
1. Let Users Purchase NLL Products From Within The App
The new streaming apps quickly ran into an issue of access. initially, the NLL wasn't willing to budget for iOS payment integrations, since Apple takes a cut. The solution was to push users to the web and then grant access on their mobiel devices. Within the first few days their users began tanking the reviews due to this cumbersome flow. We quickly moved on implementing the designs.
2. Simplicity
The design needed to be very accessable to a wide range of technical litercy. The average NLL user was not generally up to date on mobile technologies. THis influeced the design in several ways. Forexample, the visual design mimic a paper ticket and follow a similar layout to the NLL paper tickets. The purchase overlay stacked on top of the video to focus attention vs something like a banner.
3. Speed
During the research phase, we determined that the majority of these purchases happened at the start of or during a match. users wanted the quickest route to access as possible. This meant that the app not only had to be fast, but the flow and options needed to be simple and straightforward.
User Flows
Base Purchase Flow
I want to buy a season pass OR a Team Season pass (any team) OR a single game in advance
No Access Trigger
If a user does not have the proper access, the app tirggers a player overlay. Users can then sign in, or purchase access. Purchase options included: Single purchase of the current game, a team season pass for either team playing, or a league season pass.
Purchase Form
We also needed a simple form that included the ability to add coupon codes and calculate all the related costs and fees. The NLL also requested that we only use Apple Pay as the purchase option (credit cards and paypal was enabled via the web interface). The buttons are dynamic - if a user doesn't enter a promo code, then the button is not clickable.
