Valve / Steam

Steam Deck

Hardware · Design System · UI · UX

Overview

Steam is one of the most popular gaming apps in the world but it was tied to your desk. Our team was focused on bringing games to everyone, everywhere. Steam Deck brings your library of games that you already own, where ever you are.

Info

SteamDeck.com Time: 2 years Shipped: Feb 2022 Team: Jay Shaw, Melissa Small, Sacha Jerrums, Tucker Spofford, Dhabih Eng, Emily Kent, Lawrence Yang

Discover

The team set out to build a handheld device that could play your Steam Library without sacrificing graphics, frame rate, or ergonomics. We wanted to make a device that felt like you had your PC in your hands with almost every game available.

We had three primary goals

Create a handheld device that could play over 75% of the Steam Library.
Work with developers to ensure the process for being Deck Verified is minimal.
Build an updated SteamOS using a responsive design system across all platforms.

Designing a system

Recent work had been done on shipping a redesign of the desktop library but the team was rushed and had no experience implementing a code base built alongside a design system. A lot of the work was redone but the Deck served as a great vessel to start from the beginning when building our components in design and code. We redesigned the color system, iconography, typography, and accessibility for Steam.

We also pushed Steam’s design into a more game focused ui that tries to get out of the way and just support the features inside.

Measuring and Validating

In order to validate our design decisions we started with static prototypes. These helped us explore multiple ideas quickly that we could then narrow down further to start developing.

Every iteration we had some confidence in would then be shipped to the internal company of 300 for us to use during meetings, after work with friends, and with our most trusted users for feedback.

Once we gathered feedback from these groups we’d ship to a smaller % of user base to then gather feedback via CX and social media communities.

Navigation

Steam Deck’s delivery of features is very limited by it’s size. Navigation on Desktop was easy to solve but created a lot of roadblocks when it came to Deck. We built the navigation and layering from the ground up. Utilizing qualitative data from user studies we were able to iterate and find the right solutions for which features needed to be primary versus secondary.

Home Screen

The home screen on Deck was an opportunity for our team to create a central hub for Steam. A place that focused your content for you showcasing recent games played followed by a tabbed sub-section of news, friend activity, and content ready to play.

Downloads

The Downloads page was one of, it not the oldest page on Steam. We knew it would be done before the launch of Steam Deck so we saw an opportunity to ship this feature beforehand to test our design system, code base, and responsive platform. I lead shipping this feature in July of this year, working alongside four developers.

Bringing Steam to a new age

Steam has too many features for us to bring them all to Deck at launch. Using quantitative data and our understanding of the product’s complexities to ship we were able to narrow down our list of features that would make this experience still feel whole.

The Results

The feedback has been overwhelmingly positive and we started taking preorders in July of this year and still collecting more. The amount of preorders has well exceeded our expectations. We have plans now for how we will continue to build, test, and ship remaining features of Steam to the Deck and also to Big Picture (TV) in the future. Learn more about Steam Deck