De catálogo a sistema.
Seis landings bilingües, una app de pedidos en claro y oscuro y una plataforma de eventos que ya abre puertas, para un distribuidor de techado en Florida.
- Investigación de usuarios
- UX/UI
- Diseño de producto
- Sistema de diseño
- Dirección de arte
- Contenido bilingüe
- UX writing
- Producto digital
«We Speak Roofing.» SYL Roofing Supply distribuye material de techado en el centro de Florida y atiende en dos idiomas todos los días. El encargo empezó siendo una app de pedidos y acabó siendo el sistema digital de la empresa entera. Hoy son cuatro piezas: la marca, la web, la plataforma de eventos — ya en uso — y la app. La quinta, la de recursos humanos, está en el taller.
El encargo
SYL vende material de techado a contratistas: shingle, teja, metal, TPO, accesorios. Su competencia vende lo mismo. Lo que le distingue no está en el catálogo, está alrededor: hablan español, forman a sus clientes, tienen el almacén cerca de la obra y responden cuando llueve. Nada de eso se veía en ninguna pantalla. El trabajo fue diseñar los sitios donde eso se ve: la web que le cuenta el sistema completo a quien llega buscando un material, la plataforma que convierte cada capacitación en un evento con inscripción y puerta, y la app con la que el contratista pide sin pasar por el mostrador. La plataforma ya está en uso; la web y la app están terminadas pantalla a pantalla, y publicarlas es el siguiente paso de SYL, no una promesa de esta ficha.
Lo que está diseñado y terminado, contado en piezas.
- 6
- landings de la web About, Shingle, Tiles, Metal, Storm Season y Loyalty, de portada a pie
- 2
- idiomas español e inglés, porque el mostrador de SYL atiende en los dos
- 2
- modos de color la app entera resuelta en claro y en oscuro, sin un hexadecimal suelto
- 1
- asistente con nombre Luna, el chat de la app que contesta lo que contesta el mostrador
Antes de la web y de la app hubo un sistema: colores con nombre propio, una sola familia tipográfica y reglas de uso que cualquier pieza obedece.
Los nombres no son de catálogo: son de Florida. El atardecer, el océano, la marea y la niebla — una paleta que sabe de dónde es.
El sistema también rueda. La misma cinta naranja y el mismo «We Speak Roofing» van del camión grúa al montacargas, para que la marca se reconozca antes de leerla.
Las reglas no viven en un manual: viven en piezas. Titulares sobre color plano, texto sobre fotografía y una promesa que se repite en dos idiomas.
El sistema social entero: posts de servicio y de producto, campañas de temporada y las constantes de sede y teléfono en cada pieza.
Seis landings que no venden productos: venden sistemas completos y las razones para instalarlos. Esta es la de sistemas de metal, entera.
Las otras cuatro, cada una con su trabajo — y de propina, la plataforma de eventos sirviendo una capacitación real. Pasa por encima o usa las flechas.
01 About us Quién es SYL: la flota, las tres sedes y la gente que da la cara. La página que da la mano.
02 Shingle Sistemas completos de shingle para contratistas, con las marcas y la logística por delante.
03 Tiles La misma casa en español: teja de alto rendimiento contada para quien la instala.
04 Storm season La campaña de temporada: prepararse antes de que llueva, con su guía descargable.
05 Eventos «Build a Stronger Sales System», con Owens Corning: una capacitación real, servida en vivo por la plataforma de eventos.
Del flyer a la puerta.
Un panel para cada capacitación.
La tercera pieza del sistema ya está en la calle. Cada evento tiene su landing, su lista de inscritos, su control de acceso con QR y sus reseñas — y SYL lo lleva todo desde un mismo panel, de la oficina a la obra.
- Landing por evento
- Inscripciones
- Puerta con QR
- Reseñas
Detrás de cada capacitación hay un panel propio, «SYL By BAD». Quien lleva los eventos ve de un vistazo cuánta gente viene, quién pasó por la puerta y qué opinó después — en el ordenador de la oficina o en el móvil, en la puerta.
Dos idiomas, sin versión pequeña
La web no tiene un idioma principal y una traducción: tiene contratistas que piensan en español y contratistas que piensan en inglés. Cada landing existe para los dos con la misma jerarquía y el mismo cuidado técnico. «We speak roofing» significa, antes que nada, hablar como el que compra.
Del almacén al bolsillo.
El pedido entero, desde la obra.
El encargo original, rehecho entero en 2026. El catálogo ordenado por marcas, el palé que se va llenando, el pedido que se sigue como un envío y una asistente que contesta a las once de la noche. Todo con los mismos tokens de color del sistema, en claro y en oscuro.
- Catálogo por marca
- Palé
- Seguimiento
- Asistente
La app abre con el día del contratista: el tiempo de mañana antes de subirse a la cubierta, el palé que se va llenando y el pedido que se sigue en tiempo real.
El catálogo no ordena por referencia: ordena como piensa el contratista. Primero la marca, luego el producto — TAMKO, Owens Corning o Verea, cada una con su estantería.
La asistente tiene nombre, un teléfono detrás y las dos sedes a mano. No sustituye al mostrador: lo alarga hasta las horas en que está cerrado.
Un contratista no navega: pide. Cada pantalla de la app está pensada para quien llama desde una cubierta, con guantes puestos y prisa.
-
Figma -
Photoshop -
Magnific -
ClickUp -
Slack -
Supabase -
Netlify -
GitHub -
Claude
En el taller
La quinta pieza sale del mismo panel que los eventos: recursos humanos. Las ofertas de empleo de SYL, las candidaturas que llegan y el embudo por el que avanza cada candidato, en el mismo sitio donde ya se gestionan las capacitaciones. Está en desarrollo. Cuando salga a la calle tendrá su capítulo en esta página, con pantallas y todo; hasta entonces, lo honesto es decir que se está construyendo.
-
Investigación de usuarios
Entrevistas con el equipo del mostrador y con contratistas: qué piden, cómo lo piden y en qué idioma.
-
Arquitectura de la información
Seis landings con un trabajo cada una, y una app ordenada como piensa el que compra: marca primero, producto después.
-
UX/UI
Los recorridos de compra, seguimiento y chat, resueltos pantalla a pantalla en claro y en oscuro.
-
Sistema de diseño
Tokens de color con dos modos, escala tipográfica y componentes con sus estados. Ningún hexadecimal suelto.
-
Contenido bilingüe
Español e inglés con la misma jerarquía. La versión en español no es la traducción: es la otra mitad del cliente.
-
UX writing
El guion de Luna y el microcopy de la app: respuestas de mostrador, sin humo de bot.
-
Producto digital
La plataforma de eventos, del diseño al panel en uso: landing por evento, inscripciones, puerta con QR y reseñas.
-
Dirección de arte
Fotografía de obra, flota y almacén reales. El material se enseña donde se instala.
-
Diseño de producto
Qué entra en cada pieza y qué espera su turno. La plataforma de eventos espera el suyo en el taller.
