Customer Checkout Flow

An example of customer user flows, circa 2010. At the time, a new version of WBshop had been designed by the outside agency Fluid, utilizing the ecommerce provider Demandware. Unfortunately, the new site suffered problematic shopping cart and user account functions. The V.P., eCommerce wished comprehensively overhaul 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 undrtook a great deal of back-and-forth refinement, and presented these high-fidelity pixel-perfect page mockups.

Header Wireframe

Long story short, a new redesign and relaunch of WBshop happened in-house, starting in 2011 and launching in 2012. The new ecommerce 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.

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 ecommerce 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.

Here's an archive of the final set of wires, in their refined state as pixel-perfect page mockups.

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 had 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.