Role
UX Design Intern
Studio
Microsoft Studios Global Publishing
Platform
Xbox One · Windows
Shipped
February 2017
01
The mode
In Summer 2017, during my internship at Microsoft Studios Global Publishing, I worked on Crackdown 3 — designing the UX for “Keys to the City”, a mode that lets players switch on developer tools and explore the open world in new and creative ways.
Keys to the City gives players all the tools to create their own experiences and experiment with everything Crackdown has to offer. The design had to evoke familiarity with — and nostalgia for — the mode from the original Crackdown, while updating it to fit the new game.
A full UX proposal, built on the studio’s UI style guide — from enabling the mode to every in-game interaction.
A bundle of tools
Players can manipulate all of the gameplay systems and content in any way they see fit.
Spawn anything
Props, enemies, vehicles, weapons, equipment, and every other player tool.
Free to share
Players don’t have to own Keys to the City to join a Keys to the City session.
God Mode
Fast Skill Development
Agility Skill Level
Strength Skill Level
Firearms Skill Level
Driving Skill Level
Explosives Skill Level
Super Agent Agility
Super Agent Strength
Infinite Ammo
Supply Point — All Weapons
Enable All Supply Points
Vehicle Impounding
Spawn Agency Car
Spawn Ramp
Spawn Explosive Barrel
Change Time of Day
Freeze Time of Day
Empty Streets
Launch All Hit Squads
Launch Agency Enforcers
The game
Crackdown 3
02
Top player goals
Every interaction in the proposal traces back to six player goals:
I know what Keys to the City is.
I know how to make a Keys to the City game — or turn a game into one — and which games are Keys to the City.
I can toggle keys on and off with ease while in-game.
I’m encouraged to experiment in the open world, unconstrained by normal gameplay rules.
I’m invited into the developer’s shoes and feel as if I’m creating part of the game.
I can share my creations with friends and viewers.
03
Enabling the mode
In the original Crackdown, Keys to the City was a mode entered from the main menu. For Crackdown 3, I moved it into the world itself: enabled at the creation of a new World Slot, or later through the Customize World screen. The reason — unlike previous versions, Keys to the City worlds can now be saved.
Screens used the studio’s new navigation style guide — new button styles, difficulty selection with joystick left/right, and the World State summary showing each slot’s Keys to the City status at a glance.
Press Y to open the Customize World screen — side bars animate in.
Scroll down to the Keys to the City button.
Scroll right to switch it from Off to On.
A warning appears: once enabled it can’t be disabled, and achievements are locked.
A to enable (On is locked) · B to cancel (back to Off).
Select World screen
Customize World screen
04
The in-game panel
Keys to the City was originally planned as a tab on the crime map. Instead, I proposed an in-game panel based on the original Crackdown’s — updated to the new style guide and controller. Avid users of the old mode wouldn’t have to learn a new way to navigate, and since the old “Back” button is now the Map button, the left D-pad opens the panel. The player keeps playing while toggling keys — like a
Activating a key
Left D-pad opens the panel · up/down D-pad scrolls (other D-pad functions pause while open) · Y toggles a key on/off — active keys show blue text and a check mark · right D-pad closes the panel.
Skill-level keys
For skill keys, Y cycles Off → Level 2 → 3 → 4 → 5, with the active level number shown in place of the check mark.
Style-guide details
The selected key uses the navigation buttons’ orange/black gradient; a scroll bar signals the list continues. Active checks are orange, not blue — blue stood out too much against the orange and black.
Panel open — in-game
Zoomed — key list
View the design doc →
The social aspect
Crackdown 1 and 2 proved that players love sharing videos of the wild experiences Keys to the City makes possible. Keeping it as an in-game panel — rather than a separate interface screen — encourages more streams and videos of the mode.