Project: Web development, for Smith & Fong

Smith & Fong
Web development

A web site for a manufacturer of sustainable building products

Smith and Fong is one of the oldest players in the renewable building products industry, and has long championed stewardship among their supply partners. In 2008, the company won the inclusion of bamboo into the Forest Stewardship Council’s rulebook, and has a sterling reputation for responsible supply management and premium products.

But though a company’s conduct may be impeccable, it still has to sell its products, and S&F’s quiet, deeds-not-words marketing was being overshouted by less-experienced and less-reputable competitors, particularly on the Web, which is a primary source of information for the architects and designers that are the company’s core constituents. They engaged us to redesign their site to better serve those people, and in accordance with the principles of SEO, so that they would appear more prominently in materials search results.

We delivered a highly visual site that capitalizes on the products’ beauty and utility, executed according to Web standards, and which now places Smith & Fong firmly at the top or in the first page of search results for the category.



Analytics told us that the site is trafficked mostly by people using high-speed connections; S&F’s audience is largely architects and interior designers. We designed around a large fixed image area, displaying either 1:1 product samples (see below, or images of the product in use. Shown here are various states of the index page, showing different products (linked to pages within the site).



Product pages

Since it can be difficult to make fine distinctions in describing a broad range of products made out of the same material, we opted to supplement traditional menus with a visual, desire-based navigation scheme, helped by plain language. At left, a simple matrix of product swatches sortable by product offering (plywood, flooring, paneling, veneer).

At right, a detail page showing – as background – a surface sample at roughly 1:1, and a reader-configurable specifications area with applications for plywood, flooring, paneling and veneer. A separate, print-optimized set of styles allowed the reader to print the contents of the page as a traditional spec sheet.



Product applications

Large images of applications are easily found, either by linking from the appropriate product page or via a menu-based system. The view at right shows a roll-up menu containing direct access to other installations using this particular product.




Pagetypes for S&F’s sustainability statement; an interactive product finder; and pressroom.

Creative directors
Adam McIsaac
Eric Hillerns
UI consulting
Cory Duncan