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, character arts, and game icons by Riot Games.
The Code
What I did:
- Riot’s API in JSON 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 meta gameplay data updates to MySQL database
- HTML, Javascript, jQuery, and CSS user interface
*mobile app wrapper by Lifeform Entertainment.
The Branding
What I did:
- Shape design in Adobe Illustrator
- Rendering in Adobe Photoshop
- Requirements gathering
- Stakeholder input
- Competitive research
- Design iteration and evaluation
*feedback and approvals by Riot Games.
Picking the Right Champ
What it does:
- 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
Build to Win
What it does:
- 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
The TLDR Tutorial
What I did:
- Script writing
- Presentation frame in Adobe Photoshop
- Video capturing
- Video editing in Adobe After Effects
*Voice-over by Nick McCord. Music by Patrick Hill.