Diseño de productos digitalesque generan impacto real
Transformo problemas complejos en productos digitales intuitivos y escalables, combinando research, estrategia y diseño para conectar las necesidades de los usuarios con los objetivos de negocio.
Jonatan Ruiz Rios
Diseñando productos digitales en startups y empresas tecnológicas.
Empresas
Proyectos destacados
01Banca digital
Atlas
Reduce la complejidad financiera con procesos de documentación y firma en un click
Simplifica uno de los momentos más críticos del proceso bancario.
UX & UI
Definición de flujos UI
Alineamiento transversal
Mi rolProduct designer
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
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.
Adjuntar
Escanear
Firmar
Revisar
02 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.
Insight clave
Pasamos de pensar en pantallas independientes a diseñar un modelo de interacción común.
La pregunta de diseño
¿Cómo hacemos que un proceso complejo por naturaleza se perciba sencillo y predecible?
03 Modular para reducir complejidad
Un modelo centrado en cada interviniente para gestionar documentación de forma clara y eficiente
Agrupamos 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.
Actúa sobre un documento a aportar o firmar por interviniente de forma individual.
Pendientes de APORTAR 4
SimulaciónDNIAportado
SimulaciónIRPF 2024Aportado
Solicitud3 últimas nóminasAportado
SolicitudNota SimpleAportado
04 Subida de documentos
Visibilidad total del estado y evolución de cada subida
Informamos al usuario en todo momento del estado de cada documento y de la evolución de la subida para generar confianza y evitar incertidumbre.
Añadir documento
CUM Preceptiva precontract
CUM Preceptiva precontractPDF · 1,2 MBSeleccionado
El documento se ha seleccionado y está listo para subir
Cancelar y descartar documento
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
Informamos al usuario en todo momento del estado de cada documento y de la evolución de la subida para generar confianza y evitar incertidumbre.
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
Todos los documentos Ver documentación
NombreÚltima actualizaciónEstado
06 Decisiones clave que guiaron el diseño
1
Enfoque por interviniente
Organizamos la documentación por interviniente para ordenar, individualizar la firma y ofrecer claridad
2
Modularidad
Separamos aportar, firmar y listar para simplificar y escalar la experiencia
3
Acciones flexibles
Permitimos acciones individuales y masivas para adaptarnos a cada necesidad
4
Listado como control
Unificamos y resumimos la información en un punto único de verdad
5
Consistencia
Cada acción tiene una consecuencia visible y coherente en el flujo
07 Impacto
Menos acciones, menos fricción y una gestión documental más fiable
Aportación
Sube tus documentos en un solo click
−75 %menos acciones por interviniente
Individual4 acciones
Agrupado1 acción
5 estados visibles por subidaReintento si hay error
Un único «Aportar todos» sustituye a la subida documento a documento, con el estado de cada archivo siempre visible. La gestión documental es más rápida, ordenada y fiable.
Firma
Firma todos tus documentos por interviniente
−67 %menos acciones por operación
Individual9 acciones
Agrupado3 acciones
3 intervinientes9 documentos por firmar
La firma en bloque por interviniente evita fricciones y agiliza el proceso, sin perder el control de cada documento.
Reducciones de acciones calculadas sobre el prototipo: acciones necesarias para aportar los 4 documentos pendientes de un interviniente (4 → 1) y para firmar los 9 documentos de una operación con 3 intervinientes, 4 + 2 + 3 (9 → 3), en modo individual frente a agrupado.
A medir en producciónTiempo hasta completar la documentaciónDocumentos rechazados o reintentosConsultas a soporte
08 Aprendizajes
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
Cierre del proyecto
La nueva área documental transforma la complejidad del proceso en un modelo más claro, trazable y consistente, centralizando documentación, estados y acciones alrededor de cada interviniente.
Otros proyectos
Lumen
Optimiza la lectura de tus facturas de luz y maximiza el ahorro en menos tiempo
Plataforma B2B para la gestión y optimización del ahorro energético
Research
UX Strategy
Arquitectura de la información
Prototipado
QA
Mi rolProduct Designer UX/UI
Equipo1 UX - 1 UI
Duración2 años
El reto:
Diseñar una experiencia que facilite la comprensión de los flujos clave de negocio, refuerce la identidad corporativa y sea consistente a través de la experiencia de usuario.
Bienvenido
josetlopez@lumen.es
••••••••••••
Entrar
Login Admin
Versión originalES MercadoSector ENERGÍASector TELCOJose lopez
Inicio
Registros
Procesamiento
CRM
Admin
Dashboard
Trends
Contacto con soporte
Calcula tu ahorro energético
Ahorra energía
Simulación energía
Informar precio
Solicitar factura
+11,01%Solicitudes enviadas por e-mail
+7,00%Solicitudes enviadas por Whatsapp
+1,01%Solicitudes enviadas por MSN
+5,00%Total de contratos activos
Solicitudes enviadas por e-mail2799 Solicitudes+11,01% ↗
Solicitudes enviadas por Whatsapp799 Solicitudes+7,00% ↗
Solicitudes enviadas por MSN685 Solicitudes+1,01% ↗
Simulación UX/UI: tu información clave de un único vistazo
Research
Ideación
Solución
Mi rolUX/UI & Product designer
TipoSimulación UX/UI
Punto de partida
Partiendo del análisis de la demo y de un benchmark de herramientas del sector, identificamos oportunidades y formulamos hipótesis sobre las necesidades de los usuarios en el sector banca empresa.
01 Research
¿Qué queremos descubrir?
Benchmark
Análisis de referentes del sector financiero para identificar buenas prácticas y oportunidades
Entrevistas
Entrevistas a clientes de empresas para conocer sus necesidades, expectativas y fricciones en el proceso
Focus group
Un focus group para validar patrones y detectar sus necesidades
Hallazgos de la investigación
Qué necesitan los usuarios de banca empresa
Ficha de cliente centralizada
Entender de un vistazo quién soy, ver mis datos vinculados a la cuenta a la que estoy accediendo
75%
6 de 8 entrevistados lo mencionan
“Me gustaría acceder y ver la información de mi empresa vinculada a la cuenta y productos contratados”
Visión global de su situación
Poder ver de un único vistazo la situación global de mi cuenta y el detalle de los diferentes productos contratados
75%
6 de 8 entrevistados lo mencionan
“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
63%
5 de 8 entrevistados lo mencionan
“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...)
83%
5 de 6 participantes en el focus group lo mencionan
“Si tengo alguna tarea pendiente me gustaría saber cuál es, y tenerlo identificado claramente”
02 Ideación
Alternativas exploradas
A partir de los insights obtenidos analizamos diferentes alternativas con la finalidad de alcanzar una solución que se ajuste a las necesidades detectadas, ofreciendo así mayor valor al usuario
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
01
Visibilidad de acciones
Dar visibilidad a las acciones pendientes por parte del usuario
02
Personalizar
Poder personalizar la vista en función de las necesidades del usuario
03
Ocultar saldos
Ofrecemos visibilidad sobre el saldo, pero permitimos ocultarlo si el usuario así lo decide
04
Agendar cita
No solo ofrecemos una vista clara sobre el agente, sino que ofrecemos la opción de calendarizar una cita
03 Solución
Tu información clave de un único vistazo
Mejoramos la experiencia actual de Ibercaja empresas, ofreciendo mayor claridad, jerarquización de la información y acceso directo a las call to action principales.
Menos incertidumbre
Visibilizamos quién es el gestor, ofreciendo confianza, agilidad y cercanía. Tenemos presentes a usuarios con menores capacidades tecnológicas y ofrecemos ayuda al sector empresas a través de un canal de proximidad
Accesibilidad a la información relevante
Centralizamos 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
01
Ficha de cliente. Vista 360º
Información clave de la empresa desde un único punto para facilitar la comprensión
02
Cuentas, tarjetas y TPV
Visibilidad inmediata sobre posiciones, saldos y disponibilidad. Acceso ágil al detalle de la cuenta
03
Avisos. Priorización de información
Alertas en primer plano, detectando oportunidades y necesidades del flujo que permitan al usuario anticiparse
04
Acceso a gestor
Atención personalizada. Acceso directo al gestor y acompañamiento en momentos de necesidad
05
Vista de saldo
Experiencia adaptada a las necesidades del usuario, ofreciendo control sobre la visualización, a través de una experiencia personalizada
04 Satisfacción
Hallazgos de satisfacción
Recogidos a través de un test de usabilidad y una breve encuesta a los participantes.
Encontrar información cuesta menos
Reducción del tiempo para localizar información
Se entiende mejor la posición global
Mejor comprensión de la posición global
Las alertas se descubren
Descubrimiento de alertas
Contactar con el gestor es más fácil
Facilidad de contacto con el gestor...
Valoraciones cualitativas recogidas en el test y la encuesta.
05 Conclusiones y aprendizajes
La investigación evidenció la necesidad de combinar una visión global de 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.
Aprendizajes
Una posición global bien jerarquizada reduce la incertidumbre y hace visibles las acciones pendientes.
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.
Otros proyectos
Atlas
Reduce la complejidad financiera con procesos de documentación y firma en un click
Diseñando una relación más consciente con las redes sociales
Research
Análisis de usuario
Journey
Ideación
Prototipado
El reto:
Las redes sociales forman parte de nuestra identidad y de cómo nos relacionamos, pero determinadas dinámicas pueden generar una relación poco consistente con su uso.
Objetivo:
Explorar cómo transformar estas dinámicas en una experiencia más positiva, ayudando al usuario a recuperar el control sobre su relación con las RRSS.
01 Entender el problema
Research y benchmark para identificar comportamientos de riesgo y oportunidades de mejora.
Presión social
Control
Consumo consciente
Personalización
Educación
02 Escuchar a los usuarios
Entrevistas y focus groups a jóvenes de 18 a 27 años.
46%
Experimenta algún problema vinculado a su relación con las RRSS
50%
Encuentran presión a través del uso de las RRSS (apariencia, comparación, etc...)
60%
Siente la influencia que generan las RRSS en su comportamiento y decisiones
03 Del insight a la oportunidad
Construimos el Journey AS IS para detectar momentos de fricción y diseñamos un escenario TO BE más consciente y equilibrado.
Journey AS ISMomentos de fricciónEscenario TO BEMás consciente y equilibrado
04 Diseñar la experiencia
De los insights al producto.
05 La solución
The_ITY Connection propone herramientas que empoderan al usuario para tomar decisiones más conscientes.
Visibilidad clara del tiempo y hábitos
Personalización de contenidos y límites
Interacciones más significativas
Educación y recursos para una relación saludable
06 Roadmap · Escalabilidad
Visión a futuro a través de un producto que evoluciona con las necesidades del usuario.
DescubrimientoQ1Validar y lanzar
MVP
ProductoQ2Profundizar
Recomendaciones IA
Detección de hábitos
Contenido educativo
CrecimientoQ3Personalizar
Personalización avanzada
Comunidades positivas
Calendario-Bienestar-Salud...
ImpactoQ4Escalar impacto
Impacto social
Alianzas educativas
Nuevos modelos de ayuda
Otros proyectos
Atlas
Reduce la complejidad financiera con procesos de documentación y firma en un click
