Client
American Polarizers
Year

2020

Scope:

  • Product Finder

Role in team:
  • UI/UX Designer
Duration:
  • 1 Month
Tools:
  • Photoshop
  • Illustrator
  • XD
  • Axure

OVERVIEW

The API Product Finder is to help a user browse and view all API products in a centrally-located area of the website. To do this, I created a page that houses information on all products on the API website, displays this information in a table format, and offers filtering, searching, and sorting capabilities so the user can find the product(s) they are interested in.

All product information will be linked to the corresponding product page so the user can access the product page quickly. If the product is listed as a Best Seller, the Best Seller designation flag will display on left side of the product’s row.

SYSTEM COMPONENTS

  • Find Your Container page;
  • Dropdown menus for filter options: Product Application, Container Type, Compartments,
  • Text field areas for Dimensions (length, width, height) and Capacity;
  • Product list view / Results view;
  • Product Detail page with Container Details, Lids, and Inserts tabs;
  • Let’s Talk lead generation form.

STRATEGY

Within the Product Finder, there will be several features which will guide the user to find the best product match. These features include:

PRODUCT FINDER FEATURES

  • Product Name (ex. APNCP37-0721A-RH)
  • Product Type (ex. Acrylic Circular Polarizer)
  • Availability (ex. In-Stock Panels)
  • Transmission – single pass (ex. 22%)
  • Transmission – double pass (ex. 25.3%)
  • Transmission – crossed (ex. 0.08%)
  • Thickness (ex. 0.72” +/-.015”)
  • Handedness (ex. left)
  • Retardance (ex. OPD 140nm +/- 10nm (Centered at 560nm))
  • Color (ex. gray)
  • Substrate (ex. Cellulose Triacetate)
  • Finish (ex. Smooth)
  • Spec Sheet (PDF)
  • Price (ex. $40.00)
  • Sort Column – the ability to sort data in each column in alphabetical order (A-Z, Z-A), numerically (high-low, low-high)
  • Search All Products – ability to search data in columns using text field, only data which includes the search keyword(s) will display
  • Filter By – the ability to filter the table by any attribute using attribute values found within all products in the table; includes the ability to clear all filters; filtered values are displayed above table and can be removed using the delete function, which removes the corresponding filter from the table data

WIREFRAME

Following the strategy phase, client goals and vision are rapidly ideated to provide a clear overview of the interface, layout, information architecture, user flow and functionality.

Colors

API Purple

#483C94

API Light Blue

#0096FF

API Violet

#9A00CF

API Orange

#FF9960

API Red

#CE0000

API Dark Blue

#00009C

Typography

Rubik

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Rubik

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

DESIGN

The design process communicates brand identity, defines visual hierarchy, and provides an opportunity to get stakeholder buy-in prior to development phase.

VISIT SITE