Technology: HTML5/SCSS, Zurb Foundation, tablesaw.js, Angular.js, Ruby on Rails Custom CMS
Goals/Concept: This project was to make a responsive site and update the current client site to a fresher look. The extensive site enveloped a modal ‘product selector’ into the main product list view (used to filter by very technical specifications in order for engineers to get a CSV or Excel list of the specifications on a group of products). Other product related updates were to implement larger product imagery, necessitating alternate layouts for horizontal versus vertically oriented products due to the extremely narrow ratio of the vertical product images. Product datasheets were also made to be dynamically generated as opposed to a hard PDF, which required its own styling and layout. Another part of the project was to create a user portal to accommodate all of a user’s information (channel partners) from lead submission and a new support ticket feature and the area also had to be able to support future expansion. Site navigation and outline was overhauled as well.
Role: I was design lead and wireframed, designed, and developed front-end layouts and styling according to SMACSS principles and utilizing the Zurb Foundation framework. I also curated a custom icon font that is used throughout the site. Project launched in roughly 8 months.
Homepage
Products - Categories
Products - Grid View
Products - List View
Product Details - Vertical (Closed)
Product Details - Vertical (Open)
Product Details - Horizontal
Support - Technical Library
User Dashboard
Wireframe - Home
Wireframe - Product Families
Wireframe - Products - Grid View
Wireframe - Products - List View
Wireframe - Product Details v.A
Wireframe - Product Details v.B
Wireframe - Standard Page - Mobile
Wireframe - User Dashboard
-
Homepage
Direct wayfinding to product categories marketing wants to promote, and to the areas that customers use the most in addition to other marketing items. -
Products - Categories
Click through to view an individual category, also marketing/brochure material for an introduction to PDUs. -
Products - Grid View
A more graphical representation of the most important product features to make the view more easily scannable for less technical or browsing users. -
Products - List View
Uses the tablesaw library to handle the volume of columns to display. Columns can be removed, sorted by, and a 'stacked' view is displayed for mobile devices. -
Product Details - Vertical (Closed)
Programmatic layout for incredibly tall products, and use of drawers and accordions to accommodate large amounts of data for multiple product SKUs in a family. -
Product Details - Vertical (Open)
Responsive product images load varying sizes depending on screen size. -
Product Details - Horizontal
Lazy loading images in carousel, and change of layout for CTA buttons and product information accordion below. -
Support - Technical Library
Simple interface to find relevant documents. -
User Dashboard
A portal for distributors to view their submitted leads and conversions, and submit support tickets in order to lower volume of calls or time delays for international customers. -
Wireframe - Home
This is where the home page started/evolved from. -
Wireframe - Product Families
Layout for the main product families to help users narrow their product search. -
Wireframe - Products - Grid View
A version of how the grid view might function, only showing select pieces of product data. -
Wireframe - Products - List View
A version of the list view where product SKUs could be grouped under their parent 'families' to scan which items are similar. -
Wireframe - Product Details v.A
A preliminary version of the product details page for an individual SKU -
Wireframe - Product Details v.B
Expanded version of product details that evolved into 'family' details which would contain the family's general details and individual SKUs and their specific details which might differ from each other. -
Wireframe - Standard Page - Mobile
A general mobile layout to plan the order of elements and their importance. -
Wireframe - User Dashboard
A version starting with making the three activities a user might need in their dashboard and giving them prominence.