Technology: HTML5/CSS3, Ruby on Rails, customized Spree Commerce platform
Goals/Concept: The client had an extensive product catalog and variety of product categories, and their previous site did not have a data hierarchy or way to easily find products without knowing an exact product SKU. This project was to create and online product catalog and e-commerce platform with filterable product characteristics and simpler product category navigation in order to improve on this. Minimizing the number of steps to get to a product was the main goal; look and feel was requested to be updated but conservative overall.
Role: I wireframed, designed, and developed front-end layout and styling with minor Ruby edits for front-end needs. Marketing content unrelated to product info was created for display purposes, as well as a custom curated icon font. Project launched in roughly 11 months.
Homepage w/drop-down menu
Homepage with custom products menu dropdown
Product Catalog Category Selection
Product Catalog Product Listing
Product Catalog Product Listing w/filter
Product Catalog Product Detail View
Whiteboard - wireframe
-
Homepage w/drop-down menu
The challenge was to express their eight very specific product categories and explain them briefly to guide users to what category they might be looking for. -
Homepage with custom products menu dropdown
Client requested a menu where all subcategories could also be viewed, so a splashier menu was customized for a full view of their product line and minimization of drilling down to subcategories. -
Product Catalog Category Selection
A simplified view of their categorized product lines. -
Product Catalog Product Listing
Not all individual products had photos or a human-readable name so it was determined to provide a list view of products in a category. -
Product Catalog Product Listing w/filter
Once products were filtered, a user could add the item to their cart without clicking through to the product details. -
Product Catalog Product Detail View
Product specifications were put into a tabular view given the varying size of the content. -
Whiteboard - wireframe
An example of an early wireframe for the project homepage