Chapter 5:
Faceted Navigation Design
Introduction
In this chapter, I audited my raw Slow‐Fashion attribute data, translated controlled vocabularies into a faceted-wireframe and flow, then prototyped a taxonomy-driven filter panel—complete with live counts, AND/OR logic, popular badges, and zero-results handling. This work bridges metadata design and shopper UX, ensuring scalable, intuitive filtering across any catalog size.
1. Slow Fashion Catalog Facet Audit
Objective
Identify and normalize the key product attributes from the raw export into six controlled facets—Vendor, Product Type, Price, Color, Letter Size, Material—and model them in Protégé for consistent UI and governance.
Approach
Reviewed the raw product-attribute table to pick out filter-worthy columns.
Determined which columns map to facets and cleaned up variant terms.
Compiled controlled vocabulary lists.
Modeled each facet Class and its approved values (Individuals) in Protégé.
| Title | Vendor | Product Type | Tags | Price | Color | Letter Size | Material |
|---|---|---|---|---|---|---|---|
| Organic Cotton T-Shirt | People Tree | Top | sustainable, organic, fairtrade | 48.00 | White | M | Organic Cotton |
| Recycled Denim Jeans | Patagonia | Bottom | recycled, durable | 120.00 | Blue | M | Recycled Cotton |
| Eco Wrap Midi Dress | Reformation | Dress | eco-friendly, vegan | 178.00 | Olive | S | Tencel |
| Linen Utility Jacket | Eileen Fisher | Outerwear | biodegradable, natural fibers | 298.00 | Beige | L | Linen |
| Vegan Leather Sandals | Matt & Nat | Footwear | vegan, cruelty-free | 85.00 | Black | L | Vegan Leather |
| Stella Organic Silk Blouse | Stella McCartney | Top | organic, luxury, silk | 345.00 | Pink | XS | Organic Silk |
Note: Reviewed each column for filter relevance; “Tags” proved too free-form.
| Column Name | Facet? | Facet Type | UI Control | Notes / Cleanup |
|---|---|---|---|---|
| Title | N | — | — | Product name—too granular to filter |
| Vendor | Y | Multi-select | Checkboxes | Six distinct brands; capitalization already consistent |
| Product Type | Y | Multi-select | Checkboxes | Pluralized (Tops, Bottoms, Dresses, Outerwear, Footwear) |
| Price | Y | Multi-select | Checkboxes | Buckets: <$100, $100–$200, $200–$300, >$300 |
| Color | Y | Multi-select | Swatches | Normalized (“Denim Blue”→“Blue”, “Sand”→“Beige”) |
| Letter Size | Y | Multi-select | Checkboxes | XS, S, M, L, XL (numeric sizes mapped to letters) |
| Material | Y | Multi-select | Checkboxes | Values: Organic Cotton, Linen, Tencel, Silk, Recycled Cotton, Recycled Polyester, Vegan Leather |
Note: Streamlined variants and enforced singular facet assignments.
| Vendor | Product Type | Price Buckets | Color | Letter Size | Material |
|---|---|---|---|---|---|
| Eileen Fisher | Bottoms | < $100 | Beige | XS | Linen |
| Matt & Nat | Dresses | $100 – $200 | Black | S | Organic Cotton |
| Patagonia | Footwear | $200 – $300 | Blue | M | Recycled Cotton |
| People Tree | Outerwear | > $300 | Olive | L | Recycled Polyester |
| Reformation | Tops | — | Pink | XL | Silk |
| Stella McCartney | — | — | White | — | Tencel |
| — | — | — | — | — | Vegan Leather |
Note: Finalized six facet lists for taxonomy import.
Protégé Proof
Shows external/shoppers’ facet names (“Color,” “Size,” “Material,” etc.) as they’ll appear in the UI.
Shows the underlying ontology identifiers (“FacetValue”, “ColorValue”, “MaterialValue”, etc.) for developers and internal users
Protégé ‘Individuals by Class’ view for “ColorValue”, showing six instances with shopper-friendly rdfs:label annotations.
2. Faceted Navigation Wireframe & User Flow
Objective
Turn controlled-vocabulary facets into a clear, scalable sidebar UI that prioritizes key filters up-front, leverages progressive disclosure for overflow, and guides shoppers through the full journey from landing to filter reset.
Approach
Wireframing
Built a full-page mockup of the Slow Fashion Catalog, placing facets in priority order.
Annotation
Called out placement rules (“More…”, fixed-height panels), multi-select logic, and state-aware controls.
Flow Mapping
Outlined shopper steps—from search, through facet application, progressive disclosure, and reset.
Faceted Navigation low-fidelity wireframe.
| Facet | Placement & Behavior |
|---|---|
| Color | Top of sidebar; show up to four swatches + counts (White, Black, Blue, Olive); “More…” expands scrollable list. |
| Size | Below Color; display XS–XL with live counts; fixed height, no inner scroll; prioritizes common sizes. |
| Material | Third; show Cotton, Linen, Tencel; “More…” reveals additional fibers inline or modal. |
| Price | Fourth; checkbox ranges (<$100, $100–200, $200–300); collapsible to save space. |
| Product Type | Fifth; static checklist (Tops, Bottoms, Dresses, Outerwear); no “More…” needed. |
| Progressive Disclosure | Each section uses either “More…” or a scroll container to prevent overly long sidebar. |
| Clear All | Hidden on load; appears once any filter or search is active to reset all selections. |
| Search Bar | Above grid; global “Search products…” input clears active facets and filters by text across taxonomy fields. |
Key Insights
Taxonomy-First Ordering
Core facets (Color, Size, Material) placed above opportunistic ones (Price, Type) to match shopper heuristics.
Progressive Disclosure
Combines facet “More…” expand links to keep the sidebar manageable while exposing full vocabulary on demand.
Facet Logic
OR within each facet (multi-select), AND across facets—ensures precise narrowing.
State-Aware UI
“Clear All” and search input only surface when needed, minimizing initial complexity.
3. Taxonomy-Driven Facet Navigation Prototype
Objective
Demonstrate how a controlled vocabulary taxonomy drives a scalable, flexible filter panel—surfacing the most relevant facets first, updating live counts, and avoiding zero-hit dead ends.
Approach
I translated my six facet classes (Vendor, Product Type, Price, Color, Size, Material) into a low-fidelity desktop wireframe, then annotated key interactions and behaviors. The wireframes show before/after states, live count ordering, OR/AND logic, and fallback patterns.
Before & After Wireframes
“Before” Wireframe
“After” wireframe.
Ordering by Popularity
I ordered facet values by live item counts—ensuring the highest-impact filters appear first. Popularity first minimizes empty searches; alphabetical only as a fallback when counts tie.
| Facet | Top Values (Count) |
|---|---|
| Brands | People Tree (72), Reformation (70), Eileen Fisher (21), Patagonia (8) |
| Product Type | Tops (60), Dresses (50), Bottoms (40), Outerwear (10) |
| Color | White (56), Black (48), Blue (36), Olive (24) |
Annotated Wireframes
Annotated Callouts
Clear All Filters resets every selection in one click.
Breadcrumbs “Home / Women” shows current catalog path.
“Showing 24 items” immediate feedback on result size.
Sort by dropdown (Newest, Price ↑/↓).
Search within results refines without clearing facets.
Live counts update as you hover or select.
“Popular” badges highlight top-clicked values.
OR vs. AND logic OR within facets, AND across facets.
Deep-link URLs append
?facet=valuefor sharing.Pagination bar “Page 2 of 3” navigates large sets.
Zero-Results Page Behavior
Showing 0 items clearly indicates no matches.
Disabled sort & search prevent pointless interactions.
No results message “No results found. Try modifying filters.”
Recommended products re-engage shoppers with “You may be interested in” cards.
Disabled facet options greyed-out values can’t be selected.
Impact
This prototype embodies a taxonomy-first approach, guiding shoppers through thousands of SKUs with strategically prioritized filters, providing instant feedback via live count badges and clear OR/AND logic, and eliminating dead ends by surfacing curated recommendations when no results match. It also establishes a precise engineering contract, ensuring every UI label maps directly to a controlled taxonomy term.
4. Synthesis
Across these three case studies, I took raw product attributes, forged them into a rigorous facet taxonomy, and then applied that taxonomy to both wireframes and interactive prototypes—surfacing the most critical filters up-front, managing overflow with progressive disclosure, and validating real-time AND/OR logic and zero-hit fallbacks. By modeling facets in Protégé, documenting placement and behavior in Figma, and annotating “before”/“after” prototypes with live counts and “Popular” badges, I closed the gap between abstract vocabularies and tangible UI patterns. This end-to-end workflow ensures that every filter label, order, and interaction is grounded in controlled vocabulary governance and tested against shopper mental models. As a result, shoppers can find relevant products faster with fewer clicks, reducing frustration and cart abandonment, while the clear taxonomy contract streamlines development and future updates.
5. Next Steps
I define machine-readable taxonomy contracts—designing JSON Schemas for products, categories, and facets, plus bundling sample data files to power API integrations and enforce vocabulary governance.