Design Work: Badge Games Hub on Nick.com

One of my first projects as lead design on the games product development team at Nickelodeon Digital was the re-strategizing and redesigning of the ecosystem we've got for presenting games with badges. Our efforts with the badge hub were met with pretty marked success; post-redesign the page saw traffic increase over 500%, it did great in usability testing, and our pathing reports indicated that kids were actually using the page repeatedly to find games like we had hoped.

Here's what the badge games listing page looked like BEFORE we redesigned it:

And here's what it looked like AFTER we got our hands on it:

Improvements included:

• bigger, more enticing game images for both featured and all listed games

• an awesome "dock" of badges below each game that enlarged with a really fun animation on rollover

• the ability for the user to see which badges they had won by greying out all the ones they hadn't

• social and competitive element for particularly engaged users—the leaderboard

• subtle styling upgrades

Here's the little help section we designed for the page featuring Patrick {from Spongebob SquarePants}.

And some examples of the piece I was most excited about, the new featured area:

In addition to having the capactiy for much larger images than we've ever been able to promote with on the site, and the ability to have images break out of the frame of the box, these also have animation! The badges on the left hand side of the promos are pulled in dynamically by the page {they're the actual badges for each particular game being promoted} and animate downward in three overlapping planes in a pretty cool waterfall-like manner.