REMIX RUMBLE
Site & HUB
Presented for Teamfight Tactics
Accompanying the revamped music system of Riot Games Teamfight Tactics is the Remix Rumble microsite experience. Developed to showcase the ability to layer, mix, and match music based on in-game choices with the mixer as well as introduce the 10+ new genres through an interactive map. Players can also create unique album covers and banners with the custom-built dynamic profile picture creator.
Responsibilities included building site wireframes, adapting a custom-themed user interface, and managing site assets across desktop, mobile, and in-game hub sizes.
Style guide provided by i love dust
All screens were developed for a web-based microsite, desktop, mobile, and for the in-game Teamfight Tactics mobile hub.
Players and visitors of the site could explore the interactive map as well as create custom art and music for their favorite Runeterra characters using the track mixer and Album creator.
Including 10+ dynamic frame backgrounds that changed based on what genre was featured.
Vegas Open Addition
Developed in addition to the Remix Rumble event was the Vegas Open Esports page. This separate section of the experience showcased live event coverage, dynamic champion compositions, and an event kick-off countdown.
Learnings
& pROCESS
Developing UX for such a wide variety of screens and sizes required additional setup and an improved workflow. Early rounds required precise notation and clarification of functions between both dev and design to minimize the number of changes during production. The experience had to maintain functionality across mobile and desktop on the web and in the in-game client.
To reduce the amount of individual edits during the development of all 4 sizes, a robust system of components were created, ranging from simple CTAs to entire responsive frames with custom backgrounds.
The complex nature of the site’s features made it essential for the design team to maintain constant communication with the dev team during all stages of production in order to keep the UX/UI of the site realistic while also knowing where we were free to push those boundaries.
The addition of the Vegas open was added later due to in-game hub limitations. It required special styling based on its brand and the established Remix Rumble UI combining both to seamlessly integrate into the full site experience.