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, exclusive items, and customizable made-to-order products.

I was the 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, it was the only department to survive 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 many peripheral projects 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 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.

In this case study:

• 2001: Original Designs
• 2005: Redesign
• 2009: Checkout Flow
• 2012: Redesign: Header
• 2012: Redesign: Page Templates
• 2012: Redesign: Style Guide
• 2012: Redesign: Custom Pages

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

WBShop 2001-2005: Original Launch Case Study

Below are the earliest screenshots I have 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 Case Study

We gave the site a comprehensive refresh in 2005, with visual refinements, supporting larger-width monitors, incorporating Flash-animated enhancements, and data-driven optimizations such as red action buttons. Representative screenshots below:

WBShop 2009-2012: Customer Checkout Flow Case Study

Here's an example of a project I worked on during the the third iteration of the site, where I was not the lead designer. Below is 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 mapping out and mocking up the full 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 the user flow shown above, 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 for and strongly disliked, but we had not yet redesigned the site, as we would ourselves in 2012.

WBShop 2012-on: Redesign Case Study

Long story short, our department regained full editorial control over the site circa 2011. We undertook a new in-house redesign and relaunch of WBShop, beginning in 2011 and launching in 2012. Below are the earliest rough drafts I could find among 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 sold products from numerous divisions within Warner Bros., which didn't necessarily correspond to how customers would shop the site. For example, the Home Entertainment division handled DVDs, Blu-rays, and digital downloads, but the Consumer Products division handled licensed merchandise. Each division naturally wanted prominent placement. But many customers came 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 Case Study

The process of wireframing for the 2012 relaunch was a little different than earlier iterations of the site, as the 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 proposing 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 Case Study

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

The "Touts" section was 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.), as I frequently found myself having to explain such basic facts of the web.

WBShop 2012-on: Additional Screenshots Case Study

Below are some additional screenshots from this iteration of the site, many illustrating the increased degree of customization we could achieve with the new platform:

Please also see 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.