Levelling Up on User Experience

The Challenge

Genshin Impact is an action role-playing game developed and published by miHoYo (HoYoverse). The Paimon character in the game enhances the player's experience by educating and sharing information with the player. Kablamo had built the original Paimon Extension for Twitch in 2020/2021, which included a code distribution system and basic information modal.

In 2022, Twitch and HoYoverse engaged Kablamo to update and expand the Paimon Extension with new interactive game modes, timed to coincide with the Genshin Impact v3.2 launch on 2 November 2022. The updated extension was an overlay with in-stream games involving Paimon and Slimes characters from Genshin Impact. The solution needed to faithfully reflect the Genshin Impact visual experience using brand themes, UI and characters. It had to support thousands of concurrent players while integrating seamlessly with Twitch's extension platform. The extension had to work across desktop, tablet, and mobile with full localisation for text and images across multiple regions, and handle bursts of heavy concurrent usage during popular streams.

HoYoverse provided in-game reward codes (primogems and items) to distribute through the extension, with daily limits and RNG distribution to control the total number of codes given out. The code distribution system needed to work across both Paimon Defender and the new Battle of the Slimes game mode, with daily caps and randomised distribution to control the total volume of codes given out across all regions.

The Approach

The discovery and design phase ran from July 2022, starting with an ideation workshop to define the game direction. This was a co-design effort between Kablamo, the Twitch Brand Partnership Studio team, and HoYoverse stakeholders. Kablamo's design lead worked in Figma to ensure every visual element faithfully represented the Genshin Impact brand, matching the game's colour palette, typography, and character art standards exactly.

Within the first sprint, rapid user journey wireframing was completed along with first-round high-fidelity prototyping for both desktop and mobile. Regular QA testing and tweaking sessions were run with a team of Kablamo gamers who could evaluate the experience as players, providing feedback grounded in actual gameplay behaviour rather than abstract usability testing.

The team built two interactive game modes. Paimon Defender was the existing mini-game where viewers interacted with the stream. Battle of the Slimes (BOTS) was a new team-based game mode: viewers joined via the extension (not chat), selected a slime type, and entered a passive mode for powering up. Team A battled Team B with a kill feed logging the action. A battle summary appeared at the end, and winners and participants received in-game redemption codes.

The front end used React, TypeScript, Canvas, and PixiJS, a high-performance game and animation library. The back end was built in Go with AWS Lambda and DynamoDB for a scalable serverless architecture that could handle bursts of thousands of concurrent players. AWS Cognito managed user access lists and admin controls. Distributed load testing validated the APIs at scale.

Analytics captured daily streamer counts, daily user participation in BOTS, daily codes distributed via both Paimon Defender and BOTS, unique users who clicked Like, generated codes, or opened the info modal, and users who clicked external links. Localisation for text and images was baked into every component.

The Results

The extension delivered 10.9 million minutes watched, equivalent to 21 years of continuous viewing, with 436,000 in-game code redemptions across the Paimon Defender and Battle of the Slimes game modes. A custom emote was used over 600 million times in chat by viewers across multiple regions. Streams ran across the US, Korea, Spain, Germany, and Brazil.

The serverless architecture handled the burst traffic patterns that characterise Twitch streams without any performance degradation. When popular streamers activated the extension and thousands of viewers joined simultaneously, the Lambda and DynamoDB backend scaled to meet demand and scaled back down when streams ended, keeping operational costs proportional to actual usage.

At the final showcase, the Twitch team said the extension "exceeded what we initially thought possible." The HoYoverse campaign received a Twitch Brand Partnership Award in recognition of the campaign's success.

Looking Forward

By using popular development languages and serverless cloud technology, ongoing operational costs for Twitch were reduced. A new AWS instance was spun up for production and development environments, keeping the infrastructure clean and dedicated to the extension.

The deliverables included information modals, reward modals, menu hub, live configuration panel, and the mini-game, all with localisation, responsive design across desktop, tablet, and mobile, and full analytics. Kablamo also delivered a portfolio of reusable design assets and full documentation of environments and extensions.

The proven technical architecture and reusable component library provide a foundation for future campaigns on the Twitch platform. The PixiJS rendering layer, the serverless API pattern, and the code distribution system are all designed to be adapted for other game titles and brand partnerships without rebuilding from scratch.