De catálogo a plataforma.
Un distribuidor de material de techado en Florida y cuatro productos digitales diseñados y construidos desde cero. Tres de ellos ya están en producción.
- Investigación de usuarios
- UX/UI
- Diseño de producto
- Sistema de diseño
- Dirección de arte
- Producto digital
- Contenido bilingüe
«We Speak Roofing.» SYL Roofing Supply distribuye material de techado en el centro de Florida y trabaja en dos idiomas todos los días. El encargo empezó siendo una app de pedidos. Terminó siendo el sistema digital de la empresa entera — y esa deriva no fue un desvío: cada pieza apareció porque la anterior dejó a la vista un hueco que nadie había mirado.
El encargo
SYL vende material de techado a contratistas: tejas, TPO, metal, 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 almacén cerca de la obra y responden cuando llueve. Nada de eso se veía en ninguna pantalla. El trabajo no fue inventarle una marca. Fue construir las herramientas donde eso que ya hacen bien se pudiera ver, medir y repetir.
Lo que hoy existe, contado en piezas y no en adjetivos.
- 4
- Productos digitales Web, app, eventos y RRHH
- 8
- Módulos en el panel Del alta de un evento a la entrevista de un candidato
- 2
- Idiomas, en todo Español e inglés, hasta en los correos automáticos
- 4
- Roles con permisos propios Cada uno ve solo lo suyo
La plataforma de eventos. SYL organiza capacitaciones y lanzamientos con GAF, IKO, CertainTeed o Atlas, y hasta entonces los cupos se llevaban por WhatsApp y hoja de cálculo. Esto es lo que ve un contratista.
La decisión
La referencia de uso no fue ningún portal de formación industrial: fue Fever, la app de ocio. El motivo es que el contratista que se apunta a una capacitación un viernes a las ocho de la mañana está decidiendo lo mismo que quien compra una entrada — si le compensa el rato. Tarjeta con fecha grande, cupos a la vista, categoría de un golpe y un solo botón. Nada de formularios de inscripción a cuatro pasos.
El acceso y el alta. Seis pasos cortos, uno por pantalla, y una puerta de invitado para quien solo quiere mirar antes de dar su correo.
El catálogo de eventos y la ficha. Los cupos son un número real leído de la base de datos, no una promesa de marketing.
Claro y oscuro, desde el primer día
No es una función que se añadiera al final: el sistema de color nació con los dos modos y ningún componente lleva un hexadecimal suelto. El naranja y el navy de SYL no cambian entre modos — solo cambian fondos, superficies, texto y bordes.
Un cupo mal contado en un evento con marca invitada no es un error de software: es una silla vacía delante de un proveedor que ha viajado hasta Orlando.
La landing de empleo. SYL contrata en todo el centro de Florida y publicaba las vacantes en portales de terceros, donde su marca desaparecía. Esta página lee las vacantes abiertas directamente del panel.
El panel. Lo usa el equipo de SYL, no un administrador de sistemas — así que se diseñó con las mismas reglas que la parte pública, y no con las de un back-office.
Producto cuatro
Recursos humanos. Empezó como «una página de empleo» y acabó siendo el módulo más grande del panel, porque cada pieza destapaba la siguiente: si publicas vacantes llegan candidatos, si llegan candidatos hay que ordenarlos, si los ordenas hay que citarlos, y si los citas hay que contestarles.
-
Vacantes
Alta, edición y cierre desde el panel. La landing pública las lee sola; nadie toca HTML para publicar un puesto.
-
Candidatos
Un embudo de seis estados, del alta a la contratación. El currículum va a un depósito privado y se abre con enlaces firmados que caducan.
-
Entrevistas
Agenda con modalidad, sede o enlace, y notas. Al citar a alguien, su ficha cambia de estado sola.
-
Correos
Acuse de recibo y carta de no seleccionado, con la marca de SYL y en los dos idiomas. Enviar la carta marca al candidato: no hay dos sitios que puedan contradecirse.
-
Permisos
Cuatro roles. El de recursos humanos entra al panel y no ve nada más que lo suyo.
-
Encuestas
Formularios propios para después de cada evento, con resultados agregados y exportación.
Lo que viene
Dos productos más están diseñados y aún no publicados: la **web corporativa** —siete páginas de catálogo técnico, con tablas de producto, sistemas completos por tipo de cubierta y un programa de fidelidad— y la **app de pedidos**, rehecha entera en 2026 con modo claro y oscuro. Las dos entran en esta ficha en cuanto SYL las ponga en la calle. [PENDIENTE: pantallas de la web corporativa y de la app]
-
Investigación de usuarios
Entrevistas con el equipo de SYL y con contratistas, y el estudio de cómo se apuntaban a los eventos antes de que existiera nada.
-
Arquitectura de la información
Decidir qué es un producto y qué es un módulo. Cuatro productos que comparten una base de datos y no se pisan.
-
Diseño de interacción
Los recorridos de alta, inscripción, postulación y moderación, cada uno con su caso de error escrito.
-
UI y sistema de diseño
Tokens de color con modo claro y oscuro, escala tipográfica, componentes y estados. Ningún color a mano fuera del sistema.
-
Diseño de producto
Qué entra en cada versión y qué espera. El planificador de entrevistas salió antes que la sincronía con calendarios porque resolvía más con menos.
-
Contenido bilingüe
Todo en español e inglés, incluidos los correos automáticos, que llevan los dos idiomas en el mismo mensaje.
-
Modelo de datos y permisos
Las tablas, sus reglas de acceso y qué ve cada rol. El currículum de un candidato es un dato sensible y se trata como tal.
-
Front-end
Las páginas públicas y el panel, construidos y desplegados.
-
Correo transaccional
Plantillas con la marca de SYL para el acuse, el rechazo y la invitación al panel.
-
Dirección de arte
Fotografía de obra real, no banco de imágenes. El material se ve donde se instala.
-
Documentación
El sistema de diseño y el modelo de datos escritos, para que el proyecto siga vivo sin depender de una conversación.
