Twitch for sports + cryptocurrency ecosystem
Art Direction
Creative Direction
Web Design
User Interface (UI) Design
User Experience (UX) Design
Ecommerce Design
Marketing Site
Page Layout
Information Architecture
Stationery Design
Presentation Design
Product Design
Design Thinking
Market Research
Digital Content Creation
Video Editing
Sound Design
Front-End Web Development
Social Media Content
Social Media Marketing
Graphic Design
Design System
Custom Emojis
Augmented Reality
Brand Strategy
Company Overview
SportsCastr is an ultra-low latency live video platform for sports that brings studio-quality features to anyone with an iPhone, including real-time score-bugs, broadcast quality motion graphics and augmented reality.
My Contributions
Since inception, I led the design aspect of almost every element under the SportsCastr umbrella which included the cryptocurrency ecosystem called FanChain. I designed 100's of GB of files, screens, pages, graphics and documents and art directed the creation of many others over 7 years of working on SportsCastr in different capacities. I also did much of the front-end development for SportsCastr on the web.
Illustrator icon
Photoshop icon
InDesign icon
Premiere Pro icon
Premiere Pro
Sketch icon
Visual Studio Code icon
VS Code
Codepen icon
Keynote icon
Zeplin icon
InVision icon
Pages icon
Docs icon
Sheets icon
Google Sheets icon
Premiere Pro icon
Premiere Pro
After Effects icon
After Effects
Basecamp icon
Icomoon icon
Slack icon
Zoom icon
Dropbox icon
SportsCastr iOS app screens
The biggest challenge with SportsCastr was the scale of the product offerings under the umbrella, from live streaming on the web and iOS to dashboards and a suite of cryptocurrency products. There was a wide ecosystem to support and various different technical limitations for each touchpoint. Having the brand grow and morph over time, it took a good amount of organization and planning to make sure everything fit and felt like one cohesive system. In addition to art directing a variety of contractors, building internal products and marketing those products, SportsCastr also had many external partners to support as well.

SportsCastr was awarded various awards and recognition for work I was responsible for. Some of the recognition includes: Best Website/Mobile Experience Finalist at the 2019 Hashtag Sports Awards, Best Real-Time Engagement Finalist at the 2019 Hashtag Sports Awards, Best Sports App Finalist at the 2019 Sports Technology Awards and Best Sports Technology at the 2019 Sports Business Awards.
7 years
SportsCastr Web App interface

SportsCastr Web App

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.

SportsCastr Web App

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.

SportsCastr video player UI
SportsCastr app interface

SportsCastr iOS App

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.

SportsCastr app icon

App Store Assets

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.

SportsCastr iOS app sitemap

App Sitemap

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.

SportsCastr iOS app user flows

App User Flows

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.

SportsCastr iOS app Onboarding flow

Onboarding Flow

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.

SportsCastr iOS app Home flow

Home Flow

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.

SportsCastr iOS app Discovery flow

Discovery Flow

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.

SportsCastr iOS app Entities flow

Entities Flow

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.

SportsCastr iOS app Go Live flow

Go Live Flow

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.

SportsCastr iOS app Scheduling flow

Scheduling Flow

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.

SportsCastr iOS app Content Consumption flow

Content Consumption Flow

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.

SportsCastr iOS app Channel flow

Channel Flow

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.

SportsCastr iOS app FanWallet flow

FanWallet Flow

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.

SportsCastr iOS app Dashboard flow

Dashboard Flow

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.

SportsCastr augmented reality virtual backgroundSportsCastr augmented reality virtual backgroundSportsCastr augmented reality virtual backgroundSportsCastr augmented reality virtual backgroundSportsCastr augmented reality virtual background

Augmented Reality Virtual Backgrounds

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.

Augmented Reality Masks

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.

SportsCastr AR mask interface
SportsCastr favorite animation

Favorite Microanimation

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.

SportsCastr illustrated stickers

Virtual Stickers

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.

SportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustrationSportsCastr sticker illustration

Virtual Gifts

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.

SportsCastr website interface
SportsCastr animated virtual giftSportsCastr animated virtual giftSportsCastr animated virtual giftSportsCastr animated virtual giftSportsCastr animated virtual giftSportsCastr animated virtual giftSportsCastr animated virtual giftSportsCastr animated virtual giftSportsCastr animated virtual gift
SportsCastr quarterly report

Quarterly Reports

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.

Show Logos

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.

SportsCastr channel logos
FanChain website interface


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.

Powered by FanChain badge


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.

FanWallet app and website interface
FanExchange website interface


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.

FanPrizes website interface
FanPay mobile website interface


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.

Want to work together?

If you like what you see and want to work together, let's chat!