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.

Original:

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.

86 Comments

  1. Don’t give up on going to VALVe.

  2. Say, you got a nice blog article.Really looking forward to read more. Want more.

  3. Major thankies for the article.Really thank you! Cool.

  4. Hey, thanks for the blog post.Really looking forward to read more. Want more.

  5. Muchos Gracias for your article post.Really thank you! Really Cool.

  6. download says:

    I cannot thank you enough for the blog post.Thanks Again. Much obliged.

  7. Awesome blog post.Really thank you! Fantastic.

  8. IHSG says:

    I appreciate you sharing this blog article.Thanks Again. Fantastic.

  9. I really liked your article post.Really thank you! Cool.

  10. I really liked your article.Really thank you! Cool.

  11. Thanks-a-mundo for the article post. Awesome.

  12. chefcoats says:

    Looking forward to reading more. Great article post.Really looking forward to read more. Keep writing.

  13. Thanks for the article.Thanks Again. Keep writing.

  14. Appreciate you sharing, great blog article. Much obliged.

  15. Enjoyed every bit of your blog.Much thanks again. Keep writing.

  16. Enjoyed every bit of your article.Really looking forward to read more. Cool.

  17. Wow, great article post.Much thanks again. Really Great.

  18. all watch says:

    Thanks-a-mundo for the article post.Much thanks again. Cool.

  19. Boxbedarf says:

    I think this is a real great blog.Really looking forward to read more. Will read on…

  20. dafabet says:

    Very neat article post.Really thank you!

  21. I think this is a real great article. Fantastic.

  22. “Interesting blog post. A few things i would like to contribute is that pc memory is required to be purchased but if your computer still can’t cope with everything you do along with it. One can set up two RAM memory boards containing 1GB each, as an illustration, but not certainly one of 1GB and one of 2GB. One should check the manufacturer’s documentation for the PC to make certain what type of memory space it can take.”

  23. I really enjoy the article.Really looking forward to read more. Awesome.

  24. I think this is a real great blog. Awesome.

  25. “Great post. I am facing a few of these issues as well..”

  26. A round of applause for your article post.Really looking forward to read more. Fantastic.

  27. Great, thanks for sharing this post.Much thanks again. Much obliged.

  28. You sure know what you’re talking about. Everyone is going to soon be visiting your site.

  29. “Hello my friend! I wish to say that this post is amazing, nice written and include almost all important infos. I would like to see more posts like this.”

  30. Wm Russom says:

    I really can’t believe how great this site is. Keep up the good work. I’m going to tell all my friends about this place.

  31. This site looks better and better every time I visit it. What have you done with this place to make it so amazing?!

  32. “Awesome blog post. Will read on…”

  33. Thanks again for the article.Really looking forward to read more. Much obliged.

  34. “Im obliged for the blog post.Really thank you! Great.”

  35. Enjoyed every bit of your post.Much thanks again. Awesome.

  36. Major thankies for the article post.Thanks Again. Want more.

  37. I really liked your blog.Much thanks again. Awesome.

  38. Wow, great blog.Really thank you! Cool.

  39. “Really informative blog post.Really thank you! Much obliged.”

  40. I really liked your blog article.Really looking forward to read more. Great.

  41. “So many customers will be pleased with your written material. Regards!”

  42. Thanks so much for the blog article.Really looking forward to read more. Keep writing.

  43. Great, thanks for sharing this blog.Thanks Again. Will read on…

  44. “I’ve been browsing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all website owners and bloggers made good content as you did, the net will be much more useful than ever before.”

  45. Great, thanks for sharing this article post.Really thank you! Great.

  46. Very good blog post. Cool.

  47. Awesome blog.Really looking forward to read more. Much obliged.

  48. Thanks for sharing, this is a fantastic article post.Much thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *