Woodland Sean G. Thomas

Site Production: wine.com

My history at wine.com, formerly Virtual Vineyards, was as involved as it was rewarding: I worked with them on a contract basis soon after moving to California in 1997, became a full-time employee in early 1998, then left in 1999 to pursue other projects -- only to return later that summer (once again as a contractor) to help launch the wine.com site.

Below are examples of projects from both the Virtual Vineyards and wine.com sites. Click on any of the images below for a full-size version of the image (which will open in a new window).

wine.com redesign: 1999

wine.com login page (click for larger image)Having already participated in one redesign during the fall of 1998, I returned to Virtual Vineyards -- soon to be wine.com -- to help implement the design developed by frogdesign during the summer of 1999.

During the redesign, I used the "dummy" HTML code developed by frogdesign and worked with wine.com's engineering team to turn them into functional Java server pages. My main focus was on developing the account pages and checkout process, which evolved over time as frogdesign's initial concepts merged with the newly redesigned back-end of the site.

wine.com account history, product detail page (click for larger image)The first example in this section is the login page used for both the Account Information and Checkout paths. The second example is the page within the Account History area of the site that summarizes the user's information on file and previous purchases. The third example is of the main page within the Checkout process, just prior to order confirmation.

wine.com checkout process, summary page (click for larger image)Certain items in the original page concepts were modified or implemented after the initial launch, which required a flexible approach to the page prototypes. I also worked in tandem with two on-staff Web producers, often developing related pages in parallel on separate development "sandboxes"; often a change to a related page would require a similar modification to the Account or Checkout processes.

A year later, based in part on my experience producing these pages, I would be asked by wine.com to redesign this checkout process...

Comarket pages: 1998-99

Virtual Vineyards comarket example #1 (click for larger image)In addition to general updates of the Virtual Vineyards site, I was responsible for developing the majority of "comarket" pages for the site. These pages were created as a customized entryway into the site for visitors from client sites, and generally featured a special promotion or discount available only from that page.

The first example in this section is for a discount promotion, which does not feature any products for purchase and essentially identifies the client and host brands while explaining the terms of the promotion.

Virtual Vineyards comarket example #2 (click for larger image)

The second example is of a seasonal comarket page, which features products specially created for the promotion. It is unusual in that a client logo is not featured, although the sidebar includes a "sweepstakes" offer which links to an email submission form on another site.

Virtual Vineyards comarket example #3 (click for larger image)The third example is a comarket page which features multiple customized products in an unusual format. Club enrollments are handled differently than individual products since they are ongoing, which necessitated the absence of product links; however, time and resource constraints required that each club variation have its own "Add to Cart" button. The "grid" format was a solution that could be implemented using existing engineering code.

After Virtual Vineyards became wine.com, I was asked to develop new comarket templates that incorporated the new site design but retained the content of the original pages. Below are screenshots of the redesigned templates: the left design is an update of the first design shown in this section; the right updates the second design.

wine.com comarket redesign #1 (click for larger image) wine.com comarket redesign #2 (click for larger image)