Palagems

The project began as a graphic redesign of the Palagems website. The goals were to make the site visually compelling and usable on any device. When completed, the redesign would applied to the other Pala International businesses.

My original role was limited to organizing over ten thousand content pages and redesigning the user interface. Branding, graphic design and market messaging were to be handled by an independent marketing professional. The ecommerce back-end were to be converted into a proprietary, web-based system built and hosted by a firm specializing in providing websites for art gallery owners.

Over time these roles and assumptions were overturned. What began as short-term user experience project evolved into a long, complex project that required equal parts design, business consulting, and web coding while acquiring the key concepts of the gem and mineral business.

Updating the existing code base required learning HTML, CSS, PHP, and MySQL. Restructuring the in-house database system powering Pala International's inventory and customer system required refreshing my understanding of FileMaker. In additional I had to learn the basics of how gems and minerals are classified by vendors and customers.

Home Page

Search Form

New search dialog is simple, clear and inviting.  If a registered gem trade member wishes to see wholesale pricing, the UI clearly indicates that the user must log in.Click image to magnify. — **New search dialog** is simple, clear and inviting. If a registered gem trade member wishes to see wholesale pricing, the UI clearly indicates that the user must log in.
*Click image to magnify.*

Search Results

Search Detail

Technical Overview

Dual-hosted site

The main landing pages, articles, newsletters, and featured items are hosted on Squarespace using their Adirondack template.

The ecommerce functions are hosted by Aplus.net powered by HTML, CSS, PHP, and MySQL code.

Incorporating key snippets of Squarespace code into the header of the ecommerce pages gave them the same responsive user interface as the Squarespace pages.

Squarespace customization

The Squarespace pages are customized with over 1,500 lines of site-wide CSS that is duplicated on the Aplus side. Some pages such as the Home page and all newsletter pages have page-specific custom CSS.

Learning Squarespace's meta design principles for their templates was key to understanding how to effectively customize the Palagems site. The first step was to convert the Adirondack template's three CSS files into a readable format by adding line breaks and hand editing the results for readability. The primary CSS file has over 35,000 lines.

Aplus customization

The project required deciphering poorly documented PHP code written by the site's original developer in the late 1990's.

Design Process

[Overview of the process]

Content Mapping

The first step was to map the site's content as a hierarchical text document and a visual map. This preliminary analysis confirmed that the dense main user interface had duplications and links that led to unrelated content. Confusingly, there was a mini website buried inside that sold mining tools from a different vendor.

Here's the top of the home page followed by a screen capture of the footer:

Text Map

The first step was to map the entire site as a hierarchical text document.

Visual Map

In addition to the text contact map, a schematic of the entire site was developed by pasting screen captures onto a white board, labeling the purpose of each section, and mapping the links between sections.

*Click image to open in a separate window*

Proposal

xxx

[Cover of proposal]

Experience Map

Using the conceptual redesign of the RailEurope website as a model, we created a map of the user experience from viewing the opening splash page through to purchase. Trade Members are permitted to see wholesale pricing after logging in through the Trade Page.

Circles with thick borders are menu items. The blue items are hosted by Squarespace. The yellow items were eventually hosted by Aplus.net.