repurposedMATERIALS originally used a WordPress.org platform. This page design was an update to their main category page for their WordPress Platform.
Below is the updated Inventory page I created I drafted, designed,and coded by hand. The top includes an introduction to the customers. repurposedMATERIALS customer base is extremely unique and frequently request walk thru's on the phone. In an effort to reduce these calls, I included notes, image direction, and title text to display on hover to help guide the users.
Here is an example of hover attributes added to help indicate to users what is a link and where that link will take them.
Here is an image of an inactive category image.
Image with Image Active (opacity adjusted to indcate image is also a link to physical product page)
Product Category with Title Active on hover
Product Category with Click Here for Pricing button active. The "Click Here for Prices" was added to help further guide customers to click to the next page for further information about the product.
Below is an example of the business' previous product page design. They did not have a designer on staff or employees who were familiar with html or WordPress.
Below is the second product page design I drafted, designed, and wrote the CSS and HTML by hand. It is a lengthy page developed to suite the requests of repurposedMATERIALS upper management. Each page is custom tailored for the product dependent on what product information is available and product photography. To offset this length, I included anchored links to each section of the page in an image based submenu.
Product Page Image Based Submenu. Hover attributes are heavily utilized on all pages to help users understand what is and is not a link.
"repurposes" submenu botton active. "repurposes" are ideas on how to reuse product in a creative way that largely deviates from the products first life use
Item FAQ submenu button active.
Item Info submenu button active
Contact Info submenu button active. This button takes you to a separate web page with our contact information including locations, phone numbers, and warehouse addresses.
Hours submenu button active. This Button also takes you to a separate page where we have our store hours, phone numbers, and addresses so customers know when and how they can contact us for more information or to order items not available for "Buy It Now" buttons through Paypal.
At the end of the Location Indicator bar, I included an information image. This is an archaic method, but it is another outlet to give another hand to customers who may be confused.
Below are the different appearances of the Location Bar. This bar is used to indicate which physical location the product is available to purchase from. The location is also re-iterated above product stats.
Location bar with all locations active.
Location bar with only one location active