Roca Specification: Specialized B2B E-commerce

THE CHALLENGE

Roca Brasil identified that professionals such as architects, interior designers, and specifiers faced significant friction when using existing digital channels:

• Lack of complete and technical product information;

• Difficulty sharing specifications with clients and partners;

• Absence of a loyalty and engagement program tailored to specifiers;

• Complex management of different stock types and delivery planning.

Core question: How might we enable specifiers to search, specify, organize, and share Roca products in a fluid, efficient, and professional way — aligned with their real workflows?

MY ROLE

UX Designer, responsible for the end-to-end design process of the specialized B2B platform built on Magento, from discovery and structuring to prototyping and delivery for development.

---

CONTEXT & OBJECTIVES

Context

Specifiers require a digital environment fundamentally different from a traditional B2C e-commerce. Their work is project-based, technical, and collaborative, demanding:

• Detailed technical catalogs;

• Specification lists organized by project or environment;

• Integration with multiple stock and logistics models;

• Relationship and incentive programs aligned with professional practice.

Project goals

• Design a specialized B2B e-commerce platform on Magento;

• Enable advanced filtering based on technical and contextual attributes;

• Allow creation and sharing of specification lists;

• Provide visibility into multiple stock types and delivery options;

• Support a referral and rewards program for specifiers.

---

DESIGN PROCESS

1) Discovery & Immersion

In-depth understanding of specifiers’ professional workflows, decision-making logic, and pain points.

2) Benchmarking

Analysis of national and international B2B platforms to identify best practices for specialized professional users.

3) Information Architecture

Definition of categories, navigation structures, and filters aligned with how specifiers search, compare, and select products, by environment, application, color, and stock type.

4) Prototyping

Design and iteration of user flows in Figma, including:

• specification list creation;

• segmented navigation;

• stock visibility and logistics logic;

• rewards and referral program flows.

5) Documentation & Handoff

Delivery of design specifications, prototypes, and interaction guidelines to support development on Magento.

---

KEY SOLUTIONS

Technical, Filter-Driven Product Catalog

Advanced filters allow users to explore products by:

• environment and application;

• technical attributes;

• stock availability (immediate, scheduled, unavailable).

Specification Lists

Users can create lists organized by project or environment, enabling:

• easier comparison;

• structured decision-making;

• sharing with clients and partners.

Stock & Logistics Transparency

Clear visualization of different stock types and delivery conditions, supporting planning and reducing uncertainty during specification.

Relationship & Rewards Program

Implementation of flows for:

• professional referrals;

• points accumulation;

• rewards redemption, aligned with specifiers’ ongoing relationship with the brand.

Efficiency-Focused Navigation

Navigation and interactions optimized for expert users, prioritizing speed, clarity, and reduced cognitive load.

---

STYLE GUIDE

A visual language designed for professional and technical users:

• Neutral color palette with institutional blue accents;

• Clean, highly legible typography;

• Modular components organized by environment and function;

• Iconography to clearly communicate status, stock, and application.

IMPACT & RESULTS (Qualitative)

• Improved alignment between the platform and real-world specification workflows

• Reduced friction in product selection, organization, and sharing.

• Increased engagement through specification lists and rewards mechanisms.

• Greater logistical clarity through transparent stock segmentation.

Key insight: B2B UX is not “B2C with technical jargon”, it requires designing around real professional tasks, constraints, and collaboration flows.

---

KEY LEARNINGS

• Deep understanding of professional workflows is essential for effective B2B UX.

• Information architecture should mirror how users think and work, not how systems are structured.

• Incentive programs only create value when they integrate naturally into daily professional practices.

• Designing for expert users means prioritizing efficiency over persuasion.