This redesign was only 10% complete before I abandoned it due to time constraints and other projects. It was suppose to be a full blown re-envisioning of Steam’s game pages (optimized for TV screens) which were going to be called “Ambassador Pages”. Basically, a universal profile (unofficial site) for a game that has everything from videos, demos, user submitted screenshots, reviews, forums, tips, faqs, and strategy guides accessible from one page. Sort of like what IGN and Gamespot have, only with Steam’s “add to cart” option to buy the game. This way Steam can use the pages to attract visitors and directly advertise the games for sale on Steam. Resulting in a win/win/win situation for fans, publishers, and Steam. Increasing traffic to Steam’s online store, creating a community around games, and increasing sales.
Incomplete Redesign for TV screens:
With background for images, no left/right arrows and instead a content aware scrollbar at the bottom so you can skip directly to screenshots or videos:
(The slider technically isn’t correctly positioned in the mockup above. I wanted to make it look like the slideshow was in the middle of the screenshots section. But if you compare the mockup to the others above it’s obviously on the second picture from the left, not the middle.)
And that’s as far as I got. I was going to mess with the rest of the content and make the fonts more readable for TV screens but I decided to stop here.
Why I stopped:
Despite trying a few times to get hired by Valve, I’ve come to the conclusion that I’m just not polished enough to work there like I wanted and I probably won’t be ready for quiet some time. Mentally, I’ve moved on and am trying to get hired elsewhere, maybe a little startup where I gain experience in a more personal setting.
Did you know?
Messing around with these mockups is how I came up with the “Content Aware Scrollbar” ? By putting the videos and screenshots together in a linear slideshow I wanted the user to still be able to skip directly to the screenshots using the slider below the slideshow.