League of Legends has become more than just a game. It’s an internationally recognized e-sport with a rapidly growing audience. As the competition becomes more and more fierce, there is an increased need for professional guidance. Skill Capped caters to exceptional players that want to reach their full potential by offering in-depth training.
Dotvita was engaged to define the training platform’s user experience. The team at Skill Capped had created a thorough set of user narratives that we used as starting point. Accounting for a diverse set of usage scenarios, we created a 100+ page content architecture in form of sketched wireframes to capture the app's core functionality.
A notable element within the training platform was the course navigation (dubbed Bubble Bar by our client). This persistent UI element allowed users to navigate the entire course while keeping an eye on their progress. The Skill Capped course structure was three tiers deep – consisting of chapters, lessons within chapters and lesson items within lessons. We designed the Bubble Bar to expand on current lessons (revealing details and progress within) and auto-collapse on adjacent lessons to not overwhelm the user.
The UI design of the training platform was an exercise in restraint. The styling was intentionally simple to allow users to focus on course content. We used accent colors to direct the eye and small icons to anchor key ideas.
After we completed the application interface design, Skill Capped re-engaged us to design their marketing page. The goal was to showcase Skill Capped’s highly scientific approach in a compelling fashion. We used the simple design language of the application UI as a basis and created a homepage that captivated through transitional animations. To adequately showcase our creative vision, we produced an animation (video above) to get our client excited – it worked.
A new element within the marketing site was the silhouetted character. We wanted to tie back to the game but couldn’t use game imagery due to copyright challenges. Our solution was to subtly reference game champions through outlines and dress them up with tech annotations. The resulting visuals created an adequate game reference and further communicated Skill Capped’s research-first attitude.
The research page was one of my favorites. It takes users through the steps involved and reveals what goes on behind the scenes. The bottom of the page features case studies in a uniquely scientific way – using progress metrics as the focal element.
Jeff Brabant, CEO + Founder