Xbox Console History MuseumThe Xbox One dashboard, rebuilt as an exhibit you browse with a controller. Shown in New York.
Each console generation had its own room in an Xbox exhibit. I designed the interface for the Xbox One room, built from one tile grid.
- Role
- Digital Designer
Xbox One exhibit UI - Timeline
- Jun – Sep 2022
- Agency
- Ten Gun Design
- Team
- Designers, Project Manager, Developers, QA
- Tools
- Figma, After Effects, Photoshop
- Platform
- Interactive exhibit, New York
Overview
A dashboard built to launch games had to tell a history.
- Problem
- The exhibit needed the real dashboard’s look and feel for a different job: browsing a console’s history, read from a step back. Visitors ranged from fans who know it by heart to people who have never held a controller.
- Design question
- How might one tile system carry a console’s whole history, for fans and first-timers alike?
- Key insight
- Many visitors had owned an Xbox One, so I rebuilt the room on its own design language and changed only what a museum needs. Their hands know where to go before they read a word.
- My part
- The hub, the section pages and the story template, inside a team of designers with a project manager, developers and QA.
System
One grid carries every page.
A small system the exhibit could live in: a grid, its parts and a few rules.
Design language continuity
What I kept from the real dashboard, and what I changed for the exhibit.
- Navigation
- KeptSection tabs across the top of every page, and a tile grid under them.ChangedThe tabs are the room’s history: The Launch, The Hardware, The Games and The Platform.
- The hero tile
- KeptOne big tile leads the hub.ChangedIt leads with a story, the Xbox One’s debut, instead of the last game played.
- Focus and buttons
- KeptOne white focus frame, and the A and B buttons, with the legend on screen.ChangedNothing, so owners have nothing to relearn.
- Look
- KeptA black canvas, Xbox green and Segoe in light weights.ChangedGreen steps back, so the history can bring the colour.
- Starting up
- KeptThe power-on: light opening onto the hub.ChangedAn attract loop plays until someone picks up the controller.
Rules every screen keeps
- 10-foot UI
- Visitors stand a step back from a large screen. Text stays at 20 px or larger at 1080p, labels sit on solid green or on an image’s darkest edge, and no action relies on hover.
- Single focus state
- Focus has no dead ends, and each move goes to an adjacent tile.
- Shallow navigation
- Pivot, tile, story. Every page sits one section away from the hub, and B always goes back exactly one level.
Components
A handful of parts, each with one job.
Each one is drawn here in code at the exhibit’s proportions, with the rule it keeps.
- Tile
Rest Focus Pressed One tile has focus at a time: a white frame and a slight lift. Pressing A sinks it before the page opens.
- Section tileThe HardwareThe Games
Xbox green belongs to the exhibit’s own sections. Everything else takes its colour from the history.
- Pivot
Five sections in one row, moved with the bumpers. The section you are in is white; the rest step back to gray.
- Featured
A wider tile for the stories the exhibit leads with, stacked in its own column beside the grid.
- ButtonsA SelectB Back
Two buttons do everything: A goes in, B comes back. The legend always shows which one does what here.
- DetailForza Motorsport 6Publisher: Microsoft StudiosDeveloper: Turn 10 StudiosRelease date: 2015-09-15
Every story opens the same way: the title, its facts, then the media. Only the content changes from page to page.
Screens
Visitors learn the layout once, then read the history.
The attract loop starts the room, the hub opens five sections, and each section leads with a hero tile.
1The attract loop
The premiere and the power-on, with the launch lineup along the bottom.
2The hub
Five sections across the top, the story the room leads with in the hero tile.
3A section
The Launch: the same grid, its own hero, the hardware around it.
Forza Motorsport 6
TRAILERSPublisher: Microsoft Studios
Developer: Turn 10 Studios
Release date: 2015-09-15More than 450 cars and 26 tracks, with racing in the rain and at night for the first time in the series.
BBackASelect4A story
Here, Forza Motorsport 6, with its facts and trailer.
Every screen on the board
Thirty-eight screens across the start and four sections, rebuilt from the board’s exports, with game art from the store pages. Pick a screen to open it in the console.
The start
The Launch
The Hardware
The Games
The Platform
Results
Shipped in 2022, for the exhibit’s Xbox One room.
- Validation
- Screens were reviewed on a keyboard-driven console simulator with the team and QA, and on a large display at the distance visitors would stand.
- What I learned
- I came in having never used an Xbox, learned its patterns, and designed inside them with a multidisciplinary team. Next time I’d document every screen’s focus order and motion as specs developers can run.