The request was submitted using Panduit's DMS System. In this system, marketers supply developers with content and an ideal look and feel for the web pages and landing pages. Boyle submitted a Word document with a table of products from Panduit's online catalog.
Upon review of the Word document, Yasha immediately began UX Research to discover the best method for presenting the material. Using the 10-step process from the Interaction Design Foundation, she came up with the idea to use an e-commerce approach--listing each product and then if more information is desired, it appears by clicking on a "more info" button.
Using inspiration from CodyHouse, Yasha designed a product page that would list all products initially with a sub-navigation bar that allowed the user to see that there was more than one section on the page. By selecting one or the other, the user can see the products that they are interested in, as the non-selected category fades away. When a user clicks on a product, there is a one-second timeout, the modal for that product appears using minimal animation, and then the user only sees that product's information with a link to the actual product in the online product catalog on Panduit's website.
Adding on to marketers content, Yasha used the content that displayed on the product's page to give a meaningful description about each product. Any pertinent information was provided in the modal for the user to peruse.
Adhering to Brand
Yasha stayed true to Panduit's brand, using colors that had been already implemented throughout the site. Panduit's new color palette also takes a front seat in this project, showing off the new gold tone.
Social media was a key component to this campaign, providing posts and tweets on Facebook and Twitter, respectively. An email campaign was also created and distributed as well. A great tutorial on how to use the product was also featured on YouTube.
Using a mobile-first approach, the site was built using Twitter Bootstrap so that it would be viewable on smartphones, tablets, and multiple desktop screens. The site was optimized for IE9, IE10, IE11, Firefox, Safari, and Chrome, with notifications appearing if the user was using IE8 or IE7. To handle most of the animations, jQuery was used, but we took advantage of CSS3 to ease the weight on the pages. Plugins were also used to help with some of the animation.