WBshop.com was Warner Bros.' flagship e-commerce site. It sold products from across the company's divisions, including DVDs & Blu-rays, digital downloads, games, licensed merchandise, exclusives items, and customizable made-to-order product.

I was lead designer for the original 2001 launch and two subsequent redesigns in 2005 and 2012. It was originally conceived of and managed by the New Media department within New Line Cinema, due to its early e-commerce success with its own online shop and auction site. Also due to its success, this department ultimately survived the shuttering of New Line Cinema, and became the e-commerce group at Warner Bros.

I designed three of the four major incarnations of WBShop, and worked on peripheral materials throughout. Here is a quick timeline of the site, with the roles I played:

• 2001: Initial Launch: Lead Designer. Full site design, emails, touts, banners, product photography.
• 2005: First Redesign: Lead Designer. Full site design, Flash animated elements, emails, touts, banners, product photography.
• 2009: Second Redesign, by the agency called Fluid. After a Warner Bros. corporate reorganization, this version of the site was designed by an outside agency for the first time. During this period I played a supporting role, working on wireframes, customer checkout flows, emails, touts, product photography, and physical product design. This version of the site was ultimately unsuccessful, and our department regained full editorial control of the site in 2012.
• 2012: Third Redesign: Lead Designer.. Full site design, style guide, email marketing, seasonal touts, product photography, and physical product design.

Below is a selection of work from across my long association with the site:

WBShop 2001-2005: Original Launch

Below are the earliest screenshots I could find of the first iteration of WBShop. To drive home the period in which the site launched, it was optimized for monitors as small as 640px wide.

WBShop 2005-2009: Redesign & Relaunch

We gave the site a complete refresh in 2005. Representative screenshots below:

WBShop 2009-2012: Customer Checkout Flow

From the third iteration of the site, where I was not the lead designer, here's an example of a customer user flow diagram, circa 2010.

At the time, this version of WBshop had been designed by the outside agency Fluid, utilizing the e-commerce provider Demandware. Unfortunately, it suffered problematic shopping cart and user account functions. My boss, the V.P. of e-commerce, initiated a comprehensive overhaul of the checkout flow. He assigned me the task of mocking up the total experience, taking into account three types of visitors:

1. new customers
2. returning customers with saved settings
3. returning customers without saved settings

I created a clickable user flow, visually depicting the path customers would take, with corresponding mocks for each step. We undertook a great deal of back-and-forth refinement, and presented a series high-fidelity pixel-perfect page mockups for each step. To reiterate, these mockups utilized a visual design we were not responsible and strongly disliked, but we had not yet redesigned the site, as we would ourselves in 2012.

WBShop 2012-on: Redesign

Long story short, a new redesign and relaunch of WBShop happened in-house, beginning in 2011 and launching in 2012. Below are the earliest rough drafts I could find in my backed up files:

The new e-commerce provider Marketlive requested that our first delivery be the layered source files for the header and footer. For our purposes, that meant our first step was to lock down both the aesthetic visual design (including a new logo, color scheme, etc.) as well as to reconsider the information architecture.

WBshop sells products from numerous divisions within Warner Bros., which don't necessarily correspond to how customers would shop the site. For example, the Home Entertainment division handles DVDs, Blu-rays, and digital downloads, but the Consumer Products division handles licensed merchandise. Each division naturally wanted prominent placement. But many customers come to WBshop looking for all kinds of products related to a particular property (Batman, Harry Potter, etc.), not necessarily to shop for DVDs in general (although that had to be allowed for as well).

So, as you can see from the wireframe and final version of the header, the solution was two main modes of navigation: a means by which to shop by product type as well as by top Warner Bros. brands.

WBShop 2012-on: Wireframes & Page Templates

The process of wireframing for the 2012 relaunch was a little different earlier iterations of the site, as the new third-party e-commerce provider Marketlive provided a basic set of wireframes of their own. These wires depicted the typical out-of-the-box features of their platform. My boss worked with me to create our own versions of these wireframes for all required page template types, selecting which existing Marketlive features to utilize and concepting our own where necessary.

Below are selections from the final set of wires, in their refined state as pixel-perfect page mockups.

WBShop 2012-on: Style Guide

One last item I would like to show is the style guide I created during the process of the comprehensive 2011/2012 redesign. It is presented as a website rather than a static PDF, allowing for easy updates, downloadable templates, and assurances that all team members always saw the latest version.

The "Touts" section is the most important, as it included demonstrations and source files for a variety of layouts and interactive elements for the site's "fill slots" (basically blank slates that we could fill with any content we wished). For these, I built fully functional HTML/CSS/jQuery templates including carousels, sliders, and video. These style guide pages included paths to the template files stored on the department shared drive.

I am reminded that I also had to include a guide to file formats (JPG, GIF, PNG, etc.), for those who did not know such things.

Other Work

Please see these archives of a small selection of the miscellaneous creative I was responsible for over many years, such as banners, touts, HTML emails, and product designs.