01
A home for a catch-all system
The first wireframe sets a category rail, cards grouped by system, and a Recently Upgraded strip. That skeleton matches the tab screen above.
Riot Games, League of Legends
From Documentation to Live Screens
I wrote the Challenges rules and designed the tab, lobby, loading screen, and end-of-game screens that show them. Progress updates on its own.
01
The game didn't need another progression system.
Players had few places to see progress besides the ranked ladder. Designers kept adding challenges without a shared home. Stakeholders did not want another progression system in a crowded game.
02
Ranked recognized competitive skill, but not every kind of player.
The framework named five players, and how well the game served each of them.
- CollectorShow off a complete collectionPoorly served
- Solo competitorImprove mastery, be the best, ranked-drivenServed well
- Social competitorCompete with others, socially comparePoorly served, trending up
- Ranked burnoutCares about ranked legacy over current statusPoorly served
- CasualLower investment in progression generallyServed fine
The direction was to connect progress the game already tracked, make the useful parts visible, and de-emphasize the rest. It also had to protect monetization and competitive balance.
Those players already had records. The records did not add up to a way to say who you were.
03
Progress existed across six systems, but there was no shared identity.
Ranked, Champion Mastery, Eternals, Summoner Level, Events and Missions, and Collection each kept a record. None of them was deleted or folded into the others. Honor sat beside them, for conduct rather than for how you play.
Ranked
Recognizes competitive standing. Expressed as the ranked ladder. A rank does not say what else the player does.
Summoner Level
Recognizes long-term account activity. Expressed as a level. Tenure is separate from accomplishment.
Champion Mastery
Recognizes investment in one champion. Expressed as levels 1 to 7. It stays on that champion.
Eternals
Recognizes champion-specific accomplishments. Expressed as stats on that champion. Players who do not buy in hit a premium gap.
Events and Missions
Recognizes limited-time objectives. Expressed as missions and the battle pass. The record ends when the window ends.
Collection
Recognizes owned champions, skins, and cosmetics. Expressed as ownership. Owning an item is separate from an accomplishment.
The gapNo consistent account-level language for different kinds of accomplishment.
The opportunity was a shared recognition framework, while each of these systems kept its own purpose.
That gap is what the player runs into between one match and the next.
04
Accomplishments were recorded, but recognition didn't carry across the player journey.
This is the journey before Challenges.
StagePlayer activityExisting recognitionMissing continuityDesign opportunity
01
Between matches
Player activityThe player looks back at progress, a collection, or an old accomplishment.
Existing recognitionEach system keeps its own record.
Missing continuityThose records do not add up to one account-level story.
Design opportunityPut rank, progress, and rewards on one account tab, and leave each system's own record where it is.
02
Lobby
Player activityThe player joins friends or teammates.
Existing recognitionRanked is the durable thing on screen.
Missing continuityBroader accomplishments are not in one account-level frame.
Design opportunityShow one title and three tokens on the banner, and leave Ranked in place.
03
Loading
Player activityOther players see the identity and competitive signals on the card.
Existing recognitionWhat shows is the existing identity, not one shared story.
Missing continuityTeammates cannot read the same broad accomplishment.
Design opportunityGive all ten players the same title and token row.
04
In match
Player activityThe player plays the game.
Existing recognitionThe match already holds accomplishments.
Missing continuityWinning stays the goal. Side progress stays in the background.
Design opportunityA challenge can point at another way to play. It never works against winning.
05
Postgame
Player activityThe result screen says what happened.
Existing recognitionExisting systems report their own progress.
Missing continuityThere is no shared language for what changed in that match.
Design opportunityShow the ranks and rewards from that match.
06
Return
Player activityThe player comes back to the client and chooses what to play next.
Existing recognitionThe separate records are still there.
Missing continuityThe broader story has no single place to pick up again.
Design opportunityPick account progress back up on the Challenges tab.
05
One framework for different ways to play.
Designers got one way to add a challenge. I kept Challenges on the account, and left champion progress to Mastery and Eternals. A challenge could encourage a different way to play. It could never work against winning.
Three types
- One-ShotOne difficulty, from Iron to Master. It is not named separately in the client.
- AccumulatorSeveral difficulties. It counts an event or a stat over time.
- EndlessAn accumulator that continues past Master, into Grandmaster and Challenger. It looks different in the client.
Seven proposed categories
These are the categories in the framework, not the names on the shipped tab. LoL and TFT each keep their own list.
- LegacyLong experience, collection, and accumulation
- InnovationPlaying in unusual ways, such as ARAM or URF
- SkillComparison-based, skill-expressive metrics
- TeamworkOutcomes achieved with your team
- CollectionOwning things. Under 50% require monetizing
- SeasonalTied to an event or a time window
- ArchivedNo longer progressable
The published launch uses five scoring categories: Imagination, Expertise, Teamwork & Strategy, Veterancy, and Collection, with Legacy set apart. Those launch names are not drawn into the cards on this page.
Nine ranks
The design targets run from Iron at 95% to Challenger at 0.05%. Grandmaster and Challenger apply only to eligible Endless challenges. Grandmaster is the top 25% of Master players. Challenger is the top 5%. Those percentiles are targets in the framework, not measured results. Lower ranks are tuned to feel achievable. The range beside each rank is estimated games for an Accumulator, or attempts for a One-Shot.
Official rank emblems
These crests are the ranked ladder. They are not a screen I designed. The number is the design target for completion.
Iron1 to 10 games, or 1 to 2 attempts95%
Bronze11 to 30 games, or 5 attempts90%
Silver31 to 75 games, or 30 attempts70%
Gold76 to 150 games, or 50 attempts50%
Platinum151 to 300 games, or 80 attempts30%
Diamond301 to 600 games, or 100 attempts10%
Master600 or more games, or 150 attempts1%
GrandmasterTop 25% of Master0.25%
ChallengerTop 5% of Master0.05%
What a rank grants
- TokenEvery rank grants one. The nine marks above are the official token qualities.
- Challenge ScoreFrom 5 points at Iron to 100 at Master and above. It rolls into an overall level and a level for each category.
- TitleStarts at Platinum, with a few intro exceptions.
- TabardStarts at Master. It replaces the lobby banner. This is the highest-value reward in the system.
- Battle Pass XPSeasonal challenges only. The XP for a rank stays the same no matter which seasonal challenge it is.
06
One progression system, four moments of recognition.
The same rules show up on the tab, the lobby, the loading screen, and the end of the game. Progress updates on its own. Each screen does a different job.
Nine ranks leave room past the top of the ladder.The tab shows that progress. Rank, progress, and rewards use the same order on every challenge.
In the interfaceThe tooltip makes rarity visible: “3.5% of players have this.”
07
From a place to track progress to a system players could understand.
These four frames are where the design moved.
02
The hover tooltip earns its place
The hover starts as a next-rank preview, and an Endless challenge calls out its unique reward there.
03
Making a nine-rank ladder legible
Iron through Challenger is a lot to show for one challenge. A click opens a vertical ladder, with checkmarks, a completion ring, and friend and server placement.
04
What “endless” means after Master
Grandmaster and Challenger are a percentile of Master players. The leaderboard says you reached Master, and that the top 25% move up. Challenger is the top 5%.
08
Show what's next on hover. Save the full ladder for a click.
The card leads with the token, the name, progress, and the reward. I tested long titles, token tiers, seasonal limits, and more than one reward. The full ladder moved to a click. Friend placement stays off the tooltip when no friends are on that challenge.
09
Exploring density, hierarchy, and different challenge states.
Seven more frames, including a compact density toggle, a one-card state, and the last two-card pass.
Additional work at Riot Games
10
Bringing the Code of Conduct into the client.
It lived outside the client, and outside the Challenges journey. Support teams then dealt with players who did not understand the rules. I designed a required in-client review. The last action stays locked until each acknowledgment is done. Brand and legal reviewed the interaction. The sequence is 3 frames.
1 of 3
2 of 3
3 of 3