.png)
Champions Queue live stream service
PROJECT Involvement
Product and design lead, wireframes, product ideation and end to end handover
Tools Used
Figma, Figjam, Hotjar, Jira, Adobe suite, League of Legends data
💪 The Challenge
Every year Champions Queue is a time in LoL where players train and pre-fight each other from any team live on twitch. It gives people a good look on how the player may perform in actual championships this year. However finding who is playing who is very diffucult unless you open many screens with different players and try to see what their training gamer tag is and visually try to find who they compete against. This was very frustrating for fans.
❓Can we provide a website where we scrape twitch id's, their live stream times, the LoL game data and put the pro players from different teams into a live game listing? All of this done within 2 weeks before Champions Queue goes live.
⭐️ The Process
- Research: I quickly looked at other live streaming gaming services, football, basketball etc. I then took the good user experiences and modified them for LoL game layout.
- Design: Using the factor.gg design system with a few colour changes, I was able to design high fidelity designs with the PM (since we were tight on time) to have the whole feature designed and ready to build in one week. This included the embeded live game view, switching between the streaming players in one game, adding your favourite players to a navigation tab for easy access.
- Dev handover and testing: With a week to build and launch by friday every time new code was update i tested the usability on mobile and desktop, by the end of the week we had a well working product build exactly as the designs.
🎯 The Outcome
On the day of release the site saw a success of 2M users watching live 🎉 stream games via our service. We had lots of great feedback on Twitter and other social channels that we provided a really needed service. We also made sure embeded videos didn't compromise any sponsorships players had via twitch and we monitored usage every day to make sure the sitre was working as needed. It was a fantastic quick project to work on.
