Products Prototypes
Explorations related to product category and individual product pages.
A comparison product page, max of three products, similarities to product tiles and pages
but with more emphasis on comparable data points.
Exploration of what happens when the filter menu is opened at various screen sizes.
Usage selector and items to power lists.
Usage selector and items to power lists.
Wattage needs results and top 3 matches.
Results and filter options
A guide for picking a generator based on wattage needs.
Revised version based on feedback. Spaces out tiles at larger sizes and
accounts for some variation in content. Also includes "compare" action when
more than one products are selected. Tested only in Chrome.
A comparison product page, max of three products, with the ability to remove
products
Minor styling improvements to @aileenjeffries previous product comparison prototype
A design prototype for the parallel kit selector
Exploring adding educational videos to the HSB selector intro.
Exploring the first stage of the HSB selector workflow, where the customer
answers some simple questions to help us find them a generator.
Exploring the second stage of the HSB selector workflow, where the customer
is presented with generator options, and prompted to reach out to CPE.
Simple landing page for product manual search.
Adding an accessories section to the product page using existing product card
patterns.
Adding an accessories section to the product page using a similar pattern as
recent alternative product suggestion prototypes.
Variation on prototype A but using a horizontal scroll to conserve space.
Same as other prototype except the heading area has been lightened, and the
flag is relocated to the "where to buy" button (which is no longer yellow to
avoid ugly color combos).
Version of an alternative product suggestion that includes an informative
description.
Version of an alternative product suggestion that is smaller and more urgent
and alert-like. Design doesn't feel resolved quite yet.
A less intrusive version of the suggestion while still remaining high above
the fold most of the time.
In-progress prototype of a single product page. Uses placeholders for detail
and third-party content.
Product listing, fully responsive and reasonably polished but lacking
interactive elements.
Prototype of product grid based largely on experiments in element collage
exercise. Only tested in Chrome.
Revised version based on feedback. Spaces out tiles at larger sizes and
accounts for some variation in content. Also includes "compare" action when
more than one products are selected. Tested only in Chrome.