Sarah Moyer

WordPress Development for Web Agencies

  • Home
  • Work with Me
    • for Agencies
    • for Designers
    • for Business Owners
    • FAQs
    • Website Care
  • Portfolio
  • Blog
  • Contact

Raytec

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.

RAY-Sealants-Page
Product Listings, with 2-level categories

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.

RAY-search-page

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.

Was this post helpful?

See My Work Content Genesis PSD to WordPress WordPress Development

Raytec LLC


Website Redesign

My Role: Developer

Collaborated with

  • Project manager
  • Client team

Responsible for

  • Developing custom Genesis theme on WordPress
  • Building custom gallery on home page, with slider for last pic
  • Designing and implementing several custom category page layouts in WooCommerce
  • Designing and implementing information architecture for product listings
  • Building complex, custom TOC product categories
  • Designing graphics/ads for sidebar
  • Implementing product photo display, including graphics with text and pop-up solution
  • Search results for categories, not products

Not responsible for

  • Brand design and colors
  • PSD home page design
  • PSD basic interior page design
  • Product photography

Tools used

WordPressGenesis FrameworkAdvanced Custom FieldsGravity FormsWooCommerceHTML 5CSS 3JavascriptPHP on WordPress

View Current Site

Recommended Resources

Copyright © 2025 by Sarah Moyer · Privacy Policy