LoL Pilot is an iOS app that provides users with the best statistical builds, counters, and rankings for Season 7 in the online MOBA game, League of Legends. The intent of designing the app was to learn and create a mobile product that helps alleviate the steep learning curve of the game.
League of Legends is an online moba game with a vast variety of characters and item builds, which create a steep learning curve for players to get better at the game. The goal of LoL Pilot was to provide users with real-time, data-driven information that help alleviate this learning curve. I partnered with iOS engineer, Mike, to create the app—I worked on all facets of product and visual design, and he built the application and backend.
I built content strategy by researching into the game's API capabilities, competitors, UI/UX books, design inspirations, and discussions with Mike. And I applied design principles by Steve Krug, including: laws of usability, scanning, clarity, simplicity, and user testing.
Value Proposition: The mobile app will provide users with real-time access to the best statistical builds, counters, and rankings based on analysis of real games played by the world's top players. The information is backed by data assembled through the game's API.
Information Architecture: Champions (characters), Roles (top, middle, adc, support, jungle, and all), Item Build, Summoner Skills, Masteries, Runes, Skill Order, Counters (based on matchup win/loss rates), Overall Win Rate Rankings, and FAQs/Info.
The information architecture was mapped out begin at the champion list and take at most two clicks to access any other information. The goal was to allow users quick access to all relevant information with minimal effort. Earlier iterations included account setups, logins, and forums, but they were removed to reduce friction for users.
Following the user flow, I created wireframes to visualize layout and structure of the app. The Champion List was featured as a search page similar to the mobile phone contact list. The navigation bar featured three tabs located on the bottom of every screen beginning with the Champion List and followed by Rankings and FAQs. Selecting a champion would open their respective page that includes additional navigational tabs that allow users to quickly sift through builds, skill orders, and counters at ease.
I created a dark theme that focuses and guides the user’s attention to the content. Since the majority of content are images imported from the game’s API, it was important to provide contrast through a dark theme to make sure that the content stands out. I created a small collection of visual elements and colors (inspired by the game’s color schemes) that integrates with the images to further enhance the contrast and organize the content with clear hierarchy.
I created static mockups implementing the visuals to help Mike understand. With discussions, feedback, and refinement, he built a high fidelity prototype in Swift, which allowed me to begin user testing.
I conducted 1-on-1 user tests and interviews with gamers familiar with the game. I read them through mock scenarios that they had to work through and watched closely as to how they interacted with the application. Their responses gave us a chance to find bugs, note interaction behaviors, change unintuitive elements, and implement additional features.
Below are some example scenarios used for the testing:
Based on the results of testing, I compiled a list of bugs, feature requests, and changes we needed to fix and make before its first release on the Apple store. Some changes included: adding tips for each champion, clarifying/rewording some labels, adding tooltips for builds and skills, and making the counter champion list interactive.
The first version of the app was finally ready to be released on the app store.
Adobe Photoshop, Illustrator, Sketch, Principle
LoL Pilot is an iOS app that provides users with the best statistical builds, counters, and rankings for Season 7 in the online MOBA game, League of Legends. The intent of designing the app was to learn and create a mobile product that helps alleviate the steep learning curve of the game.
League of Legends is an online moba game with a vast variety of characters and item builds, which create a steep learning curve for players to get better at the game. The goal of LoL Pilot was to provide users with real-time, data-driven information that help alleviate this learning curve. I partnered with iOS engineer, Mike, to create the app—I worked on all facets of product and visual design, and he built the application and backend.
I built content strategy by researching into the game's API capabilities, competitors, UI/UX books, design inspirations, and discussions with Mike. And I applied design principles by Steve Krug, including: laws of usability, scanning, clarity, simplicity, and user testing.
Value Proposition: The mobile app will provide users with real-time access to the best statistical builds, counters, and rankings based on analysis of real games played by the world's top players. The information is backed by data assembled through the game's API.
Information Architecture: Champions (characters), Roles (top, middle, adc, support, jungle, and all), Item Build, Summoner Skills, Masteries, Runes, Skill Order, Counters (based on matchup win/loss rates), Overall Win Rate Rankings, and FAQs/Info.
The information architecture was mapped out begin at the champion list and take at most two clicks to access any other information. The goal was to allow users quick access to all relevant information with minimal effort. Earlier iterations included account setups, logins, and forums, but they were removed to reduce friction for users.
Following the user flow, I created wireframes to visualize layout and structure of the app. The Champion List was featured as a search page similar to the mobile phone contact list. The navigation bar featured three tabs located on the bottom of every screen beginning with the Champion List and followed by Rankings and FAQs. Selecting a champion would open their respective page that includes additional navigational tabs that allow users to quickly sift through builds, skill orders, and counters at ease.
I created a dark theme that focuses and guides the user’s attention to the content. Since the majority of content are images imported from the game’s API, it was important to provide contrast through a dark theme to make sure that the content stands out. I created a small collection of visual elements and colors (inspired by the game’s color schemes) that integrates with the images to further enhance the contrast and organize the content with clear hierarchy.
I created static mockups implementing the visuals to help Mike understand. With discussions, feedback, and refinement, he built a high fidelity prototype in Swift, which allowed me to begin user testing.
I conducted 1-on-1 user tests and interviews with gamers familiar with the game. I read them through mock scenarios that they had to work through and watched closely as to how they interacted with the application. Their responses gave us a chance to find bugs, note interaction behaviors, change unintuitive elements, and implement additional features.
Below are some example scenarios used for the testing:
Based on the results of testing, I compiled a list of bugs, feature requests, and changes we needed to fix and make before its first release on the Apple store. Some changes included: adding tips for each champion, clarifying/rewording some labels, adding tooltips for builds and skills, and making the counter champion list interactive.
The first version of the app was finally ready to be released on the app store.
