Staron — a premium product catalog where selection becomes confident: color → use case → 3D visualization
B2B UX/UI platform: filtering, inspiration for architects, and 3D simulation integration
Staron is a solid surfaces brand where product quality must be matched by an equally clear and efficient selection experience for architects and designers. Our goal was to turn the website into a decision tool, not just a showcase: structure a large catalog, enable navigation by colors and applications, provide inspiration content, and integrate 3D simulation so users can preview materials in realistic contexts. We designed a UX flow that reduces search friction, clarifies the next steps, and moves users from exploration to action without overload or unnecessary barriers.
Case overview
- Project
- Staron Solid Surfaces
- Industry
- Materials / interior & architecture (B2B)
- Market
- Estonia / Baltic region
- Users
- Architects, designers, B2B buyers, partners
- Core problem
- complex material selection without context and comparability
- Goal
- make the website a selection tool (catalog + filters + 3D)
- Solution
- catalog UX architecture + inspiration hub + 3D simulation integration
- Outcome
- faster discovery, more confident selection, smoother path to inquiry/contact
Context
Material selection is a high-stakes decision: collections, shades, textures, applications, and technical constraints. If a website presents materials as "just images," users lack what matters most — usage context and confidence that the option fits the project. In B2B, this is amplified: architects need to narrow down options quickly, present credible alternatives to clients, and then move to inquiry/contact. For Staron, the goal wasn't only to look premium — it was to enable premium decision-making: a structured catalog, inspiration content, integrated 3D simulation, and a clear user path that remains intuitive on mobile.
Problem
What was broken
- materials were hard to compare without a "color → application → collection" structure
- browsing didn't quickly translate into understanding where it fits
- lack of contextual proof (simulation/examples needed)
- overload when options scale
- mobile navigation needed a clear section logic
What was at stake
- lost inquiries due to decision fatigue
- weakened premium brand trust if selection feels complex
- higher load on sales/support for basic guidance
- poor conversion from catalog exploration to contact/inquiry
Goal
Build a UX system where users:
- quickly find the right area (catalog / applications / technical info / video)
- narrow choices via filtering and clear navigation
- validate decisions with 3D simulation and inspiration
- move to inquiry/contact with minimal friction
Strategy
- Structure before persuasion
- Context wins: inspiration + simulation
- Filtering UX as the core product layer
- Mobile-first navigation
- Premium clarity: calm, precise, predictable
UX Decision Logic
Navigation by sections: catalog, colors, applications, technical info
Mobile menu is a key UX node. We structured sections so users choose not a "page," but a task type: learn about the brand, pick a color, view applications, study technical information. This navigation reduces cognitive load and accelerates the path to needed content.
3D simulation: proof of choice in real context
For materials, context decides: how the surface looks in space. 3D simulation gives users confidence before contacting a dealer: they see material in typical scenarios (interiors/application zones) and can compare options without "guessing." This reduces doubts and increases inquiry quality.
Inspiration hub: application ideas that accelerate decisions
Inspiration is not decoration, but part of selection. The scenario gallery shows where material works best and helps architects formulate solutions to clients faster. UX logic here is not just images, but clear presentation "style → context → example" so users quickly find direction and move to material specification.
Mobile sections: selection through clear categories
On mobile, we strengthen the "structure first" principle: users see large categories that correspond to tasks and content sections. This prevents chaotic scrolling and makes the path predictable. Large clickable zones + minimal typography = quick transition to needed scenario.
Edge options: profile selection as part of product UX
For B2B materials, not only colors matter, but also application details. The profiles/edges section shows options in structured form and helps coordinate solutions with projects faster. This reduces clarifying questions and shifts communication from "explanations" to "selection by options."
Video hub: content that answers questions before contact
The video section closes a typical materials problem: users want to see and understand the product, not read long descriptions. Content is structured as a library where each video is a clear knowledge unit. This increases trust and lowers the barrier to the next step — inquiry and consultation.
Staron® — clarity at first touch
The mobile interface highlights what matters most: material quality, visual confidence, and a clear call to action. UX is designed to convert interest into inquiry seamlessly on compact devices.
What we did
- Designed the UX architecture for a B2B materials website: sections, scenarios, navigation
- Built a selection logic where colors / applications / collections are clear entry points
- Implemented a filtering and content-structuring UX layer without interface overload
- Integrated 3D simulation as contextual proof for decision-making
- Created an inspiration presentation for architects and designers (styles/examples)
- Strengthened technical and knowledge areas (video/info) to support decisions
- Ensured mobile-first navigation and clear transitions between key sections
What we did NOT do
- No sales manipulation or artificial urgency patterns
- No banner-heavy UI or noisy secondary CTAs
- No chaotic navigation hiding the core structure
- No marketing promises replacing contextual proof
Results
User outcomes
- faster narrowing from browsing to decision
- higher confidence via context (3D + inspiration)
- fewer "where do I start?" moments due to clear structure
Business outcomes
- higher-quality inquiries (better prepared users)
- stronger premium brand trust through clarity
- knowledge hub reduces support load
"We designed not a showcase, but a material selection system."
How this case maps to our services
Why this case is a UX reference
Staron shows how a B2B site becomes a product: catalog structure, contextual proof (3D/inspiration), and task-based navigation turn complex material selection into a predictable journey — premium through clarity, not noise.
Similar cases
FAQ
Want a B2B catalog with 3D context like this?
We design B2B websites and catalogs where users select faster, understand better, and move to inquiry without noise.