SpecSelect
The Problem
The deeply nested category structure made it hard for users to quickly access material-level information. Combined with limited filtering options and no clear selection or comparison flow, the experience often felt overwhelming and unintuitive—especially when handling large volumes of data.
Context
SpecSelect is a web platform built for architects and designers to discover, analyze, and compare sustainable building materials. With thousands of material options across multiple categories, the tool is meant to support both exploration and informed decision-making in a streamlined way.
Client
Tools
4 weeks
Timeline
Role
As the Product Designer on this project, I collaborated with my teammate to ideate and structure the overall solution. While the strategy and UX direction were a joint effort, I took full ownership of the UI design, translating the solution into a clean, intuitive interface that aligned with user needs and business goals.
Design Process
Aligned with the client on pain points in the material discovery and comparison experience.
Studied platforms like Sustainable Minds to understand user needs and material classification.
Sketched out improved flows for better navigation and a focused comparison journey
Designed clean, intuitive interfaces to make exploring and comparing materials effortless.
Goals for the Redesign
- Simplify the browsing experience across deep material categories.
- Create intuitive filtering and navigation for quick access to desired materials.
- Enable an easy-to-use, side-by-side comparison feature.
- Make material discovery engaging and functional through a well-structured UI.
The Solution
Homepage with Anchored Navigation
Introduced a left-aligned main category sidebar acting as both filter and navigation, helping users anchor themselves within the platform.
Search + Advanced Filters
Placed a global search bar and advanced filter options at the top, allowing users to quickly narrow down results based on keywords, sustainability ratings, certifications, and more.
Progressive Disclosure (Accordion Structure)
Only selected categories expand into subcategories using accordion interactions, keeping the interface clean and focused.
Material Card Selection & Floating Compare Bar
Materials are displayed as informative cards. Once selected, they appear in a floating comparison bar at the bottom—non-intrusive but always accessible.
Dedicated Comparison Page
Clicking the “Compare” button opens a focused comparison view that supports up to five material cards. This page lays out key specs side-by-side, empowering users to make informed selections with clarity.
Design Highlights
- Accordion-based cascading navigation for deep category hierarchies.
- Always-accessible floating compare bar that enhances multi-selection UX.
- Clear visual hierarchy in material cards (images, specs, tags).
- User-centric comparison interface with consistent layout and readable metrics.
Impact
The new structure reduced navigation time and helped users reach relevant materials faster.
The accordion and floating compare bar brought clarity and control to the selection process.
Users appreciated how they could narrow down 1000s of materials into a shortlist effortlessly.
