Redesign (Abandoned) For Steam “Ambassador Pages”

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.

I was experimenting with full screen background images. I actually tested them out and surprizingly they did NOT make the page load slower. In fact they were around the same size, sometimes smaller, than the current fixed width background images. That’s because I compressed 1024 X 768 pixel images into JPEG using 40% quality and set the blur setting to its max, “2”. This removed all the artifacts and shrunk the image down to around 25kb-40kb. The black and white backgrounds are amazingly small and do not impact page load, although a javascript file is needed to stretch the image correctly and it may or may not degrade gracefully.


Incomplete Redesign for TV screens:

With color: (background slightly desaturated so media stands out more)

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:

Content aware scrollbar with left/right arrows and background for media:

(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.