Redesigning the biggest mobile game client in the world.
August 20th 2017
UX, UI & Visual Design
Paper & Pen, TextEdit, Illustrator, Photoshop
Steam, created by Valve Software, is the biggest gaming client in the world, with 12.5 million active users.
The Steam Mobile App, the mobile equivalent of Steam, released in 2012, has maintained a lot of UI patterns from the time, with few updates to its design and usability.
To improve Steam Mobiles user interface, both functionally and visually, whilst maintaining its vast functionality.
- Refine usability by changing the app structure, navigation, and UI elements.
- Update visual identity to better match the contemporary Steam App, and to better suit higher resolution devices.
RESEARCH & IDEATION
Before jumping into the redesign itself, we must breakdown the existing app and understand it in full.
Here we take a screen shot of every view, and organize its various elements into categories. This will help us keep track of everything as we reshape the app.
The visual identity is updated, adding Roboto as an interface typeface, a greater range of colors, and a brand new set of custom made icons inspired by the forms of the Steam Logo.
Finally we deliver UI rendered mockups of key screens sporting an updated navigation, visual identity and functionality.
Start & Login
UI Details - Header & Tabs
UI Details - Search Navigation & Filtering
The redesign proposes a more stripped down and focused experience, allowing gamers to focus on their gaming content, and less on looking for it.
A clean, almost subdued visual design puts content first, retaining the existing brand identity, whilst the new app structure retains Steams complexity without overwhelming the user.
The motivation for this project was based on the fact that I myself am a Steam user, and found the app to have a lot of room for improvement, but also because I wanted to practice my UI design skills using Illustrator and Photoshop only.
In the end, this was a challenge, and I conclude that these tools are not optimal for UI design, especially since there are far better alternatives such as Sketch.
I also lacked more in depth user research, testing and prototyping in this project. Although its focus was mostly conceptual and visual, the lack of actionable data made decisions feel unfounded.
In future, I will be more formal in my process, focusing on users instead of personal research.
Thank you for your time.