I like documenting the previous work that I’ve done, so I’m posting some of the pages from PlayFirst.com that I worked on. Much credit needs to go to Colin Felton, Karen Chu, and Maria Waters, the designers at PlayFirst, for the exceptionally attractive designs they came up with. Sadly, pictures don’t do justice to the full experience since much of a UI is how it reacts as you using it, but I don’t feeling like doing a video, and the site is already changing, so I’m a little late.
Front Page of PlayFirst (Dec 2009)
The global nav, which includes the left sidebar, was all coded up by myself. Not shown is that there could be a popup when hitting this page that would display a marketing video to users who hadn’t seen it. Big game launches would use this feature, but since it was slightly intrusive (as popups are), we only used it for promoting the best quality games.
All Games Page
The All Games page listed, of course, all the games for sale. There was a feature to include an image with a link at the top of the page for promotions. This could be a rotating set of images that would change each time you hit the page. Next to the front page, this was the second most hit page, and that kind of exposure could drive traffic for important new releases.
The fun feature I built on this page was a pop over for the game images. It would seamlessly display more information over top of an image that you hovered over. This could include game description, pricing, buy/download buttons. These would open as you hovered over an image, and go away as you hovered away. As you might notice between this and the above image, the popup image was perfectly aligned with the main page image giving it neat effect when it faded and out.
There were a number of things to consider while doing this feature. First, you only want one loading and opeing at at time, and you don’t want one opening if you scroll and hover over while scrolling. Popup placement was a changing target too if you scrolled any as the popover still needs to render perfectly over top of the image even if it moved a little. On performance, when you’re tracking hundreds of potential target images to activate the effect, that’s an event that can drag on performance if done without consideration (one key to the solution being event delegation). For this page, I had to make performance adjustments as there were over 700 game images on the page, and even though the popup was an AJAX created popup (created on hover), the hover over and off effects needed to immediately load and reloading each time perfect on top of the image even after scrolling some.
Not all of the pages that I touched, or features I worked on, but these were the key ones that I had a lot of impact on. Overall, I helped reduce page load times by up to 45%. Average load time for the site dropped from ~6 seconds to ~4 seconds. The main reason for this was optimization of the thousands of images used on the site. Use of sprites for buttons and other elements helped smooth over interactions and such. Lots of fun, but I’ve moved on.