Ken Starks acquired a soft plastic fish bait manufacturing business. A new e-commerce web site was needed to promote products to distributors; however, the need to increase online retail sales was an important part of their business strategy. Other goals for the new site included showcasing product quality, promoting multi-item purchases and cross-sells. Providing a means for the staff to easily update the site using Microsoft Office was essential.

I addressed the challenges by executing a rigorous user-centered design process. I started with interviewing the client and customers about the products, exploring their experience with shopping for similar product at other e-commerce sites. After completing a competitive design analysis and defining a site map where all primary paths lead to a product page, I focused on producing the information design and copy to support over 2,000 product items. An innovative product presentation along with an interaction design to add multiple product items to the cart resulted in a 350% increase in online sales and the staff could update the site using Microsoft Access.

Information Architecture, Information Design, Interaction Design, Visual Design, Copy, Coding, Product Photography

www.humandomain.com/bayououtdoors/

Wireframes are an important tool for focusing the design effort on key content elements and interactions supported on a web page.

I often color code wireframe modules to indicate where on the page I expect the user to spend the most and the least amount of time viewing content. My eye tracking study experience enables me to refine my design decisions to create the best opportunity to guide the user toward content and information that will lead them to achieve their goals. I use this color coding technique to inform the visual designer on where and how to weight and place content to produce the best user experience. My wireframes provide the visual designer with a blueprint to support a design scheme that guides the user's eye across and down the page – beyond the fold.

The light blue modules mark areas of the page where the user is expected to spend the most time viewing content before taking some action. The grey modules mark areas where the user will spend the least amount of time viewing content or will completely ignore. White colored modules are neutral and viewing time will depend on the relevancy of the content to the user's need, interest and willingness to explore.

Clicking the angler's photo on a product details page enlarges the picture and displays a fishing story, including a mention of the color of the featured product used to catch the fish. Being a guy who likes to fish, I have a head start on defining personas for this site. Bass anglers have egos, often exhibited by showing off and bragging to their friends.

Spotlighting customers catching fish with the product has proven to sell more product, and it encourages user generated content in the form of photos, stories and reviews — driving more traffic to the site in order to... brag and buy more product.

Opportunities to cross-sell products are enhanced by displaying a picture of the product when hovering the mouse over a linked product name.

The product details page uses a template to display items for a product line in the order that best match the customer's product selection process. In most cases, the color of a product item is the most important factor leading to a purchase decision, so the color name, the color swatch and the photo of the product item are grouped toghether, separate from other item details, to assist with scanning the page and selecting products. The color swatch functions as a bullet for the list of product items.

Multiple product items (varying by color, weight, size or type) can be selected from a single page where highlighting is used to confirm which items are to be added to the shopping cart.

This design has resulted in an increase in the number of items per order with fewer page views, correlating with an increase in repeat customers. In addition, usage metrics validated the success of the new site map and workflow.

Not only is the quality of the products a source of pride for the company, the ability to examine the subtle details of the product without holding it in your hand solves a practical problem. For example, many of the products are manufactured in colors that appear very similar at first glance where color swatches alone may not be enough to convert a sale, so having the ability to efficiently zoom-in on high-resolution photos of each product item allows the customer to inspect the details of the product before making a purchase.

This innovative design solution increased bulk sales of products and transformed the web site into the company's primary marketing tool, saving the company money by reducing the need printed catalogs.

I could make several statements to help contrast my design with the previous design, but I'll let the picture speak for itself.

I produced the graphic artwork for the new site, including the banner graphics, the design scheme and fundamental user interface elements.

I developed all the copy for the site, using southern slang and writing in a tone of voice that would appeal to the target customer.

I photographed and edited all 2,200 product items presented in the site.

The staff could update product information, schedule sale campaigns and spotlight featured products simply by editing an Access database table and using macros to export data to text files that are uploaded to the web server. I coded Javascript to read the text files and render the HTML required to display the product information.

I enabled their web site to achieve #1 search rankings for keywords 'bass baits' – out ranking company's with very large marketing budgets.