Marc ComasProduct Designer (UX/UI)
Tres años diseñando interfaces para pantallas de SEAT y CUPRA y un producto propio, ObraCore, que he definido, diseñado y construido en React.
Recreación del editor de presupuestos de ObraCore, con datos ficticios. Cambia una cantidad.
- Experiencia
- 3 años en HMI de automoción
- Producto propio
- ObraCore, de la idea al código
- Idiomas
- Catalán y español nativos. Inglés B2
- Ubicación
- Alicante (España), en remoto
Caso de producto
ObraCore: revisar un presupuesto antes de enviarlo.
Plataforma de presupuestos y gestión de reformas para autónomos y pequeñas empresas. Producto propio, en prelanzamiento.
En una reforma, la información del presupuesto acaba repartida.
Presupuestos, documentos y tareas pueden acabar dispersos entre archivos y herramientas. ObraCore reúne esas piezas en un mismo producto para autónomos y pequeñas empresas de reformas.
El momento más delicado es generar el presupuesto: es el documento que recibe el cliente.
Antes de generar un presupuesto, la persona necesita distinguir el importe base, los impuestos y el total.
La decisión, paso a paso
El concepto, la cantidad, la unidad y el importe se agrupan por partida. Los campos conservan sus etiquetas visibles mientras se introduce la medición.
El cierre distingue la base y el IVA y mantiene el total a la vista durante toda la edición.
Agrupé esas cifras junto a «Generar presupuesto». Así se revisan los importes justo donde se decide continuar.
El importe y la medición pasan bajo el concepto. El total y la acción principal se quedan en la parte inferior de la pantalla.


Interfaz real de ObraCore. Datos de ejemplo.1 / 4
El mismo criterio en el resto del producto.
Cinco vistas reales de la aplicación, cada una con la decisión que la ordena.

Las cifras del negocio antes que el detalle.
Facturación, presupuestos activos, resultado operativo y costes aprobados encabezan el panel. Debajo, los accesos de trabajo y la actividad reciente dan contexto a esas cifras.
Comprobado hasta ahora
- Edición completa de un presupuesto de ejemplo, en escritorio y en móvil.
- Etiquetas visibles, estados y foco de teclado en los componentes.
- Revisión de cada pantalla con datos ficticios.
Son comprobaciones internas, hechas por mí.
Pendiente: prueba con usuarios
Voy a enseñar un presupuesto de ejemplo a unas pocas personas del sector y pedirles que me digan:
- Qué importe se va a enviar.
- Qué incluye.
- Qué harían a continuación.
Anotaré dónde dudan y qué cambia en la interfaz.
Experiencia profesional, 2022–2025
Tres años diseñando pantallas de automóvil.
Diseñador UX/UI de HMI en Bertrandt, en proyectos para SEAT y CUPRA.
Qué hacía
Diseño y especificación gráfica de interfaces HMI para las pantallas del vehículo.
En qué se medía el trabajo
Usabilidad, consistencia entre pantallas y documentación de cada especificación.
Qué me llevo a producto
Jerarquías que se entienden de un vistazo, componentes coherentes y especificaciones que no dejan dudas. Es el criterio que aplico hoy en ObraCore.
Trayectoria
- 2019–2020Proyectos por cuenta propiaDiseño gráfico para clientes
- 2021Take Out. Disseny i comunicacióDiseñador gráfico en prácticas
- 2022–2025BertrandtDiseñador UX/UI de HMI en proyectos para SEAT y CUPRA
- 2026ObraCoreProducto propio. Máster de Inteligencia Artificial
Más trabajo
Seis conceptos para explorar otros problemas.
Proyectos propios, diseñados y desarrollados por mí. Las marcas y los datos son ficticios.
CIFRAComparar presupuestos por precio, plazo y alcance.
B2B, comparación↗
RUTAPlanificar rutas y paradas de carga de un vehículo eléctrico.
Movilidad, interfaz↗
VOLTAElegir acabado y talla de una bicicleta y recorrer la compra.
Consumo, comercio↗
UMBRALCombinar horas en varias salas y gestionar reservas.
Área de cliente, reservas↗
LOMAPresentar un hotel boutique y consultar disponibilidad.
Web, dirección visual↗
Barro & FuegoExplicar un oficio antes de pedir que se elija un curso.
Web, interacción↗
Cómo trabajo
Del problema a la pantalla, en cuatro pasos.
Diseño y construyo. Eso acorta la distancia entre una decisión y su comprobación.
Entender
Ordenar necesidades, pantallas y recorridos antes de construir.
Arquitectura de información y flujosDar forma
Conectar jerarquía, interfaz y personalidad de marca.
Figma e IllustratorConstruir
Convertir la propuesta en una interfaz web adaptable.
React, TypeScript, HTML y CSSRevisar
Contrastar el resultado, corregir y mantener la coherencia.
Estados, foco de teclado y móvil
Formación
- 2026Máster de Inteligencia Artificial. BIG School, Universidad Isabel I
- 2017–2021Diseño Gráfico. ESDAP, Escola Superior de Disseny i d’Arts Plàstiques
- 2015–2017CFGS Gráfica Publicitaria. Escola Serra i Abella
Idiomas
- CatalánNativo
- EspañolNativo
- InglésB2
Uso de IA
Uso IA como apoyo técnico para implementar y revisar código. Las decisiones de producto y de interfaz las tomo yo.
¿Hablamos del puesto?
Puedo enseñarte ObraCore por videollamada, con una obra de ejemplo, y explicarte mi trabajo en automoción.