Ultrachem Inc. became a client in 2012, when they hired me to build their next website. They are an international manufacturer and distributor of synthetic oil products. The website project required it be built with a full back-end that would be used by their in-house design team.

Requirements:
– Build a database of all products with separate fields for: ISO Grade, Viscosity, Index, Flash Point, Pour Point, and Specific Gravity.
– Organize and connect PDF sell-sheets to each product.
– Dynamically display all information and PDFs on their respective pages, organized by category.
– Each product has cross-referenced products from major oil manufacturers for which they could be substituted.
– Cross reference page needs to search and dynamically cross-reference substitutes, and display in tabular data.
– Include call-to-actions to directly connect users to their contact information, newsletter signups, and request forms.

I used WordPress as a CMS, as it met all of the requirements. Using Custom Post Types, Taxonomies and Categories, I was able to propagate all of the correct content to the respective areas, while maintaining one easy-to-use database.

This site was the largest back-end development undertaking I’ve done, and it was challenging to organize all of their products because of the numerous data points required by every product. Although WordPress was fully capable of meeting my needs, it was difficult to categorize every product, and propagate it’s information to the right place. Furthermore, the task of entering this data was massive. The cross reference form used AJAX technology, to search and load all of the content without reloading the page.

The Cross Reference Page was a major challenge, and was the most important as it was the most used page. As Ultrachem makes and sells oil substitutes, users need to be able to put in the product for which they require a substitute. This can be searched by brand name, base fluid, and ISO grade. Upon finding the equivalent Ultrachem oil, a user is given a link directly to that product where they can learn about it, and access PDF sell-sheets.

I learned that this was the most popular page, and was primarily accessed by users in-the-field on mobile devices and tablets. This information was key to understanding how this page was used, and allowed me to design the right interface. The problem was the tabular data that was difficult to use on a small screen. On a large screen, it was no problem, because the long table was fully visible. But on a mobile phone, the table was scrunched together, and scrolling across was confusing and difficult to see data across the whole table. I solved the problem with a unique design and development solution, using different CSS rules to display the tables differently on different devices. On a computer, it would display normally, but on a tablet or phone, the table rows would be blocked together and display vertically. All of the necessary information is displayed together. Although it looked a little different than the normal table, it was easily understood after I applied solid background colors to each table row.

It was very rewarding to build a much more complex site, within the framework with which I was comfortable. Successfully solving the most important project problem —displaying the tables on a phone — with a simple and elegant design and front-end development solution was the best part of this project because it met the clients’ need and was fulfilled quickly and easily. I just had to think about the problem and understand that the solution was within the problem itself. Small screens displayed the tables differently, which was the issue. So, I had to make small screens display the tables differently — but control how they displayed, and reorganize the visual information a little differently.