Pala 0
Pala International
Project Overview
Scope of Work
Design Results
Technical Overview
Project Phases
Click link to view section
Project Overview
The privately held firm comprises three separate businesses:
Scope of Work
The project began as a graphic redesign of the Palagems website. The goals were to make the site visually compelling, simplify finding information, and make the site usable on any device. When completed, the redesign would be applied to the other Pala International businesses.
Our original role was limited to simplifying the user interface and organizing over ten thousand content pages. Branding, graphic design and market messaging were to be handled by an independent branding professional. The ecommerce back-end was to be converted into a proprietary, web-based system built a firm specializing in designing and hosting websites for art gallery owners.
Click link to read the Project Proposal in a new window.
Expanded Scope of Work
These assumptions were overturned as the project progressed. The branding professional would not adapt his design process and fee structure to meet the needs of a cash-based, family-owned business. The ecommerce back-end could not be customized for gem and mineral sales at a cost that was acceptable to the client and the web hosting firm. The inventory and customer systems of the three separate Pala businesses were intertwined within an out-of-date FileMaker database running on an ancient Mac OS tower computer on the verge of permanent failure. All other business processes were run on paper.
What began as short-term user experience design project evolved into a complex top-to-bottom redesign of the entire website the supporting on-line and in-house database systems. Achieving success required equal parts design, business consulting, and web coding plus learning the essentials of the gemstone and mineral specimen businesses.
Redesign the User Experience
- Map the existing site's content as a hierarchical Text Map.
- Map the entire site's content as as hierarchical text document and also as a Visual Map.
- Create a User Experience Map that shows how to navigate from the splash screen through to payment.
Branding & Graphic Design
- Research color schemes
- Design a new logo
- Write a new tagline
- Design the user interface
Organize the Content
Articles
- Organize the existing articles into sections within the Library.
- Create a navigation system for the Library pages.
- Build custom CSS for articles that mimics the existing look and enables the articles to be viewed on mobile devices.
- Import the existing articles into Squarespace.
- Convert the Buying Guides into Squarespace format.
- Convert the most important articles into Squarespace format.
Newsletters
- Separate the archival newsletters into separate publications.
- Create custom CSS for archival newsletters.
- Import the archival newsletters into Squarespace.
- Create custom CSS for new newsletters.
- Build navigation system for the newsletters.
Update the eCommerce System
- Normalize the nomenclature used to search for gemstones.
- Create the technical specifications for the web firm's proprietary database.
- Convert the in-house FileMaker database.
- Redesign the gemstone search interface.
Click links to read more detail about that phase.
Design Results
Splash Page
Previous splash page showed a random splash image when the page loaded. Clicking the image opened the home page of the site.
Click HERE to open the previous splash page. Refresh your browser to change the image.
New splash page rotates among a set sequence of images. The text links open key pages on the site.
Click HERE to open the new splash page.
Home Page
Search form
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 and MySQL code written by the site's original developer in the late 1990's.
Project Phases
1) Redesign the User Experience
2) Branding & Graphic Design
3) Organize the Content
4) Update the eCommerce System
Click links to read more detail about that phase