The SportsCastr Web App was the online homebase for the platform, upon arriving at the homepage viewers were presented with a variety of live and recent streams from broadcasters across the platform, along with leaderboards, trending topics, broadcast categories, and more. Celebrity broadcasters included Richard Sherman, Vernon Davis, Bob Costas, and Cameron Lynch, among others.
A key screen on the SportsCastr Web App was the video player. This included two primary elements, the 16:9 video player and the interactive chat panel. Below the video includes information about the broadcast and broadcaster(s), as well as sliders to discover other related content. SportsCastr included two main content types: Second-Screen and Single-Screen content. Second-Screen is your standard commentary with the video on the broadcaster. Single-Screen is a unique experience where commentators are layered over top of the live game footage, keeping everything on screen so you never miss a moment.
The SportsCastr iOS app was a full-featured sports streaming app that allowed viewers and broadcasters to create, manage and watch live and on-demand content in the palm of their hand. The iOS app was fast and easy to get started. The iOS app also included cutting edge features at the time including augmented reality masks, magic backgrounds and multi-cam streaming.
Below are a selection of app screens and flows from the SportsCastr iOS App. The flows below aren't meant to be all-encompassing but are intended to give a broad view of a complex and full-featured live streaming app with various user groups.
To map out the overall structure of the iOS App, I put together a sitemap to help organize the wide range of features into 7 primary sections: Discover, Create Stream, Leaderboards, Favorites, Dashboard, FanWallet, and Profile/Settings. SportsCastr grew into a feature-rich app over time and this sitemap had to evolve over time to account for an ever-changing feature set.
Due to SportsCastr being a feature-rich app with complex interconnected features, I put together user flows to map out how users traverse throughout the different parts of the app. Ultimately, SportsCastr is a live streaming app so content creation and content consumption are the two primary intentions for users that download the app. With this in mind, the user flow map is broken into 5 core sections: Onboarding/Returning, Primary, Content Creation, Content Consumption, and Revenue Generation.
The splash screen includes an animated spinning logo disk that I art directed the creation of, along with various login methods, paginated usage screens users can scroll to for more information, and even a way to skip the signing up/signing in process and jump in quickly. Along with general account information after authentication, the SportsCastr onboarding flow includes two steps to begin to personalize the users home feed with content and channels relevant to the sports, teams, and leagues they love. This immerses the user as soon as they complete onboarding and helps maximize initial retention. There is also a step at the end for the company to collect how a new user found out about SportsCastr to enable us to tailor or marketing efforts in the future with the most effective means possible.
If I had more time on this project... I would like to explore various options for making the streams appear on the top channels screen. Two options I would specifically like to explore are short 15-30 second clips from the videos users can click into or animated looping gifs from the streams.
The SportsCastr home tab is the main personalized feed for users to browse for content to watch or channels to follow. At the top of the screen, there is a slider for advertisement and announcement banners, followed by a configurable league schedule and related streams. Below that, the home tab includes a number of stacked horizontal sliders displaying different ways to find their favorite types of content, from leaderboards, to stream sliders, to league tiles, to channel or network tiles, to user card lists.
If I had more time on this project... I would like to devote some resources to discovering the most successful initial content order, and then personalizing the order by user each time they return. My hypothesis is that it would further increase retention and daily active users.
Due to the way the data is stored, we were able to build the ability to search by a number of categories (Streams, Tags, Channels, Teams, Leagues, and Networks) and the ability to further filter results when searching for streams. For channels and entities (Teams, Leagues, Networks), users can easily follow or favorite the ones they like or click in to any of those to see more information. We initially had the first search screen displaying only recent searches, and after gathering some qualitative feedback from users, we changed it so the initial search screen displays trending topics and recent streams, and then once tapping into the search bar, the recent searches are displayed.
If I had more time on this project... I would like to explore and A/B test a main search results screen that includes a few top results for each category (Streams, Tags, Teams, etc.) with buttons to narrow down the search query to only one category.
In SportsCastr, Entities refers to organizations (Leagues and Teams), as well as Events (Games and Specials), and Networks, which consistent of a number of Channels that produce content. Entity pages are setup to enable viewers to quickly and easily find and access the content they are most interested in and discover and engage with new broadcasters.
If I had more time on this project... Based on user feedback, I would like to experiment with the ability for multiple Channels to broadcast simultaneously from the Network in a single stream rather than collaborative streams only living on individual Channels. The collaborative streams would be tagged with the different Channels associated with it which should, if done right, help push viewers of one Channel to follow the other Channels in the Network, creating more fan loyalty to the Network and bringing new audiences together.
While this is only a portion of the screens in the Go Live flow, it gives an idea of how it is structured. Setting up a categorizable and searchable live stream is not as simple as it seems at first. There are many settings and features some broadcasters may need to give them the most useful tool possible. It took many sessions of brainstorming, reorganizing and iterating to land on a flow that feels simple and easy to use, but is packed full of useful features that they may or may not want to use.
Based on user feedback, we made sure in it's simplest use case, a user could be live streaming in just two taps, but for the more power users, they could fully customize their stream to their liking, share it with friends and notify their followers when they go live. All of the data panels can be collapsed to the bottom of the screen so the broadcaster can see a live preview of their stream and clean up their background if necessary. Also based on user feedback, to avoid any panic or confusion, we added the "You are not live yet" message on the first stream creation panel to ensure they know they are not currently streaming live.
If I had more time on this project... I would like to conduct usability testing on this entire flow to catch areas of frustration and pinpoint areas that may be improved. I would like to A/B test different versions of the first few topic selection panels (only the first is displayed here) with different layouts for selecting Leagues, Teams, Events or News articles to stream about. One immediate area of improvement would be revisiting the icons that are displayed to indicate whether a certain entity has Broadcast Insights (think broadcaster talking points), or the ability to watch an event live on SportsCastr and provide Single-Screen commentary.
This is only a selection of key screens and panels in the Scheduling flow, but one feature that we implemented based on user feedback was the ability for broadcasters to schedule streams ahead of time, announce them to their followers, and provide a waiting room for eager viewers to chat until the stream starts. This enables broadcasters to build hype both on SportsCastr and on other platforms which drive traffic back to SportsCastr when the stream starts.
The video player is a key feature of any streaming app, and we devoted a lot of time and energy into ensuring the experience was as intuitive and easy to use as possible, while still packing in a ton of features without making it overwhelming. The content consumption screen has several key components including the Video Player, Live Scorebugs (not pictured), Picture-in-picture (not pictured), toggleable Closed Captions, Customizable Lower Thirds, an Action Bar, Tip Leaderboard, Viewer Chat, Virtual Gifts & Animations, Tix Shop (not pictured), the ability to send a request to join as a Co-Host, and more.
If I had more time on this project... I would like to conduct extensive usability testing on completing various tasks within the consumption screens to identify areas of improvement for the user experience for new users and for power users. One feature that I would like to A/B test would be having a few dismissable tooltips that help onboard new users and get them acquainted with the various features available in the video player. I would be curious to see the results on how that impacts user retention and how quickly users find and use various features.
A SportsCastr Channel is the same as a profile on other popular social networks. Channels include a variety of elements, including a cover photo, avatar, name, username, verification badge, buttons to follow, share, embed, and more actions, along with a channel bio, channel stats, a member level, leaderboard standing (not pictured), top tippers, achievement badges, watchable streams, scheduled streams, followers, following in addition to favorite networks, streams, teams, and leagues. One of the challenges of designing the SportsCastr channel was packing all of these features into a simple, intuitive, and useful interface.
Within SportsCastr there are 3 different wallets associated with an account: Tokens, Tix, and Bucks. Tokens are FANZ cryptocurrency tokens from the FanChain ecosystem, Tix are the in-app currency used to purchase and send virtual gifts, and Bucks are earned by broadcasters for streaming and receiving Tix during their broadcasts if they elect not to receive FANZ tokens. Bucks can be cashed out for fiat currency. The screens above show the wallet selection flow, depending what wallet a user is trying to access. There are many additional sub-screens and overlays not pictured here.
The Dashboard was a new feature that was added which enabled users to more closely track and monitor their account directly in the app, rather than being directed to the web version of the Dashboard. The Dashboard launched full-featured with everything from Stream Analytics to Broadcast Earnings, along with existing features like Notifications being folded into the new Dashboard. We also included gamification features, feature announcements and much more.
I art directed the creation of these animated AR virtual backgrounds for broadcasters to use to inside the SportsCastr iOS app to make their streams look more professional utilizing a green screen but without any additional software or hardware.
On the iOS app, we implemented AR face masks which included everything from common masks like sunglasses and hats to sports-related imagery like football helmets and team-specific or sponsored facepaint to broadcast-related imagery like headsets and microphones. I designed a dial UI that allowed us to add as many masks as needed at any given time, and broadcasters could toggle between masks and magic backgrounds.
I art directed the creation of this microanimation for when users favorite a specific broadcast on the platform, a small moment of joy rewarding a common interaction used on many top social media platforms.
Early on in the life of the SportsCastr app and website, we implemented various gamification features including leaderboards, achievements and user levels to increase user retention and incentivize streaming, viewing, and participating in other users streams. These stickers were designed with a consistent visual style including consistent line weights, shading and the color palette, and were also used as a model for the virtual gifts, Tix bundles, and cash stickers, some of which you can see below.
Microtransactions are a common element found in live streaming products. This was another user retention and revenue generation strategy that we deployed via a virtual gifting economy that allowed viewers to purchase Tix that they could use to send virtual gifts or donations to their favorite broadcasters. The animated virtual gifts would be displayed over top of the video for all viewers to see, along with a prominent callout for the gift sender and would also appear in the chat panel. I art directed the creation of the virtual gift illustrations and their accompanying animations. I also created the sound effect that played when a gift was sent.
Every quarter I worked directly with the CEO to put together a quarterly report for company shareholders. Each quarterly report included an overview, feature updates, community updates, a feature roadmap, a message from the CEO, and photos from around the office, among other things.
Along with internal brands, I was also tasked with developing dozens of brands for individual channels and broadcasters that were popular in the SportsCastr community. Many of these are still in use today on other platforms.
FanChain was a cryptocurrency token and ecosystem for the sports world that enabled fans to earn team, league or event-stamped tokens and redeem them for various rewards, perks and merchandise from any number of FanChain-enabled merchants. I was in charge of designing the entire FanChain brand and suite of products from the ground up.
FanWallet was the secure multi-platform cryptocurrency wallet for the FanChain ecosystem that showed your various stamped tokens on an animated donut chart, and enabled you to send or receive tokens with any other wallet holder and view all of your transaction history in one place.
FanExchange was the custom built cryptocurrency exchange that enabled token holders to buy or exchange their FanChain tokens with other people around the world. Amassing a certain amount of a specific stamped token would unlock special rewards and discounts on FanChain-enabled platforms.
FanPrizes was the ecommerce store powered by FanChain where token holders could redeem their tokens for merchandise and tickets to support their favorite teams or leagues.
FanPay was the "PayPal" of the FanChain ecosystem. Any ecommerce store, online or brick and mortar, could easily implement a "Check out with FanPay" feature to allow them to accept FanChain tokens in exchange for their goods or services. Merchants could offer discounts for customers that paid with specific stamped tokens, allowing them to reward super fans of any team, league or event.
If you like what you see and want to work together, let's chat!