The Challenge

My team was brought in to build the university club recruitment site for Riot's League of Legends MOBA game. During the development process, it became clear that Riot's design team needed help, so I assisted with the user experience and interface design.

League U's main goal was to recruit university students to make and join school-sponsored clubs, share the game with their friends and classmates, and compete in inter-university competitions. Our team was tasked to build the base site, as well as two promotional campaigns that aimed at user acquisition, and community team-building.

The Approach

Once the initial groundwork was laid for the site, I analyzed weak points, fixing navigational issues and re-designing the site's homepage. Riot wanted users to see promotional events and curated articles when they visited the site, while trying to cultivate a collegiate aesthetic. We added a twitter feed and highly customizable CMS for inserting select articles and links onto the top page.

We also made the site more student friendly, adding images taken by established clubs from around the country and custom illustrations of favorite game champions. We created distinguishing visual elements for each promotional campaign.

 

Graphic Elements

In the early stages of designing the site's promotional campaigns, it became clear that both landing and user profile pages were going to need a lot of custom icons, illustrations, and graphics. Using popular champion art, I created multiple graphic banners. 

Vector icons of items from the game were used to demonstrate unlocked achievements and illustrated "teacher" characters (Teemo and Soraka) were made for the landing page of Riot's "refer-a-friend" campaign. In the "All Campus Series", I used summer champion art to piece together fun graphics for each stage of the competition.

 

UI Design

league-frontpage.png
league-about.png
acs-participating.png
acs-stage2.png