When Riot Games launched Teamfight Tactics, their version of the popular new game genre, “autochess”, I tried it out and was instantly hooked. Autochess games have a simple premise: pick units that the game randomly gives you and place them on a board. Each round, you are pitted against a random opponent in a free-for-all lobby (usually containing 7 other players) where the units on your board fight the opponent’s units. The losing team loses overall player health. If you lose all your health, you’re out. The winner of the game is the last surviving player in the lobby.
When I get hopelessly addicted to something, I like to turn the addiction into a productive enterprise. For example, when I was addicted to cryptocurrencies during the bull market in 2017, I started a blog to write about everything I was learning about the technology. The blog became popular with readers donating thousands of dollars and companies paying for sponsored articles.
With Teamfight Tactics, I chose to build AutochessTV.com. Again, I wanted to funnel my addiction into a productive outlet, but I also wanted to grab business opportunities that present themselves every time a new game becomes popular.
High level design
I wanted AutochessTV.com to do one small, but delightful, thing really well. This is the direct application of a learning from SmashVODs.tv, a previous website I built for Super Smash Bros Ultimate (SSBU). With SmashVODs.tv, the website tried to do too much in an already crowded space. Given my available free time, maintaining the website became untenable.
For AutochessTV.com, I picked the clips feature from SmashVODs.tv and focused AutochessTV.com on just this feature. Essentially, SmashVODs.tv polled and saved popular SSBU clips from Twitch’s API, and presented these clips in an easy to discover and watch format, something that Twitch is not great at.
What is a great clips discovery and watch experience?
Clips is one of Twitch’s best features (I might be biased) where viewers can click one button to create a short clip of the last 30 seconds to 1 minute of a live stream. When something amazing happens on stream, you bet that a legion of viewers will clip the moment and share. As such, Clips is a great system to find the most exciting moments on Twitch.
Twitch has never invested in a great discovery and watch experience for clips, which presents opportunities for third party developers. I’ve spent way too much time thinking about what is a great clips discovery and watch experience. In my opinion, here’s what’s needed:
- Continuous watching: easy to watch multiple clips at once
- Community interaction: reacting, commenting, and saving clips make the experience even more delightful.
- Brainless: “show me the best trending clips, without redundancy”
- Chronological discovery: “show me the best clips last month”, “show me the best clips 2 years ago”
- Sentiment discovery: “show me the funniest clips”, “show me the most exciting clips”
- Topical discovery: “show me clips of raid boss Shyvana”
- Multivariate discovery: “show me the funniest fail clips of DisguisedToast for the last month”
Clips experience on AutochessTV.com
To enable a seamless continuous clips watching experience, I chose to go with row-by-row viewing, similar to Reddit’s post browsing experience. To watch the next clip, a user simply needs to click the next row. A couple benefits of this design: no additional page loads and a user can easily understand (spatially) where they are on the site when transitioning between clips.
To enable community interaction, I added a clips saving feature (ported over from SmashVODs.tv) and a reactions bar (also ported over from SmashVODs.tv). To save or react, users need to be signed in. The reactions bar is interesting; to not make the site feel like a ghost town on launch, I built a sentiment analysis system that periodically assigns “fake” reactions to a clip, normalized by view count.
For clips discovery, I wanted it to be, first and foremost, brainless. To do so, I created the “Top Gameplay” category. This category contains manually curated clips. As my cron job polls the Twitch API for recent popular Teamfight Tactics clips, I personally sift through the noise to find clips with great gameplay. This is fun and easy to do. For anyone that just wants to watch the most recent and best clips, they only need to use the “Top Gameplay” category, which is presented by default.
Other ways to discover clips include sorting by recency or popularity for “All Clips” or “Top Gameplay” clips, and users can specify different time periods to return clips from (e.g. last 48 hours, 30 days, or a specific month).
A note on sentiment analysis
From a technical perspective, I find the most interesting aspect of the site is the sentiment analysis for clips. When I set out to build the system, I decided that it needed to have two core requirements: reaction counts match the sentiment of the clip and reaction counts must feel realistic.
I implement these two requirements with a few heuristics. To determine the sentiment of a clip, I poll the clip’s chat. For each chat message, I extract tokens and match each token with a fixed list of tokens per sentiment. For example, my list of tokens that match the “funny” sentiment include: “LUL”, “OMEGALUL”, “lol”, “haha”, etc. After classifying each token per message, I assign a sentiment to the message. Then, I calculate the overall sentiment of the clip by aggregating and normalizing the sentiments of all messages. It’s important to note that the sentiment I calculate for a clip is multidimensional (e.g. 30% funny, 10% exciting, 0% scary).
Finally, I periodically assign fake reactions to the clip based on the sentiment analysis, normalized by the clip’s view count. Using the clip’s view count, I calculate the ideal total reaction count of the clip and the fake reaction assigner uses a logarithmic function to assign fake reactions to the clip. The vertical asymptote of the logarithmic function is the clip’s ideal total reaction count. In assigning fake reactions, I leverage the multidimensional sentiment of the clip and also heuristically introduce some noise to make the reactions feel real.
A website with a great user experience with no way to discover it is always worse than a website with a mediocre user experience but great discovery (is Reddit a good example?). My own copypasta website, TwitchQuotes.com is successfuly mostly because it ranks highly on a few high traffic Google search queries.
To grow AutochessTV.com, I’m considering leaning into Google by building one or two features that are ideal for search engine indexing. Embedded Twitch clips is, unfortunately, not great for search engine indexing. One feature could be a forum to discuss Teamfight Tactics team compositions. Forum posts are text heavy and Google likes when there’s more text.
To start, my existing audience funnels consist primarily of traffic from Reddit links and TwitchQuotes.com referrals. TwitchQuotes.com has 40k unique visitors a month and I’m advertising AutochessTV.com on TwitchQuotes.com. Reddit traffic can be insane. Successful link shares can result in thousands of visitors a day. This traffic, however, is short term and dies down the moment the link leaves a subreddit’s front page.
The crux of website development is fast experimentation and securing that long term top of the funnel traffic.