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.
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.
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.
The project required deciphering poorly documented PHP code written by the site's original developer in the late 1990's.
[Overview of the process]
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:
The first step was to map the entire site as a hierarchical text document.
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.
[Cover of proposal]
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.
Look & Feel
[Images of various websites and their comparable look within SQS]
Training & Maintenance