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.

Protección de superficies180,00 €SIN IVA
1 ud
Preparación y pintura de paredes1260,00 €SIN IVA
84 m²
TOTAL PRESUPUESTO, IVA inc.
1742,40 €
Base 1440,00 € + IVA 21% 302,40 €

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.

Mi papel
Definición de producto, UX/UI, identidad visual y desarrollo
Alcance
Webapp, landing y sistema visual
Construcción
React, TypeScript, HTML y CSS, con IA como apoyo técnico
Estado
Prelanzamiento. Demo privada con datos ficticios

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

  1. 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.

  2. El cierre distingue la base y el IVA y mantiene el total a la vista durante toda la edición.

  3. Agrupé esas cifras junto a «Generar presupuesto». Así se revisan los importes justo donde se decide continuar.

  4. 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.

Editor de presupuestos de ObraCore con dos partidas, sus mediciones, el total con IVA y el botón «Generar presupuesto»
El mismo editor en móvil, con el total y la acción principal en la parte inferior

Interfaz real de ObraCore. Datos de ejemplo.

El mismo criterio en el resto del producto.

Cinco vistas reales de la aplicación, cada una con la decisión que la ordena.

Panel principal de ObraCore con indicadores, gráfica de finanzas y actividad reciente, con datos ficticios

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.

Los materiales de estos proyectos son confidenciales. En una entrevista puedo explicar responsabilidades y forma de trabajo.RUTA, un concepto propio de interfaz de movilidad

Trayectoria

  1. 2019–2020Proyectos por cuenta propiaDiseño gráfico para clientes
  2. 2021Take Out. Disseny i comunicacióDiseñador gráfico en prácticas
  3. 2022–2025BertrandtDiseñador UX/UI de HMI en proyectos para SEAT y CUPRA
  4. 2026ObraCoreProducto propio. Máster de Inteligencia Artificial

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.

  1. Entender

    Ordenar necesidades, pantallas y recorridos antes de construir.

    Arquitectura de información y flujos
  2. Dar forma

    Conectar jerarquía, interfaz y personalidad de marca.

    Figma e Illustrator
  3. Construir

    Convertir la propuesta en una interfaz web adaptable.

    React, TypeScript, HTML y CSS
  4. Revisar

    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.