This past Spring, AM-TECH, a small business based out of Glen Rock, New Jersey, unveiled a new logo and a new website, both of which I designed. This post summarizes my development process and points out some of my favorite features.
When getting ready to build a website, I study the visual assets (logo, t-shirts, business cards, place of operations, etc…) already being used by an organization to promote itself. Materials like these help give me a sense of their existing brand, along with their color and style preferences. They help inform my design.
When I started this process with AM-TECH, it quickly became obvious that they needed more than a new website, because the visual assets, which would normally support my work, either did not exist or were to no one’s liking. So, the first thing I did was redesign the company’s logo. I later reused the logo’s font and color scheme when designing the website with the goal of building and reinforcing the company’s brand.
Early on, we decided to place the company’s products at the center of the visitor experience. There are many elements that reinforce this emphasis.
A Slider to Showcase Products
Eight products are highlighted in a slideshow located toward the top of the home page. They are regular blogs posts that have been checked off as belonging in the “Slider” category. I used jQuery Cycle2 plugin to make it.
While each product page has its own color scheme and uses distinctive photographs, all product pages contain similar types of information presented in a standardized format. The goal is to help a visitor quickly find what they are looking for.
Each product page contains a:
- product description,
- table of technical data,
- list of suitable applications,
- description of how the product is packaged,
- sample request form, and a
- Safety Data Sheet as a downloadable PDF file.
After the introductory product description, the other elements on product pages are presented one-at-a-time through the use of a tabs interface, which is built off of jQuery UI widgets.
Each product page contains a form where a visitor can request a sample. When a visitor submits their information, a copy is sent via email to a recipient at AM-TECH, and a copy of the information is saved and available from WordPress’ back-end.
The website is designed with wide screens in mind. But, it also responds and adjusts to various screen sizes.
Reaping rewards over a year later
Over a year after building this website, I received an email message out of the blue from one of the owners. It made me quite proud. The website has allowed customers to educate themselves on the company’s product line, which has had a positive impact on sales.
Just wanted to thank you again for the site. It’s awesome and has been of service to our staff as well as our customers. Nobody calls looking for an SDS anymore. Sample requests contain info that let us know customers are reading content and people are calling in unsolicited based on info they see on site!!!