Améliorer l'expérience utilisateur

Le Défi

Genshin Impact est un jeu de rôle et d'action développé et édité par miHoYo (HoYoverse). Le personnage de Paimon enrichit l'expérience du joueur en lui fournissant des informations et des conseils. Kablamo avait créé l'extension Paimon originale pour Twitch en 2020/2021, incluant un système de distribution de code et une fenêtre d'informations de base.

En 2022, Twitch et HoYoverse ont fait appel à Kablamo pour mettre à jour et enrichir l'extension Paimon avec de nouveaux modes de jeu interactifs, afin de coïncider avec la sortie de Genshin Impact v3.2 le 2 novembre 2022. L'extension mise à jour était une superposition proposant des jeux en direct mettant en scène Paimon et les Slimes de Genshin Impact. La solution devait refléter fidèlement l'univers visuel de Genshin Impact en utilisant les thèmes, l'interface et les personnages de la marque. Elle devait également supporter des milliers de joueurs simultanés tout en s'intégrant parfaitement à la plateforme d'extensions de Twitch. L'extension devait fonctionner sur ordinateur, tablette et mobile, avec une localisation complète des textes et des images pour plusieurs régions, et supporter les pics d'utilisation simultanée lors des diffusions populaires.

HoYoverse a fourni des codes de récompense en jeu (primogemmes et objets) à distribuer via l'extension, avec des limites quotidiennes et une distribution aléatoire pour contrôler le nombre total de codes distribués. Le système de distribution de codes devait fonctionner à la fois pour Paimon Defender et le nouveau mode de jeu Bataille des Slimes, avec des plafonds quotidiens et une distribution aléatoire pour contrôler le volume total de codes distribués dans toutes les régions.

L'approche

La phase de découverte et de conception s'est déroulée à partir de juillet 2022, en commençant par un atelier d'idéation pour définir l'orientation du jeu. Il s'agissait d'un travail de co-conception entre Kablamo, l'équipe Twitch Brand Partnership Studio et les parties prenantes de HoYoverse. Le responsable de la conception chez Kablamo a travaillé sur Figma pour s'assurer que chaque élément visuel représente fidèlement la marque Genshin Impact, en respectant scrupuleusement la palette de couleurs, la typographie et les standards graphiques des personnages du jeu.

Dès le premier sprint, la conception rapide du parcours utilisateur a été finalisée, ainsi que le prototypage haute fidélité pour ordinateur et mobile. Des tests d'assurance qualité réguliers et des sessions d'ajustement ont été menés avec une équipe de joueurs de Kablamo, capables d'évaluer l'expérience en tant que joueurs et de fournir des retours basés sur le comportement réel en jeu, plutôt que sur des tests d'utilisabilité abstraits.

L'équipe a développé deux modes de jeu interactifs. Paimon Defender était le mini-jeu existant où les spectateurs interagissaient avec le stream. Battle of the Slimes (BOTS) était un nouveau mode de jeu en équipe : les spectateurs rejoignaient la partie via l'extension (et non le chat), choisissaient un type de slime et entraient en mode passif pour gagner en puissance. L'équipe A affrontait l'équipe B, et un flux d'actualités enregistrait les éliminations. Un résumé de la bataille apparaissait à la fin, et les gagnants et les participants recevaient des codes de récompense pour le jeu.

L'interface utilisateur utilisait React, TypeScript, Canvas et PixiJS, une bibliothèque de jeux et d'animations haute performance. Le backend a été développé en Go avec AWS Lambda et DynamoDB pour une architecture sans serveur évolutive, capable de gérer des pics de fréquentation avec des milliers de joueurs simultanés. AWS Cognito gérait les listes d'accès utilisateurs et les contrôles d'administration. Des tests de charge distribués ont validé les API à grande échelle.

Les analyses ont permis de suivre le nombre quotidien de streamers, la participation quotidienne des utilisateurs aux bots, le nombre quotidien de codes distribués via Paimon Defender et les bots, le nombre d'utilisateurs uniques ayant cliqué sur « J'aime », généré des codes ou ouvert la fenêtre d'information, ainsi que le nombre d'utilisateurs ayant cliqué sur des liens externes. La localisation des textes et des images a été intégrée à chaque composant.

Les résultats

L'extension a généré 10,9 millions de minutes de visionnage, soit l'équivalent de 21 ans de visionnage continu, avec 436 000 utilisations de codes en jeu dans les modes Paimon Defender et Battle of the Slimes. Une émoticône personnalisée a été utilisée plus de 600 millions de fois dans le chat par des spectateurs de différentes régions. Les streams ont été diffusés aux États-Unis, en Corée, en Espagne, en Allemagne et au Brésil.

L'architecture sans serveur a géré les pics de trafic caractéristiques des streams Twitch sans aucune dégradation des performances. Lorsque des streamers populaires ont activé l'extension et que des milliers de spectateurs se sont connectés simultanément, le backend Lambda et DynamoDB s'est adapté à la demande, puis a réduit sa capacité à la fin des streams, maintenant ainsi les coûts opérationnels proportionnels à l'utilisation réelle.

Lors de la présentation finale, l'équipe Twitch a déclaré que l'extension « dépassait nos attentes initiales ». La campagne HoYoverse a reçu un Twitch Brand Partnership Award en reconnaissance de son succès.

Perspectives d'avenir

Grâce à l'utilisation de langages de développement populaires et de la technologie cloud sans serveur, les coûts opérationnels de Twitch ont été réduits. Une nouvelle instance AWS a été déployée pour les environnements de production et de développement, garantissant une infrastructure propre et dédiée à l'extension.

Les livrables comprenaient des fenêtres modales d'information et de récompense, un menu central, un panneau de configuration en direct et le mini-jeu, le tout avec localisation, une conception adaptative pour ordinateur, tablette et mobile, et des analyses complètes. Kablamo a également fourni un ensemble de ressources graphiques réutilisables et une documentation complète des environnements et des extensions.

L'architecture technique éprouvée et la bibliothèque de composants réutilisables constituent une base solide pour les futures campagnes sur la plateforme Twitch. La couche de rendu PixiJS, le modèle d'API sans serveur et le système de distribution de code sont conçus pour être adaptés à d'autres jeux et partenariats de marque sans nécessiter une refonte complète.