Diseño experiencias que convierten retos complejos en oportunidades de negocio
Más de cinco años diseñando producto digital en banca, energía y e-commerce. Escucho a usuarios, decido con negocio y tecnología y acompaño a desarrollo hasta el lanzamiento.
Simplifica la documentación y la firma bancaria: con «Aportar todos» y «Firmar todos», de 13 a 4 acciones Ver más
eSave
Optimiza la lectura de tus facturas de luz y gas y maximiza el ahorro en menos tiempo Ver más
Otros proyectos
Olé
Tres apps móviles para tres clientes: del mockup a la tienda, como Product Designer y Product Owner Ver más
Ibercaja
Proyecto personal sobre la demo pública de Ibercaja empresas: toda la posición de la empresa en una pantalla Ver más
Herramientas
Figma
Figma Make
Claude
Miro
Hotjar
Notion
Jira
Confluence
Visual Studio Code
Jonatan Ruiz Rios
Product Designer UX/UI Research · AI Prototyping
Madrid·Remoto, híbrido o presencial
Llevo más de cinco años diseñando producto digital B2B y B2C en banca y energía. Mi valor está en la conversación: escucho a usuarios y stakeholders, convierto sus necesidades en decisiones compartidas con negocio y
tecnología, y las aplico en soluciones que se notan en la experiencia del usuario y en los resultados del negocio. Prototipo con IA y acompaño a desarrollo hasta que el producto llega al usuario final.
Documentación y firma: simplifica uno de los momentos más críticos del proceso bancario.
Ordené la documentación por interviniente y definí con desarrollo cinco estados de subida para que nadie se pierda. Con «Aportar todos» y «Firmar todos», el prototipo pasa de 13 a 4 acciones en la simulación del antes y el después.
13 → 4acciones para aportar y firmar
3intervinientes en la misma operación
Simulación del prototipo con datos ficticios
Principios del diseño
Orientación
El usuario siempre sabe dónde está, qué falta y qué pasará después
Claridad
Un patrón común para todos los documentos y sus acciones
Confianza
Estados visibles y feedback en cada paso del proceso
Escalabilidad
Patrones reutilizables en otros procesos bancarios
Inicio
Ampliar
Lo que decidí yo:
Organicé la documentación por interviniente para ordenar el proceso e individualizar la firma.
Diseñé con desarrollo cinco estados de subida para que el usuario sepa siempre en qué punto está cada documento.
Propuse las acciones masivas «Aportar todos» y «Firmar todos»: −69 % de acciones al aportar y firmar, calculado sobre el prototipo.
Colaboré en el proceso de factoring: flujo de modificaciones y comportamientos transversales del proceso.
Cómo lo hice
El proceso, tal y como fue
01EntenderCada documento pedía acciones distintas según su naturaleza y el momento del proceso
02ReplantearDejé de pensar en pantallas sueltas: un modelo común para todos los documentos
03OrdenarOrganicé la documentación por interviniente
04Dar estadoCinco estados de subida para saber siempre en qué punto está cada documento
05SimplificarPropuse «Aportar todos» y «Firmar todos»: −69 % de acciones al aportar y firmar, sobre prototipo
06CompararRecreé el antes y el después en una demo navegable
01 El reto
Diferentes documentos Diferentes estados Un único modelo mental
Cada documento podía requerir acciones distintas dependiendo de su naturaleza y del momento del proceso.
02 Insight clave
Insight clave
¿Dónde estoy?
El usuario necesita entender su posición dentro del proceso.
¿Qué ocurrirá después?
El sistema debe anticipar el siguiente paso y reducir incertidumbre.
¿Qué tengo que hacer?
Cada documento debe comunicar claramente qué acción requiere.
03 Modular para reducir complejidad
Un modelo centrado en cada interviniente para gestionar documentación de forma clara y eficiente
Agrupé la documentación por interviniente y por acción (aportar o firmar). El usuario puede actuar sobre documentos individuales o sobre el conjunto para avanzar más rápido en el proceso, siempre que este lo permita.
04 Subida de documentos
Visibilidad total del estado y evolución de cada subida
Diseñé con desarrollo cinco estados de subida para que el usuario sepa en todo momento en qué punto está cada documento y no dude de si se está subiendo.
01 SeleccionadoEl documento se ha seleccionado y está listo para subir
02 SubiendoEl archivo se está cargando en el sistema
03 ProcesandoEl sistema valida y procesa el documento
04 AportadoEl documento se ha aportado correctamente
05 ErrorHa ocurrido un problema. Se puede reintentar
Añadir documentoDocumento subido
Principio de diseño
Cada acción debe tener una respuesta visible. El usuario nunca debería preguntarse si su documento se está subiendo.
05 Área documental
Un centro documental que unifica todo el proceso
Reuní toda la documentación de la operación en un único espacio, organizada por fase, paso e interviniente, con su estado y las acciones disponibles.
Información del procesoRecibe y organiza los documentos por cada fase y paso del proceso
Por intervinienteAgrupa y ordena los documentos según el interviniente
Estados visiblesMuestra el estado del documento: Aportado o Firmado (y pendientes) por interviniente
Acciones secundariasPermite ejecutar acciones del flujo: Borrar, Enviar, Descargar, Revisar, etc.
Beneficios
Visión completa y estructurada del proceso
Trazabilidad por fases, pasos e intervinientes
Acceso rápido a documentos y acciones
Reducción de errores y mayor control
La pantalla baja sola; también puedes recorrerla tú.
06 Decisiones clave que guiaron el diseño
Decisiones clave que guiaron el diseño
Enfoque por interviniente
Organicé la documentación por interviniente para ordenar, individualizar la firma y ofrecer claridad
Modularidad
Separé aportar, firmar y listar para simplificar y escalar la experiencia
Acciones flexibles
Permití acciones individuales y masivas para adaptarme a cada necesidad
Listado como control
Unifiqué y resumí la información en un único listado
Consistencia
Cada acción tiene una consecuencia visible y coherente en el flujo
La firma, pantalla a pantalla
Del documento emitido a la firma confirmada
Pendientes de firmar
Emitir
Firmar todo
Esperando la firma
Firmado
Documentos firmados
Pantallas del flujo de firma diseñadas en Figma: emitir cada documento, firmar todo, esperar a que el cliente firme en el dispositivo y confirmar.
Aportar y firmar, antes y después
Recreé la documentación de una hipoteca con tres intervinientes en una simulación de antes y después. La misma tarea en las dos versiones: aportar los 4 documentos de Juana y firmar los 9 de la operación. Un contador suma tus acciones.
A · Antes
Una tabla básica con scroll horizontal, documentos mezclados y sin intervinientes: 13 acciones
B · Mi propuesta
Documentos por interviniente, «Aportar todos» y «Firmar todos» con estados visibles: 4 acciones
Simulación con datos ficticios. No es el producto real de BWatr.
Lo que cambia para quien gestiona la documentación
El impacto se puede comprobar en la simulación de arriba: la misma tarea pasa de 13 acciones a 4. Más allá de la cifra, la propuesta mejora tres cosas.
Agilidad
«Aportar todos» y «Firmar todos» resuelven en un paso lo que antes eran acciones fila a fila, sin desplazarse por la tabla.
Legibilidad
Cada documento tiene dueño y estado visibles. Se acabaron los tres «Contrato» iguales sin saber de quién es cada uno.
Aprendizaje intuitivo
El mismo patrón para aportar y para firmar, ordenado por interviniente: quien llega nuevo entiende el proceso sin formación.
A medir en producción: tiempo hasta completar la documentación, documentos rechazados o reintentos y consultas a soporte.
08 Aprendizajes
Aprendizajes
La nueva área documental ordena un proceso complejo alrededor de cada interviniente: documentos, estados y acciones en un mismo sitio.
Cierre del proyectoBWatr
Poner al interviniente en el centro del sistema reduce la carga cognitiva y acelera las decisiones
La visibilidad del estado y del progreso es clave para generar confianza y evitar incertidumbre
La combinación de acciones individuales y masivas mejora la eficiencia sin perder control
Un modelo consistente entre módulos reduce errores y evita retrabajos
Acordé cada decisión con negocio y tecnología: avisos junto al dato que el OCR lee con dudas y tres ofertas claras en lugar de todos los precios. Prototipé con IA, lo validé con 20 agentes y revisé con front hasta publicar.
−35 %tiempo en el cálculo de ahorro
−68 %errores al iniciar sesión con SSO
Test de usabilidad con 20 agentes
El reto:
Diseñar un cálculo de ahorro que el agente entienda a la primera: leer la factura con OCR, avisar de los errores y mostrar solo lo que importa para decidir. eSave es B2B: las comercializadoras usan la plataforma y sus agentes calculan el ahorro de sus empresas cliente.
Lo que decidí yo:
Trabajo con negocio y tecnologíaFui UX y UI y definí cada decisión de diseño con negocio y con el equipo técnico, para que fuera viable sobre la API.
Experiencia de lectura de la factura (OCR)Cada posible error se avisa junto al campo y un punto de información explica cómo resolverlo, para que el usuario corrija antes de calcular y confíe en el resultado.
Priorización de ofertas y filtrosNegocio proponía mostrar todos los precios mediante burbujas de colores. Tras contrastar la propuesta con los equipos de negocio y tecnología, priorizamos las tres mejores ofertas y filtros accionables. El objetivo: reducir el scroll, facilitar la elección y evitar una interfaz sobrecargada.
Seguimiento hasta publicarTras la maquetación, revisé con front la consistencia entre el flujo planteado y lo desarrollado (QA) hasta publicar.
01 Research
Analizar la herramienta con quien la usa cada día
Al principio analicé la herramienta existente con dos agentes que la usaban a diario. De esas sesiones y del trabajo con negocio salieron tres hallazgos que guiaron el discovery y los evolutivos del producto. Después validé el rediseño con un grupo más amplio: 20 agentes.
Errores sin explicación
El agente no sabía qué fallaba ni cómo corregirlo. Decisión: aviso junto al campo con un punto de información.
Catálogos largos
Encontrar la mejor oferta exigía recorrer listas de precios con mucho scroll. Decisión: las tres mejores ofertas y filtros accionables.
Fallos al iniciar sesión
Entrar llevaba tiempo y fallaba a menudo. Decisión: rediseño del acceso con SSO, medido después en la validación.
02 Negocio y tecnología
Cálculo de ahorro: todo el flujo en una sola pantalla
esave · Tu ahorro
Extensión del resumen
Con negocio y tecnología priorizamos acotar la oferta a lo que el cliente necesita.
Frente a la propuesta de negocio
Negocio proponía
Enseñar todos los precios en burbujas de colores.
Por qué no
Dificultaban la lectura, obligaban a aprender un código de colores, sobrecargaban de información y generaban mucho scroll.
Lo que propuse
Una vista resumida con las tres mejores ofertas, un tooltip desplegable con sugerencias de precio para comparar la tarifa actual con la de ahorro y filtros accionables que agilizan la búsqueda.
03 Con el equipo técnico: diseñar para el OCR
El OCR lee la factura; el usuario tiene la última palabra
Trabajé con el equipo técnico sobre la API que lee cada factura con OCR (reconocimiento automático de texto). Ahorra mucho tiempo, pero puede equivocarse con un importe o un código. Diseñé la experiencia para que esos errores se vean donde ocurren y se resuelvan con un punto de información, de modo que el usuario los corrija antes de calcular el ahorro.
El cálculo, pantalla a pantalla
De «Calcula tu ahorro» a los datos de suministro
Calcula tu ahorro
Adjunta tu factura
Elige el tipo de factura
Sube los archivos
Tus datos de suministro
Revisa y calcula el ahorro
El cálculo de ahorro, antes y después
Recreé el flujo de cálculo de ahorro en una simulación de antes y después. La versión A reproduce el flujo original y la B, mi propuesta. Recórrelo con una factura de ejemplo en unos dos minutos.
A · Antes
No se detectan los errores ni se sugiere al usuario qué cambiar ni cómo hacerlo
B · Mi propuesta
Puntos de información accesibles que guían al usuario hacia la reformulación
Tras el análisis inicial con dos agentes, validé con un grupo más amplio: test de usabilidad y encuestas a 20 agentes.
−68 %
Menos errores al iniciar sesión con SSO
Test de usabilidad · n=20
−35 %
Menos tiempo en el cálculo de ahorro
Test de usabilidad · n=20
Método: test de usabilidad con 20 agentes que usan eSave, sobre dos tareas, iniciar sesión con single sign-on (SSO) y completar los procesos clave, comparando el flujo anterior con el rediseñado. El SSO lo implantó ingeniería y el rediseño del flujo de acceso lo hice yo. Medí los errores al iniciar sesión y el tiempo hasta completar cada tarea.
05 Conclusión
Un cálculo que se entiende a la primera
Decidir con negocio y tecnología
Tres mejores ofertas y filtros en lugar de burbujas de colores, con el objetivo de reducir el scroll, facilitar la elección y evitar una interfaz sobrecargada.
Automatización con el usuario al mando
El OCR y el cálculo automatizan el proceso, pero el usuario revisa, corrige y tiene siempre la última palabra.
Simulación UX/UI: tu información clave de un único vistazo
Partí de la demo pública y de un benchmark del sector para formular proto-personas e hipótesis de necesidades. Las convertí en una ficha de cliente 360°, un MVP prototipado con IA y un design system que lo sostiene.
Proyecto personal: no es un encargo de Ibercaja ni un producto en producción. Parto de su demo pública y las pantallas usan datos de demo, no reales.
Ampliar
Punto de partida
Partí del análisis de la demo y de un benchmark de herramientas del sector para identificar oportunidades y formular hipótesis sobre las necesidades de los usuarios de banca de empresas.
Lo que decidí yo:
Es un proyecto personal: todas las decisiones son mías, del research al design system.
Prioricé una ficha de cliente 360º y toda la posición en una sola vista.
Reduje tres avisos apilados a uno solo y dejé al gestor siempre visible.
Cómo lo hice
El proceso, tal y como fue
01AnalizarLa demo pública de Ibercaja y un benchmark del sector
02SuponerProto-personas e hipótesis, pendientes de contrastar con clientes reales
03ExplorarCuatro alternativas: ficha de cliente, fichas por producto, navegación y contacto
04PriorizarFicha de cliente 360º y toda la posición en una sola vista
05SimplificarTres avisos apilados reducidos a uno; el gestor siempre visible
06SistematizarUn design system para que la posición escale sin perder claridad
01 Research
¿Qué queremos descubrir?
Benchmark
Análisis de referentes del sector financiero para identificar buenas prácticas y oportunidades
Proto-personas
Definí proto-personas de clientes de empresa a partir del benchmark y del análisis de la demo, para formular hipótesis sobre sus necesidades
Hipótesis a validar
Cada necesidad queda como hipótesis, pendiente de contrastar con clientes reales
Hipótesis de las proto-personas
Qué necesitarían los usuarios de banca empresa
No son entrevistas reales: son necesidades que formulé con proto-personas, y las frases resumen cómo las expresaría cada una.
Ficha de cliente centralizada
Entender de un vistazo quién soy, ver mis datos vinculados a la cuenta a la que estoy accediendo
“Me gustaría acceder y ver la información de mi empresa vinculada a la cuenta y productos contratados”
Toda su posición en una pantalla
Poder ver de un único vistazo la situación global de mi cuenta y el detalle de los diferentes productos contratados
“Quiero poder ver y personalizar en pantalla toda la información relevante de mi cuenta y poder acceder al detalle si lo considero necesario”
Contacto claro con el gestor
Necesitan saber cómo contactar con su gestor, o agendar una cita en el caso de necesitarlo
“Quiero saber quién es mi gestor, y cómo y cuándo puedo ponerme en contacto con él”
Próximos pasos del flujo
¿Qué tengo que hacer desde aquí? Necesito identificarlo rápidamente (Firmar, transferencia...)
“Si tengo alguna tarea pendiente me gustaría saber cuál es, y tenerlo identificado claramente”
Tablero de research
De la demo a la proto-persona
Así ordené el research: lo que encontré en la demo y la proto-persona que salió de ahí. Toca el tablero para verlo a tamaño completo.
De la demo a la proto-persona
02 Ideación
Alternativas exploradas
Con los insights comparé cuatro alternativas: ficha de cliente, fichas por producto, modelo de navegación y área de contacto.
Ficha de cliente
Que nos ofrezca una visión en todo momento de dónde nos encontramos
Datos por producto
Fichas de resumen por producto que nos ofrezcan una foto ágil y personalizada de la situación financiera
Modelo de navegación
Detectar las acciones que deben llevar a cabo a través de un modelo de navegación definido
Área de contacto
Visible, que facilite y genere confianza al usuario
Visibilidad de acciones
Dar visibilidad a las acciones pendientes por parte del usuario
Personalizar
Poder personalizar la vista en función de las necesidades del usuario
Ocultar saldos
El saldo es visible, pero el usuario puede ocultarlo si lo prefiere
Agendar cita
Además de ver con claridad quién es su gestor, el usuario puede pedirle cita
03 Solución
Toda la posición en una pantalla
Rediseñé la posición global de Ibercaja empresas: la ficha de cliente arriba, la información ordenada por prioridad y acceso directo a las acciones principales.
Menos incertidumbre
Hice visible quién es el gestor y cómo contactarle. Pensé también en usuarios con menos soltura digital, que encuentran ayuda a través de un canal cercano
Accesibilidad a la información relevante
Centralicé la ficha de cliente y los productos contratados (cuentas, tarjetas...) para que el usuario disponga de una vista panorámica de la información clave en una pantalla
Ficha de cliente. Vista 360º
Información clave de la empresa desde un único punto para facilitar la comprensión
Cuentas, tarjetas y TPV
Visibilidad inmediata sobre posiciones, saldos y disponibilidad. Acceso ágil al detalle de la cuenta
Avisos. Priorización de información
Alertas en primer plano, detectando oportunidades y necesidades del flujo que permitan al usuario anticiparse
Acceso a gestor
Atención personalizada. Acceso directo al gestor y acompañamiento en momentos de necesidad
Vista de saldo
Experiencia adaptada a las necesidades del usuario, ofreciendo control sobre la visualización, a través de una experiencia personalizada
04 Propuesta MVP
Cross-selling alineado con el consumo de la empresa
Sobre el MVP propuse un módulo de cross-selling: ofrece otros productos alineados con el uso que la empresa hace de los que ya tiene contratados.
Ibercaja empresas · Posición global
Qué generé: un prototipo animado del módulo de cross-selling dentro de la posición global, con los datos de la demo.
Para qué: ver la propuesta en movimiento y en su contexto real antes de cerrar el diseño de detalle.
Limitaciones: trabaja con datos ficticios y muestra la idea, no la valida: no sustituye un test con usuarios.
Datos de la versión demo, no reales.
RelevanteParte de lo que la empresa ya usa.
En contextoSin salir de la posición global.
ModularUn módulo más, sin rediseñar la vista.
De la demo a mi propuesta
Recreé la posición global en una simulación de antes y después. La versión A es la demo actual de Ibercaja empresas, el punto de partida. La B es mi propuesta, tal como la diseñé en Figma, convertida en una pantalla navegable. Las seis mejoras están numeradas.
A · Antes
Tres avisos apilados, solo una tabla de cuentas a la vista y ningún acceso al gestor
B · Mi propuesta
Ficha de cliente 360º, toda la posición en una vista, el gestor siempre visible y un único aviso
Un sistema para que la posición global escale sin perder claridad
Con la solución definida, audité la pantalla y definí un sistema de diseño basado en Material Design 3: tokens, componentes con variantes y estados, iconos y documentación. Se mantiene la identidad de Ibercaja (azul de marca, estructura en tres columnas y módulos); el sistema corrige contraste, jerarquía y consistencia. Es una propuesta dentro de la simulación, no el sistema oficial
de Ibercaja.
Color · paletas tonales: blue, red, neutral, success y warningTipografía · escala de titulares, cuerpo, etiquetas e importesIconos · 46 iconos de una sola familia
Componente · Banner
Un mismo componente con cuatro variantes: cada color corresponde a un tipo de mensaje, con su icono y su acción.
Aviso
Tienes documentación pendienteRevisa la documentación caducada y las tasaciones pendientes de pago.
Ver aviso
Información
Tu extracto de octubre ya está disponiblePuedes descargarlo en PDF desde la ficha de cada cuenta.
Ver extracto
Error
No hemos podido cargar tus tarjetasRevisa tu conexión e inténtalo de nuevo en unos minutos.
Reintentar
Éxito
Documentación enviada correctamenteTu gestor la revisará y te avisará cuando esté validada.
Ver estado
Cómo lo hice: la auditoría, las decisiones y la revisión son mías. Usé IA para acelerar la construcción en Figma (variables, variantes y documentación) y revisé cada pieza antes de darla por buena.
06 Conclusiones y aprendizajes
Conclusiones y aprendizajes
La investigación evidenció la necesidad de combinar una vista de toda la posición del cliente con acceso rápido a las acciones más relevantes. La exploración de diferentes modelos permitió evolucionar hacia una arquitectura modular, ofreciendo familiaridad, personalización y escalabilidad.
Una posición global bien jerarquizada reduce la incertidumbre y hace visibles las acciones pendientes.
AprendizajeIbercaja empresas
Cross-selling: la posición global es el lugar natural para introducirlo, ofreciendo productos relevantes en contexto a partir de lo que el cliente ya tiene contratado, sin romper la claridad de la vista.
La arquitectura modular permite añadir nuevos módulos, como el cross-selling, sin rediseñar la vista.
Tres apps móviles para tres clientes muy distintos: del mockup a la tienda.
Como Product Owner fijé con cada cliente el alcance del MVP; como Product Designer, un mockup que cerraba la solución antes de la UI. Research exprés, benchmark y QA con front hasta publicar tres apps en las tiendas.
3apps publicadas en App Store
3clientes de sectores distintos
En producción
El reto:
En una consultora no hay un producto, hay muchos: cada cliente llega con su sector, su marca y un
presupuesto cerrado. Había que entregar apps a medida sin empezar de cero en cada proyecto.
Lo que decidí yo:
Como Product Owner, definí el alcance del MVP y las prioridades de cada app con el cliente.
Como Product Designer, diseñé el mockup que fijaba la solución completa antes de la capa visual.
Tras la maquetación, revisé con front la
consistencia entre el flujo planteado y lo desarrollado (QA) hasta publicar.
Cómo lo hice
El proceso, tal y como fue
01AcordarComo PO, alcance del MVP y prioridades de cada app con el cliente
02DescubrirEntrevistas cortas y benchmark de apps del sector
03DefinirUn mockup que fija la solución completa antes de la capa visual
04Dar marcaMi compañero de UI aplicaba la identidad sobre el mockup
05RevisarQA con front: el flujo planteado y lo maquetado, coherentes
06PublicarTres apps publicadas en la App Store
01 Mi rol
Definía la solución y respondía de ella hasta la tienda
No diseñaba pantallas sueltas. Era el puente entre el cliente y el equipo: decidía qué se construía, lo definía en un mockup y comprobaba con front que lo maquetado era lo que se había definido.
Product Owner
Qué se construye y en qué orden
Traducía los objetivos del cliente en historias y prioridades
Definía el alcance del MVP dentro del presupuesto
Fijaba criterios de aceptación para validar cada entrega
Product Designer
Cómo funciona la solución
Research exprés con el cliente y sus usuarios
Arquitectura, flujos y estados
Mockup con todas las pantallas y su comportamiento
Cómo nos complementábamos
Mockup que define la solución
Flujos, contenidos, jerarquía y comportamiento. Es el documento que sigue todo el equipo.
Capa visual de marca
Mi compañero de UI aplicaba identidad, color e iconografía sobre el mockup, sin cambiar la lógica.
Maquetación
Desarrollo construía las pantallas a partir del diseño final y las especificaciones.
Revisión tras maquetar
Consistencia entre el flujo planteado y la maquetación
Estados, errores y textos
Incidencias priorizadas hasta publicar
9:41●●● 87
Nuestros productos
Elige un tipo de vehículo para ver sus productos.
9:41●●●
Haz tu recorrido por las huellas de Santa Teresa
Recorre los lugares donde dejó huella y recibe la información de cada punto de interés.
9:41●●●
Iniciar sesión
DNI/NIE/Pasaporte*
Escribe tu DNI
Contraseña
Escribe tu contraseña
Recuérdame
He olvidado mi contraseña
02 Mi método
Un playbook que se repite en cada cliente
Como PO fijé cinco fases con un entregable claro cada una, para que el cliente supiera siempre qué iba a recibir y cuándo. En cuatro de las cinco, el responsable era yo.
FASE 1Kickoff y backlog
Objetivos de negocio, usuario principal, alcance del MVP y prioridades.
Entrego: backlog priorizado
FASE 2Discovery exprés
Entrevistas cortas y benchmark de apps del sector.
Entrego: mapa de tareas clave
FASE 3Mockup de solución
Arquitectura, flujos y todas las pantallas con su comportamiento.
Entrego: mockup validado por el cliente
FASE 4Marca y prototipo
UI aplica la capa visual; yo prototipo con Figma + IA y valido con usuarios.
Entrego: diseño final y specs
FASE 5Maquetación, QA y tienda
Reviso con front que la maquetación sea consistente con el flujo planteado y cumpla los criterios de aceptación.
Entrego: app en tienda
03 Cliente B2B y B2C
Grupo VemareRecambios de automoción · talleres y particulares
Reto: una sola app para dos clientes muy distintos, la empresa y el cliente final, con un catálogo amplio de recambios navegable desde el móvil.
Dos entornos, una sola app
Un entorno para el cliente empresa y otro para el cliente final, sobre el mismo catálogo.
Catálogo por tipo de vehículo
Turismo o vehículo industrial como primer paso, para no recorrer todo el catálogo.
Promociones
Las ofertas vigentes, accesibles desde la propia app.
Contacto directo
Canales de contacto a mano para resolver dudas y cerrar la compra.
Figma
Figma Make
Claude
Miro
Hotjar
Notion
Jira
Confluence
Visual Studio Code
Pruébalo tú
Pruébalo tú
Pruébalo tú
