I was the sole designer and developer of the #1 companion app for League of Legends.
The Challenge: Get Good
Learn more about my design process for LegendSmith. What I did:
- User interface design in Adobe Photoshop
- Front and Back-end programming
- Counter-picking algorithm
- Logo and Branding
- Color hierarchy
- Typography
- Iconography
- Video editing in After Effects
- Requirements gathering
- Competitive research
- Analytics analysis
- User journey analysis
- Wireframes
- Usability testing
- Design iteration and evaluation
- Bi-weekly maintenance 2013-2017
- 12 months development before release in January 2013
- Over 1,000,000 downloads
- App store rating over 80%
- 1st search result on Apple and Android for 4 years
*League of Legends and character arts by Riot Games.
The Branding
- Shape design in Adobe Illustrator
- Rendering in Adobe Photoshop
- Requirements gathering
- Stakeholder input
- Competitive research
- Design iteration and evaluation
*feedback and approval by Riot Games.
With a beta of LegendSmith complete, I sought approval from Riot Games to leverage the League of Legends IP. Thoroughly impressed by the functionality, Riot legal and marketing departments approved of LegendSmith with minor branding adjustments. Now part of an exclusive content creator group, LegendSmith was among the first outside of Riot to leverage the League of Legends API.
Picking the Right Champ
- Team picking based on up to 4 teammates
- Counter-picking based on all 5 opponents
- Identifies strengths based on 6 bans
- Stored personal preferences per team position
- Over 30,000 match results processed daily
- 75 character data points per match, plus items
- Overall winning percentage rate
- Recommended items based on winning matches, not popular vote
- Over 80% accuracy in predicting World Championships, 2013-2016
I wasn’t alone in creating tools to enhance competitive play, but I saw a lot of tools for counter-picking on a 1 vs 1 basis; for a 5 vs 5 team-based game. I created the Draft Pick feature of LegendSmith with all 10 players in mind. I began LegendSmith with self-reporting match results of app users, a few hundred daily. When the League API was released in early 2016 I added over 30,000 top-tier matches daily. LegendSmith simplified which champions worked well together on the same team in addition to crushing opponents.
I crafted an interface similar to the draft-picking experience from the game. As each champion is selected, the center portion reveals meta results for which champions best for the situation. The suggested champions could be filtered by champion type, role, and even by personal preference. After all champions are selected, LegendSmith predicts the match results with a percentage to win for each team. A simple swipe left or right sent the results off to merge with my analytics data. The app was so good at its predictions that it was 80% accurate in calculating the results of the League of Legends world championships, 4 years in a row.
Build to Win
- All Items, abilities, levels, runes, and masteries
- Adjustable simulated opponent
- Item suggestions based on 30,000+ match results daily
- Full champion stats calculations
- Burst damage
- Sustained DPS
- Compare up to 3 builds side-by-side
- Unlimited build saves
- Share, download, and rate builds from other users
Choosing your build is just as important as choosing your champ. I created a Build Calculator that not only used raw item numbers, but included your champion’s abilities, level, runes, masteries, and a simulated opponent. I included every calculation for every ability. By importing all this data, I could present numbers like Burst Damage and Sustained DPS that no other champion builder had.
With the introduction of Riot’s API, I had the meta results and item builds for 30,000+ top-tier matches a day. I added a “Smart Build” feature that filled out the build with data from thousands of winning champions. This gave players using my app a significant advantage over other champion builders by using actual winning combinations, rather than builds by popular vote.
Champion Styling
- Color theory
- Typography
- Iconography
- UI design
- Information Architecture
- User flows
- 3 feature complete versions over 5 years
- 2 style complete versions
The Code
- Leveraged Riot’s JSON API parsed with PHP to MySQL database
- Meta gameplay data collection from users to MySQL database
- PHP meta-scoring algorithm
- PHP parser from MySQL to JSON
- Javascript JSON parser to WebSQL Local Storage
- AJAX calls to WebSQL for app data interface
- Javascript counter-picking algorithm based on meta-scoring
- Javascript full stats calculations based on adjustable simulated opponent
- Daily automation of metadata updates to MySQL database
- HTML, Javascript, jQuery, and CSS user interface
Using a MySQL database for storage, leveraging a PHP server for data processing, and parsing the JSON data into a browser Javascript engine; gave me a way to share this performance-enhancing app with over 1,000,000 fans around the world.
The JSON data was parsed into WebSQL on device, a way of making a database in localStorage. This allowed LegendSmith to be used offline, without need to connect to a server. In 2012 this was a significant advantage for users with unstable internet connections on mobile devices. I initially tried using the jQuery library for ease of DOM addressing and succinct code, but found that performance on mobile devices was better in vanilla Javascript. For large, repetitive operations, I used JSPerf to analyze and improve performance. This optimization allowed access for more users across more devices.