Andy Yeckel Design
Andy Yeckel Design

Portfolio / Go2marine.com (2001–2002) Project 68 of 78   ☚ Prev | Next ☛

Go2marine.com (2001–2002)

Go2marine.com is a marine parts store that was launched around 2000. The biggest task was getting a shelf of detailed parts catalogs into a structured format. Initially, the data was input manually. I introduced OCR for scanning extensive printed marine-parts catalogs and using import scripts for an early Java-based CMS. The workflow was slow and relied heavily on inline HTML, making updates difficult. The scanned catalog images themselves were low-quality.

To speed up this workflow, Photoshop automation scripts were developed to batch-process images by resizing, cropping, and removing backgrounds and halftone patterns. Actions specific for text based imagery improved OCR readablituy. The product image scripts performed a number of steps to output image file in multiple formats optimized for the web JPEG for full-size and large images, and GIF for thumbnails. The import process continued to become more optimized and complex.

Whenever possible, higher-quality original product photography was used. Animated GIFs were also experimented with to visually demonstrate products, such as a feathering propeller by taking a series of images and manually removing backgrounds and aligning them for seamless looping.

Managing tens of thousands of products was another significant challenge. One area featured interactive exploded-view diagrams, allowing users to click directly on individual parts and add them to the shopping cart. Digital product catalogs were not available at the time, so the HTML for these diagrams and product pages was manually created within Excel spreadsheets. Custom Excel scripts generated import-ready database tables, significantly faster than alternative manual methods.

A particularly complex project was integrating multiple brands of boat covers. Many used coded SKUs to represent product variants such as color, material, and size, but our database required each variant to exist as a separate SKU entry. To handle 20,000+ skus, complex Excel workflows were developed using manual string concatenation—similar in function to modern scripting methods—to dynamically create detailed product descriptions in HTML, embedding material and color thumbnails entirely from spreadsheet entries.

Photoshop and ImageReady workflows were generated for creating graphical elements such as buttons. Buttons were sliced into fixed-size end-caps with a stretchable middle section, known as single-pixel stretching. This allowed buttons of varying widths to reuse identical graphics. The same single-pixel stretching technique was also used in Sixspeedmedia.com. It was also recognized that interface gradients could be dynamically styled simply by changing color values.

A Flash prototype of the Go2marine home page was created June 2002, it tested scalable, lightweight responsive interface techniques. It consists of a main navigation frame with swappable modules, dynamically pulling in home, product, and special-offer pages separately, while populating the product pricing from an external file. Vector based ui was utilized later in CM Button and SAAS Zoom projects.

  • Go2marine.com (2001–2002)
  • Go2marine.com (2001–2002) vetorgo2.jpg
  • Go2marine.com (2001–2002) go2marine1.jpg