Raytec needed a website for customers to browse their large inventory of roofing and ag products. I was the developer on this project for RedX. The designer delivered a complete PSD of home page and one interior page, and I built a custom theme on WordPress Genesis and designed the bulk of the interior pages.
For Raytec, an online presence was a new marketing field, unfamiliar and untested. I enjoyed coming alongside Barry and Glen as they explored the possibilities for their website. And despite not knowing web technology, Barry and Glen needed solutions that pushed my development skills to a whole new level.
The most complex aspect of this website was the online catalog. Raytec needed product listings, not individual products for sale, with the option to add that in the future.
Here are just a few aspects I had to design and build that went well beyond the complex home page.
Sub-category visual hierarchy
There were multiple sub-categories, which needed visual hierarchy for 3 or 4 levels deep. I designed the area #3 and #4 levels during development, since they were not part of the design process.
Sub-category information
Additional information was placed on each woocommerce product-category page. Each category needed room and layout for a large photo, pre-notes, and footnotes. I designed this area, as well as designed and developed the mobile-responsive behavior.
Major category information
Some categories had vastly different needs. These major categories had product highlights and informational sections, including brochures and flyers to download, colors, and the history or about the products.
Highlights section – The client provided flyers, photos and text for the highlights. I rearranged and repurposed, designing custom graphics for the website. None of this layout was designed during the design process, and the yellow background of the website was so different from the white background of the flyers, so I had to design the layout, redesign the graphics, and build this section during the development phase.
Product listings
No product pages were to be displayed on the website. Only listings (categories). Each category was to display its sub-categories, and the lowest category was to display a simplified listing of all products within in. Each listing included SKU, product name, product notes, but no link to the product.
Quick Links
Because of the intricate relationship of products, categories, and information, a contextual side menu, or a clickable TOC, was needed to the left hand side of each product category page. Some links were anchor links to products further down on the same page, while other links went to completely separate pages or product-categories.
At first, I found it difficult to design anything on this website, because of the color choices: a yellow background, crayon-box green, and black. However, I was committed to producing an aesthetically pleasing design without revisiting what was already approved after months of back and forth (I was not part of the design phase). The final result was that I introduced muted greens to complement the yellow. (I did lower the intensity of the yellow background slightly by degrees throughout the project, which went unnoticed and helped the design tremendously.)
The quick links I found especially difficult to design. However, I spent time looking at many other menu designs and styles, and used photoshop to find a green color that blended well on top of the yellow.
Search Results
Because the individual product pages were not used presently (but available for future ecommerce capability), we needed the search results page to show product listings only, and no product pages individually. With Relevanssi, I set up the search results to link to the listings not the products.
Oh, and…
Because of in-house computers, the listings needed to display well with very large text on small-resolution screens in Internet Explorer.
Gulp.
Th-tha-that’s a tall order. Just saying. 🙂
Building the product listings was, shall we say, a unique experience for me.
Build on WooCommerce, the catalog of products under each division of Raytec is designed for best usability by its own target market. If you know anything about WooCommerce product categories, they become complicated very quickly beyond the basic options.
Like I said, it pushed my development skills to a whole new level. But I was very blessed to work with some amazing people in the process.
