Seu Barba
SaaS de agendamiento para barberías: marca, app y landing page de ventas, producto propio en desarrollo
- Mi rol
- Product Designer · Diseñador UI/UX
- Año
- 2026
Seu BarbaContexto
Seu Barba es un producto propio: un SaaS de reservas para barberías. El cliente reserva por el enlace de la barbería, sin descargar una app; el barbero recibe la agenda lista, el recordatorio por WhatsApp reduce las ausencias y el sistema cierra la caja y las comisiones del mes. Hice el naming, la identidad, el prototipo de la app y la landing page de ventas en Figma; el próximo paso es el desarrollo, con la landing page en React.
Desafío
Un sistema de reservas suele parecer software de oficina, y una barbería es justo lo contrario. El desafío era crear algo que el barbero reconociera como propio (el clima de la barbería clásica, las fotos, el lenguaje de quien corta) sin perder la claridad de un producto digital. La primera versión salió demasiado oscura; la segunda cambió el fondo a crema, sumó fotos reales y una serif clásica, y quedó a la vez más limpia y más barbería.
La marca
Del nombre al sistema visual, pensado para funcionar en la app, en la landing y en el Instagram de la barbería.
- 01 / 03
Nombre y logo
“Seu Barba” (algo así como “Don Barba”) es como el cliente se refiere a su barbero en Brasil: íntimo, brasileño y fácil de recordar. El símbolo es el poste de barbería, la señal más antigua del oficio, en un cuadrado rojo que funciona solo como ícono de la app.
- 02 / 03
Paleta y tipografía
Crema de papel antiguo como fondo, cuero en los textos, el rojo del poste en las acciones, latón en las estrellas y verde botella para pagado y confirmado. DM Serif Display en los títulos, como un cartel pintado a mano, e Inter en la interfaz.
- 03 / 03
Componentes
Botones, campos, filtros, horarios libres y ocupados, estado de la reserva y la tarjeta de servicio: las piezas que se repiten en la app y en la landing, diseñadas una sola vez.
La aplicación
Dos lados del mismo producto: el barbero sigue el día y la caja; el cliente reserva en tres pasos, sin crear una cuenta. En todas las pantallas, un título corto, una acción principal y estados con color (rojo para ahora, verde para pagado y confirmado).
La landing page, sección por sección
La página de ventas del sistema, en el orden en que el dueño de la barbería descubre el producto.
- 01 / 09
Encabezado
Una promesa directa (“Silla llena, sin vivir en WhatsApp”), una foto real de barbería, el celular con la elección de horario, el aviso de recordatorio por WhatsApp y las franjas del poste de barbería enmarcando las barberías que prueban el sistema.
- 02 / 09
Hecho para barberías
El mosaico de fotos de la referencia ganó un propósito: junto a las imágenes, las tres metas del producto en números grandes (menos ausencias, horarios vacíos ocupados y agenda abierta las 24 h).
- 03 / 09
Funcionalidades
Seis funcionalidades en tarjetas con ícono y una línea de beneficio cada una: reservas online, recordatorio por WhatsApp, agenda por barbero, comisiones, club de suscripción y caja del mes.
- 04 / 09
Cómo funciona
La reserva del cliente en tres pasos, con la pantalla de cada uno: elige el servicio con precio y duración, elige barbero y horario, recibe la confirmación y el recordatorio.
- 05 / 09
App del barbero
El otro lado del producto: la agenda del día con el próximo cliente destacado y la caja del mes con las comisiones, más la lista de lo que resuelve la app.
- 06 / 09
Planes
Tres planes (Solo, Barbería y Red) con el del medio destacado, el precio mensual en un número grande y 14 días gratis sin permanencia.
- 07 / 09
Llamado con foto
Inspirado en el “reserva tu turno” de la referencia, con una diferencia: un degradé oscuro detrás del texto para que el llamado siga siendo legible sobre la foto.
- 08 / 09
Testimonios
Testimonios en tarjetas con foto de barbería, cita en serif y las cinco estrellas en latón.
- 09 / 09
Dudas y pie de página
Preguntas frecuentes en acordeón, que responden a las objeciones de compra (¿necesito una app? ¿sirve para quien atiende solo? ¿tiene permanencia?), y el pie de página en cuero.
Sistema Visual
Barbería clásica con interfaz limpia: fondo crema, textos en cuero y el rojo del poste reservado para la acción y los destacados. Las fotos reales de barbería hacen el trabajo de ambientación, y la serif da el tono de cartel pintado a mano.
Paleta
Crema
#F7F1E8
Fondo principal
Cuero
#1F1B17
Textos, pie de página y botones oscuros
Rojo Barbero
#C23B22
Acción, destacados y marca
Latón
#E3A33B
Estrellas y detalles
Verde Botella
#2E5543
Pagado y confirmado
Tipografía
DM Serif Display
400
Títulos y números: la serif de cartel de barbería clásica
Inter
400 / 500 / 600 / 700
Interfaz de la app, textos de apoyo, botones y leyendas
Próximos pasos
Con el prototipo validado, Seu Barba entra en desarrollo: primero la landing page en React, para empezar a captar barberías interesadas, después el MVP con el enlace de reserva del cliente y la agenda del barbero, y a continuación el recordatorio por WhatsApp, la caja y las comisiones.
Aprendizaje
Un producto de nicho tiene que parecer del nicho. La versión oscura era linda, pero parecía un software más; lo que hizo que el barbero se reconociera fueron los detalles del oficio (el poste, la serif de cartel, las fotos de sillas de cuero y navajas), aplicados sobre una interfaz clara que no deja dudas sobre dónde hacer clic.
Otros proyectos para conocer.
Ciudadanía e InmigraciónVogel Cidadania Italiana
Landing page de captación para una asesoría de ciudadanía italiana, del UX/UI al código en React, con formulario de evaluación gratuita, API de leads y versión móvil
Ver proyecto
SaaS · Gestión de InventarioMimos Papelaria
Sistema SaaS de gestión de inventario para papelería: productos, movimientos, categorías, proveedores e informes, con UI/UX, front-end en React y back-end
Ver proyecto
SaaS · JurídicoValverde Jurídico
Sistema SaaS de gestión jurídica para un despacho de abogados: clientes, procesos, agenda, portal del cliente y sitio institucional, del UX al back-end
Ver proyecto