Laddawn.com : Design Spec

• New Information Architecture

• Mockups in progress in Invision.

Key design/UI concepts

Unless otherwise stated, all key concepts are illustrated in Invision.

Clicking on Shop exposes new split mega menu - top level categories (TLCs) vertical on left, defaulted to Poly Bags in full view; subcategories within mega panel to right of TLC column change dynamically on hover over TLC.

All parents are clickable (including TLCs) - clicking brings you to landing panel containing product tile for each child category. 

You reach Builder/Finder upon selection of an "end node" from a mega menu link, or a tile from a parent landing panel.

We have identified 8 distinct builder/finder layouts.flows:

1. Stock and custom, no sub-types; reference N total stock offerings - for example,  layflat tubing (illustrated), regular layflat bags, etc.
2. Stock and custom one tier of sub-type; reference N total stock offerings - for example, pre-opened bags (not yet illustrated)
3. Stock and custom two tiers of sub-type; reference N total stock offerings - for example, wicketed and lip & tape bags.
4. Other tile pages:
   1. Parent category w/ sub-cats in mega menu - e.g., "Poly Bags" TLC, or "Healthcare" from mega menu (both illustrated).
   2. Stock only, with one or more sub-types not listed in mega menu; references N total stock offerings- for example, stand up pouches - (not yet illustrated). Clicking tile generates results automatically, no Find button.
5. Stock only - returns a static builder, results automatically shown upon mega menu category selection, no Find button reference N total stock offerings - for example, biohazard can liners (illustrated).
6. Custom only, no sub-types; no references to stock or catalog listings (e.g., gusseted tubing)
7. Custom only; one tier of sub-types; no references to stock or catalog listings (e.g., Clean Room Class 100 poly bags) - note we don't currently have any categories like this with two or more tiers of sub-type; if we do, they'd follow layout 3 above, minus references to stock.
8. T-Shirt Bags - only one size, selection from mega menu places you immediately in print designer (not yet illustrated).

We have identified 3 types of sub-type:

• Construction/feature - e.g., layflat, bottom gusset; permanent, resealable tape; etc.
• Film color - e.g. "clear front, white back"
• Material - e.g., polypropylene, postal approved, etc.

We recognize that film color and material are Level 3 menus. However, for certain categories, the film color or material is an intrinsic feature of the product. For that reason, we chose to call them out in our current nested menus, versus hiding them in Level 3 menus. When not called out in the new mega menu, they need to be called out in the new builder/finder.  Incompatible combinations - for example, lip & tape, choose permanent, then postal approved, then change from permanent to resealable - invokes current "please make a choice" logic/messaging (illustrated).

Once in builder/finder:

• Bread crumb indicates path taken and can be used to backtrack.
• Illustrations - photo of products, carousel if applicable; brief blurb describing key characteristics of product. Reference number of stock sizes if applicable.
• If there are sub-types - e.g., Pre-Opened - Clear | Clear Front, White Back or Ice Bags - Layflat | Gusseted - we default to one. (With stylized radio buttons, function as conventional radio buttons - illustrated, but not necessarily showing this functionality.)  Cannot do a Find on multiple sub-types; must choose one or another.
• Dimension fields (if applicable)
  • Only show relevant dimension fields; we've added fields for lip size and bottom gusset to applicable categories.
  • Dimension fields show ranges as captions. They adjust dynamically if changes to other controls affect them. (For example, if a depth entry affects allowed width range.)
  • For applicable stock categories.... first click into dimension field shows an inline message explaining that you can click Find with partial dimensions or no dimensions and get results. (This had been illustrated in prior mockups; needs to be added back to the current version).
• Level 3
  • Headline "Product Details".
  • Tabbed menus shown vertically on right, expand leftward into container, covering builder/finder controls - bread crumb extends to include builder/finder selections (dimensions, etc.)
  • Only relevant menus are shown. For example, if printing is not available, do not show a printing tab.
  • However, DO show static (non-editable) menus if they contain relevant product details.
  • For categories with additional customization options - our only example currently is Wicketed Bags - we insert an additional Level 3 menu at the top, above Materials & Additives.(Illustrated.)
  • TBD: We insert a HACCP tab when applicable (illustrated), or bury it further in Materials & Additives (not illustrated).