Contact Us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right. 

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Palagems

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

Previous home page  had complex top, side, and bottom menus with one long scrolling strip in the middle column.   Click image to magnify.

Previous home page had complex top, side, and bottom menus with one long scrolling strip in the middle column.

Click image to magnify.

New home page  is simple, clear and inviting.  Main grid of images with roll-over text links to key articles in the latest newsletter. Sections below include news and a featured video.   Click image to magnify.

New home page is simple, clear and inviting.  Main grid of images with roll-over text links to key articles in the latest newsletter. Sections below include news and a featured video.

Click image to magnify.

 

Search Form

Previous search dialog  had two search forms plus lots of extra text.  Since the site was non-responsive, these search dialogs were difficult to use on mobile devices.   Click image to magnify.

Previous search dialog had two search forms plus lots of extra text.  Since the site was non-responsive, these search dialogs were difficult to use on mobile devices.

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.

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

Previous search results  xxx   Click image to magnify.

Previous search results xxx

Click image to magnify.

New search results  xxx   Click image to magnify

New search results xxx

Click image to magnify

 

Search Detail

Previous search detail  xxx   Click image to magnify.

Previous search detail xxx

Click image to magnify.

New search detail  xxx   Click image to magnify.

New search detail xxx

Click image to magnify.


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:

Palagems previous home page.jpg
Palagems previous footer menu.jpg

Text Map

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

View Text Map in  PDF format     Download   Text Map in  Word DOCX format

View Text Map in PDF format

Download Text Map in Word DOCX format

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

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.

Look & Feel

xxx

[Images of various websites and their comparable look within SQS]

Database conversion

xxx

Alpha

xxx

[First draft

Beta

xxx

Testing

xxx

Launch

xxx

Training & Maintenance

xxx