UX/UI. Multidevice
Case of study Herramienta de gestión para administradores de edificios y fincas.
A Continuación analizaremos paso a paso el proceso realizado para la ideación de una herramienta digital desde cero, basándonos en el proceso de 4 pasos del design thinking de Empatizar, definir, idear y prototipar.
Case of study Herramienta de gestión para administradores de edificios y fincas.
A Continuación analizaremos paso a paso el proceso realizado para la ideación de una herramienta digital desde cero, basándonos en el proceso de 4 pasos del design thinking de Empatizar, definir, idear y prototipar.
Esta solución innovadora busca optimizar la gestión de incidencias y solicitudes de servicios en comunidades de vecinos así como agilizar la comunicación entre las partes implicadas en el proceso.
En nuestras primeras conversaciones con el cliente, identificamos una necesidad clave: desarrollar una herramienta multiplataforma capaz de atender las demandas de tres perfiles de usuario distintos. Por un lado, el administrador de fincas, encargado de la gestión general del edificio.
Por otro, los proveedores de servicios (albañiles, fontaneros, etc.), quienes ejecutan las tareas. Y finalmente, los presidentes de comunidad, quienes inician las solicitudes de servicio. Esta herramienta debe facilitar la interacción entre estos tres actores y optimizar la gestión de incidencias."
Desarrollé una estrategia de investigación para comprender:
- ¿Cuáles son las necesidades ideales de un usuario para necesitar un administrador de fincas? (Identificar las funciones más utilizadas.¿qué valor aporta al usuario?)
- ¿Por qué y cómo utilizarían una app para realizar este proceso
- ? (Identificar objetivos, motivaciones y expectativas al usar estas funciones.¿Qué los impulsa a usar estas funciones?)
- ¿Cuáles son los problemas que enfrentan los usuarios al enfrentarse a una incidencia en un edificio? (¿Qué les impide utilizar estas funciones? ¿Cuáles son sus frustraciones y puntos débiles?)
- ¿Qué hacen actualmente los usuarios para intentar superar estos problemas? (Comprender las actividades/comportamientos/acciones/pensamientos/sentimientos del usuario ideal en el proceso de entrevista)
Una vez realizadas las entrevistas y desarrollado un Empathy Maps pudimos determinar cuales eran los principales perfiles, en nuestro caso la herramienta la usarán 3 usuarios completamente distintos y dicha investigación se desarrolla en torno a estos 3 usuarios, a continuación los definimos en detalle. Esta certeza en disponer de 3 usuarios tan distintos nos llevó a determinar que para Usuario administrador de fincas el interfaz se centrará en el desktop mientras que los otros dos usuarios usaran una versión web responsive mobile de la herramienta, sin necesidad de descargar app.
No existen respuestas "correctas" o "incorrectas" al llegar a una solución que está impulsada user centered. La importancia radica en hacer las preguntas correctas como diseñadores, lo que nos permitirá abordar los desafíos correctos que más beneficiarán a los usuarios.
Definiendo las características
Con las ideas de la lluvia de ideas, comenzamos a definir las características que beneficiarían su necesidad principal. Al idear múltiples soluciones posibles basadas en los datos del usuario, mostramos la magnitud de la capacidad de diseño centrado en el usuario que es integral para crear buenas experiencias de usuario.
Una vez acabada la fase de ideación de funcionalidades pasamos a desarrollar los flujos de usuarios, comenzamos por un flujo principal que resume el proceso “completo” de la herramienta usado por el usuario, tras eso comenzamos a desarrollar cada tarea que el usuario realiza con la herramienta dejando claro los pasosy la arquitectura de dicha tarea
De la misma forma en nuestro caso hemos hecho lo mismo para definir las fases de las incidencias que se gestionan con la herramienta, cuando estas fases cambian de forma manual por intervención del usuario y cuando son automáticas así como permisos y reestricciones de la herramienta que van en función a la fase en que se encuentran, así como la arquitectura de contenido del sitio.
Una vez acabado el moodboard el cual dividimos tanto a nivel estético como por pantallas y funcionalidades pasamos a general los wireframes divididos por tareas. En mi caso prefiero detallar bastante los wireframes en la medida de lo posible para ir resolviendo cuestiones de diseño que ya quedan definidas desde bien temprano para una futura fase de diseño final.
A continuación vemos como vamos desarrollando un sistema de diseño basado en la metodología de Atomic Design de Brad Frost, realizando un diseño sólido peroflexible, modular, siempre desde la filosofía de anidar elementos para realizar cambiose iteraciones de la forma mas eficiente posible.
Las decisiones en lo que a espaciado y grids se refiere se toman en consideración de grids flexibles de 4px, o sea, múltiplos de 4, tanto en grids como en round corners, o micro espaciado de elementos.
Para los iconos, trabajamos con un set de iconos blanco y negro en 3 tipos de tamaños distintos, también múltiplos de 4: Tamaño 16px, 24px y 32px.
Por último vamos creando componentes y añadiéndolos al flujo de trabajo y al prototipo, componentes que nos ahorraran tiempo cuando haya que iterar la herramienta, en nuestro caso hemos desarrollado componentes capaces de adaptarse a layouts mobile y desktop puesto que tenemos la certeza gracias al research que al tener tan distintos perfiles de usuarios la herramienta será usada en diferentes formatos.
