Mason Hollow Nursery Site:

How to organize, attractively present, and navigate through roughly 1000 different products (in multiple categories) proved a significant challenge when developing this New Hampshire company's web site.

View live Mason Hollow Nursery web site designThe resulting web site consists of a dynamic front end and a web accessible, owner-administered back end. The site was entirely custom built and much of it was hand-coded in ASP (Active Server Pages). View the Mason Hollow Nursery web site design.

The project began with little more than an existing Business Card (for inspiration) and a current inventory list (sample content). Original Business CardA spin-off of the business card graphic formed the basis for the graphic design of the web site's logo & header and has since served as corporate branding in several other aspects of the business.

Originally conceived back in '04-'05, it was realized that this web site would need to accommodate several potential design and delivery considerations revolving around providing user conveniences and/or options while navigating through their product inventories.

Mason Hollow's products, like most all eCommerce web sites, would be divided into several topical categories. However, despite such divisions, It was clear that the potential category sizes would still offer navigable difficulties in certain cases. Mason Hollow's Hosta category, for example, would always remain a sizable group likely containing in excess of 300-500 items at any given time. Traditionally, eCommerce sites handle the visual display of their products through a hierarchal arrangement (often by price or alphabetically arranged) and then simply display a certain qty per page while using a 'forward/back' set of functions to advance through the available product list. As any web shopper will know, this is fine for a page or two after which it quickly can become tedious and inefficient as users seldom work their way to the end of a large available recordset before either settling on a selection or worse, leaving the site out of frustration. View live Mason Hollow Nursery web site navigational design
In either case, many products existing in the latter portions of the list may not receive fair exposure or visibility resulting in lost or diminished sales for these items. Therefore, in situations of large category sizes, alternate navigation methods needed to be offered.

To address these concerns, it was decided to include on each product page a list of all available products (by name) in that given category. As it was decided that displaying a full textual list was visually obtrusive to the aesthetics of the page design and layout, it's presentation in the form of a drop-down list was opted for as an acceptable and workable compromise. Armed with this feature, visitors are not only offered an abbreviated descriptive per-page display of alphabetically arranged products, but they also are now allowed the option to , at any time, select an item from the entire textual list (alphabetically by name) and then jump directly to it's descriptive listing wherever it may reside within the primary recordset category. Additionally, once a user has jumped to a specific location, they are still allowed to navigate forward and back, traditionally, from whatever point they are at currently.

Content Management (CMS):

View of Mason Hollow Nursery Web Site Administration - product listings. Utilizing dynamic pages to pull stored content from a database is but one aspect of the design of a dynamic application. The public side of a dynamic web site is what we refer to as a 'front-end'; the alternate side, often more greatly involved from a design complication standpoint, is the "back-end", or database management side. This side of a web site must account for the storage and editing/alteration of the content data used by the system to generate its public pages. Collectively, these two complimentary "ends" form a single content management system (CMS) allowing their owners, without any real need to know anything of the inner workings of the Web or of web coding/html, to manage and maintain most of the daily aspects of their web sites' content or data.

View of Mason Hollow Nursery Web Site Administration - product being edited.Mason Hollow's back-end utilizes drop-down lists (above) to offer a selection of editing choices for existing products. Once an individual product is selected, a page offering a full compliment of editable product specific attributes is then displayed. Here the owner or their chosen managers may update, edit, or remove products at their convenience - any time of day or night, as long as Internet access is available.


Flash Animation:

Several simple Flash animations were incorporated to draw attention to certain product attributes. These embedded animated icons point to new releases as well as products that require extra light. While gif format files could also serve a similar function, Adobe Flash as utilized for its superior rendition and potentially smaller file sizes for this type of application.


Newsletter Application:

One of the more recent (May '08) additions to this site was the integration of a web-based ASP/MySQL Newsletter management application. Through this, the client is able to collect or import subscriber email addresses and related data, organize them into target-specific or all-encompasing mailing lists, and design and send out personalized newsletters. Additionally, administrators may view mailing statistics and create follow-up mailings.


Primary Site Design Points:

  • Provide for effective access, retrieval, and organization of a large volume of products.
  • Present the products in an attractive setting which merges products with existing corporate identity (packaging label and business name).
  • Enable a simple, comparatively low-cost, eCommerce system.
  • Provide a web-based back-end content management system (CMS) for working with site content and products.