PUMA's catalog for Spring Summer '07 came in two versions: a mail catalog and an online catalog made to complement the mail version. Every item seen on the paper version of the catalog was viewable online. Even if the customer hadn't received the catalog in the mail, they could still order everything through the online version.

I wanted the online version to be more useful than the mailed version so we added a zoom function that allowed the user to see every product up close and hidden animations / games that showed off the best products for that season. The interactivity had to be simple and clear to use so customers would have no problem purchasing any of the products.

With the use of animations and mini games in the catalog, we were able to keep users entertained, engage them in our brand and advertise featured products in the catalog.

Image 1 of 9: The loading screen progressed as a ripping piece of paper that revealed the title.

Image 2 of 9: The start tab ripped open the page and started the catalog. Ripping paper was a constant style on the site.

Image 3 of 9: Ripped screen transition.

Image 4 of 9: While going through the catalog, users could click on any product to be given more info and add it to their cart.

Image 5 of 9: Product zoom transition ripped away the current page.

Image 6 of 9: Product zoom view.

Image 7 of 9: I created various animations for the site to feature certain products that were in the catalog.

Image 8 of 9: Another animation feature.

Image 9 of 9: A mini game hidden in the site that featured PUMA products and which page they were located on the catalog.