¿Qué es el Diseño UX/UI?
El diseño UX/UI (User Experience/User interface) es una disciplina que tiene el objetivo de proporcionar al usuario una forma de navegar y utilizar funciones de un producto o servicio de forma sencilla, cómoda e intuitiva, para así conseguir una experiencia de usuario lo más agradable y positiva posible, en general, satisfacer las necesidades de los usuarios.
Los dos términos de UX/UI suelen ir de la mano, normalmente facilitará mucho el flujo de trabajo de ser un/a diseñador/a UX con nociones de UI, pero en realidad, no tienen nada que ver. Son dos profesiones que pueden trabajar tanto por separado como conjuntamente, y ambas son esenciales para el desarrollo de un producto.
Los diseñadores UX/UI nos centramos en el entendimiento total de nuestro producto. Para poder dar forma al proyecto y que nuestro objetivo sea conseguido, utilizamos una serie de habilidades diferentes entre sí para diseñar una nueva experiencia del usuario que contempla 3 aspectos principales:
¿En qué consiste nuestro trabajo de diseño UX en Deale?
La experiencia de usuario es el proceso que se inicia cuando nuestro usuario navega en la interfaz digital. Para llegar al producto final, tenemos que pasar por una serie de fases de desarrollo para que cada una de las decisiones tomadas en el proceso de diseño tengan en cuenta la necesidad del usuario:
Fase de investigación y análisis (research)
Cuando empezamos a crear un flow(1), primero debemos conocer al usuario, cuáles son sus necesidades, y cuál es la mejor manera para que ejecute las acciones.
Para ello, desde diseño hacemos research(2). Buscamos plataformas similares, analizamos al usuario y lo definimos como nuestro target (‘’user persona(3)’’ e incluso redactamos entrevistas para conseguir su opinión más cualitativa (4).
¿Cómo definimos nuestro target?
Con la creación de los “user persona (3)”. Que consiste en definir el tipo de usuario que usará nuestro producto, una descripción de un usuario arquetípico que nos servirá de guía a lo largo del proceso de diseño. Debemos empatizar con este, entender qué es lo que siente, qué necesidades tiene y entender por qué usa nuestro producto o servicio.
Todo esto nos servirá para recopilar información relevante de los usuarios, extrayendo patrones de comportamiento, características clave de estos. Debemos usar datos lo más cerca posible de la realidad.
Es importante ir revisando el documento y actualizarlo si se encuentran nuevos puntos de vista o características.
Una vez tenemos a los diferentes usuarios definidos, es importante analizar qué sentimientos tienen a lo largo del proceso de navegación dentro de la plataforma. Para esto, tenemos que desarrollar el customer journey(5) que básicamente es el conjunto de interacciones que tiene el usuario con nuestro producto o servicio hasta conseguir algo.
El ejemplo más simple de una interacción en una plataforma sería un usuario que quiere comprar algo online. El proceso sería desde que busca el producto, lo añade a la cesta, pone sus datos bancarios y finaliza la compra. En Deale, esta interacción sería desde que el usuario entra en nuestra plataforma y se registra, hasta que hace match con una empresa y empiezan el proceso del Q&A y sube su LOI. Gracias a la creación del customer journey(5) podremos ponernos en la piel del usuario, saber qué frustraciones puede tener en un momento en concreto, que necesita y cómo podemos mejorar.
Todos estos documentos nos servirán para sacar insights(6) relevantes a la hora de seguir construyendo nuestra plataforma y dar el mejor servicio posible a nuestros usuarios.
Fase de creación y lluvia de ideas (Brainstorming(7))
Una vez definido el usuario, cuáles han sido sus puntos débiles y fuertes, sus necesidades y frustraciones, pasamos a la primera fase de creación dónde construimos las diferentes etapas del recorrido del usuario que conducen al objetivo del flow.
Este es un punto clave dentro de nuestro proceso. En él vamos a materializar la propuesta de valor que hemos estado gestando en los pasos previos. Una vez sabemos todas las vistas y funcionalidades en las que el usuario interactuara con la plataforma, nos permitirá tener mayor velocidad y fluidez en el desarrollo de esta fase.
En Deale especialmente, empezamos a trabajar de lo más abstracto y general a los más concreto y particular:
Nuestro primer objetivo es la realización del wireframe(8), en el que definimos el flujo de navegación y los bloques de contenido, teniendo en cuenta la posición y el funcionamiento de los diferentes componentes a modo de esqueleto.
Esta fase nos sirve para generar una estructura de forma rápida de lo que queremos que sea la pantalla y poder identificar y ubicar los puntos importantes de esta.
Implementación (funciones de UI)
En esta fase es cuando cambiamos el rol a funciones de UI*, dónde se empiezan a constituir los modelos más o menos representativos e interactivos que representen las ideas de todo lo estudiado anteriormente como diseñadoras UX.
No obstante, no se desarrolla el producto final, para ello, antes pasamos a la fase de los wireframes de alta fidelidad y el prototipado, que nos proporciona la versatilidad de poder testear el producto con usuarios en las primeras etapas y poder detectar problemas de contenido y navegación. Esto nos ayuda a:
En este proceso tratamos de guiar lo mínimo a los usuarios, les planteamos problemas reales y observamos cómo lo resuelven.
Una vez definido y testado los aspectos estructurales y de funcionamiento, pasamos a la fase donde resolvemos todos los problemas detectados en las fases anteriores, y dotamos con los acabados visuales finales (diseño UI*) para que nos ayuden a obtener una buena experiencia de usuario.
Durante esta fase, se tienen en cuenta muchos puntos, y en nuestro caso, para que la plataforma siga su proceso correctamente, hay que tener mucha comunicación con el desarrollo Frontend y Backend en cada decisión tomada.
Una vez los diseños han sido validados por todo el equipo de producto, trasladamos el diseño a desarrollo con nuestra principal herramienta de trabajo Figma. Esta herramienta nos permite reducir el gap entre diseño y desarrollo, facilitando así la implementación, y que sean ellos los encargados de abordar el flow(1) planteado y construir dicha interfaz mediante código y lógica.
Seguimiento en PROD y métricas
Una vez entregado el diseño al equipo de Frontend realizamos un seguimiento conjunto para asegurar que cualquier duda que pueda surgir quede resuelta. En el caso de que se saquen casuísticas no planteadas, o dudas al plantear la lógica, desde diseño se buscan vías para proporcionar una solución.
Una vez implementado el producto, los usuarios reales lo usan e interactúan con él. Es aquí donde medimos los eventos(9) que colocamos en nuestros journeys, para tener visibilidad sobre cómo se está entendiendo el producto que hemos diseñado. A partir de aquí, lo que hacemos es sacar insights(9), para con esto volver a la fase de brainstorming, dónde modificamos y creamos mejoras en el diseño.
¿En qué consiste nuestro trabajo de diseño UI en Deale?
Nosotras, como hemos comentado anteriormente, introducimos las nociones del diseño UI en la fase de implementación, donde se diseña toda la experiencia estética de la plataforma.
Las funciones que utilizamos como diseñadoras UI están enfocadas a los aspectos gráficos y visuales de la interfaz, es decir, todos esos elementos que constituyen el flow y serán perceptibles para el usuario.
Cuando hablamos de los aspectos gráficos abordamos una serie de características como por ejemplo, el cromatismo, la tipografía, tamaños, layouts, estructuras, animaciones, etc. Y todas ellas, vienen solventadas gracias a tener una gran librería bien organizada. En nuestro caso, Figma, nuestra gran herramienta de trabajo, forma parte de nuestro día a día y con ella se diseñan todos los proyectos que salen de Deale.
Figma Deal
Esta herramienta, aparte de permitirnos trabajar todos los miembros del equipo a la vez, nos permite tener una librería con todos los componentes organizados y categorizados (Sistema de diseño Deale*), y poderlos utilizar en diferentes proyectos de tal manera que se puedan reusar sin tener que volverlos a crear constantemente. Esto nos agiliza el flujo de trabajo, y nos evita inconsistencias entre diseños que presenten layouts similares.
Sistema de diseño de Deale
El sistema de diseño de Deale nos garantiza la consistencia de nuestro producto. Nos ayuda en la experiencia de usuario y nos acorta el tiempo de ideación, elaboración y desarrollo. Siempre está en constante evolución, ya que nunca dejamos que se estanque, sino que siempre esté en constante dinamismo para conseguir un producto capaz de escalar y crecer rápidamente de forma controlada.
Como conclusión, en Deale le otorgamos mucha importancia al hecho de ofrecer una interfaz accesible, funcional, práctica, y gráficamente clara. Nos ponemos como obligación que los usuarios sientan ganas de quedarse en la plataforma y que puedan descubrir todos sus funcionalidades de una manera rápida y entendible. También presentar una imagen de marca clara, fuerte, positiva, y de calidad en consonancia con la identidad visual de Deale.
- Flow: Conjunto de varios pasos que sigue el usuario para conseguir un fin.
- Research: Trabajo creativo y sistemático realizado para aumentar el acervo de conocimientos.
- User Journey: Se refiere a la experiencia interactiva del usuario, construida estratégicamente y diseñada para guiar a alguien hasta la toma de decisión.
- Cualitativa: Existen dos tipos de datos, los cuantitativos que nos dan una visión de la cantidad (ej. 44 personas al día se suscriben en la plataforma) y los cualitativos, que nos dan una visión más profunda, de ‘’calidad’’ (ej. a los usuarios les parece que el rojo es demasiado agresivo para usarlo como color corporativo).
- Customer journey: Conjunto de interacciones que tiene un consumidor con una organización en el proceso de comprar o conseguir algo. La traducción literal del concepto sería algo parecido a “viaje del cliente”.
- Insights: Un insight se reduce a un hallazgo, una conclusión, un dato, un nuevo camino, que anteriormente no se había detectado y que será el punto de partida para trabajar en nuevas propuestas, oportunidades y soluciones.
- Brainstorming: También conocido como lluvia de ideas o tormenta de ideas, es una técnica creativa grupal cuyo objetivo es la generación de nuevas ideas sobre un tema o problema concreto en un ambiente relajado.
- Wireframes: Los wireframes son bocetos donde se representan visualmente y de forma esquemática la estructura de un producto digital. Se pueden realizar de forma digital o a mano. Lo importante es mantenerse alejado de los acabados visuales finales.
- Eventos: Son todas aquellas interacciones que el usuario hace en nuestro producto que podemos cuantificar, nos dan visibilidad sobre el seguimiento de journeys y procesos y si el usuario está clicando donde nosotros queremos que lo haga.