Isy: Segunda parte de cómo acercar el E-commerce a nuestros mayores
Si todavía no has leído la primera parte de este proceso de diseño te invito a que lo hagas en esta historia. ¡Espero que te guste!
Continuando con el trabajo que estaba realizando con mi equipo, tocaba ahora enfrentarse a la tarea de dar forma y vida a nuestro proyecto. Lo primero de todo fue plantearse la identidad de nuestro producto. Teníamos claro el público al que dirigirnos y nuestros puntos fuertes, pero había ahora que traducir todo esto.
Voz y tono
- Cercano
- Amigable
- Honesto
- Personal
Value Proposition
- Cómodo
- Ágil
- Intuitivo
- Fresco
Combinando estos puntos característicos, salieron sobre la palestra varios nombres. Finalmente nos decidimos por Isy. Este nombre surge de la palabra easy en inglés pero escribiéndolo de manera castellanizada. Hace referencia a la facilidad de uso en el día a día y que cualquier usuario puede utilizarlo.
Arquitectura de la información
Continuando con el diseño de interacción, todavía quedaban unos cuantos pasos más antes del enfrentamiento al prototipo.
Para definir nuestro arquitectura, dejamos claro tres puntos:
- Consistencia
- Escalabilidad
- Accesibilidad
La división la realizamos de manera ordenada y agrupada en categorías, con el objetivo de tener una definición clara de la estructura.
- Una página de Onboarding que nos llevaría a una Welcome Page dónde registrarnos o hacer login.
- Una vez dentro, entraríamos en nuestra Home, la cuál se divide en:
Escáner
- Realizamos el escaneo de productos y consultamos sus fichas
- Podemos ver productos relacionados
Productos
- Los productos se dividen en categorías (frutas, carne…) y otras personalizadas (ofertas, recomendaciones…)
Pedidos y Listas
- Podemos consultar y crear nuevas listas de productos personalizadas
- Consulta de nuestros pedidos
Mi Cuenta
- Opciones de personalización, ayuda e información
Ya con esta parte cerrada, había que completar dos asuntos más antes de pasar a nivel visual: user cases y user flows.
User Cases
Tocaba ahora definir cómo será la interacción entre nuestro sistema y el usuario. La idea principal de realizarlo fue explicar cómo el sistema debería comportarse y cuál es el proceso. Además, ayudan también a saber qué hacer si algo va mal y entender el lado funcional del proyecto y poder desarrollar buenos requerimientos funcionales o técnicos.
User Flows
Gracias a los flujos, conseguimos involucrar las distintas tomas de decisiones que nuestros usuarios deberían realizar durante el uso de nuestro producto. Esto nos ayudó enormemente a entender y comprender cómo el usuario va a pensar e interactuar.
Ya se venía por fin el reto de la parte visual y había que empezar poco a poco y con buen pie. En un primer ejercicio, el equipo optó por trabajar de manera individual realizando una serie de sketches a mano para dejar fluir un poco las ideas que habíamos ido creando en nuestras cabezas a lo largo del proceso. Una vez habíamos terminado este proceso, tocaba ponerlo en común y traducir todas estas ideas y apreciaciones a wireframes que se acercasen lo máximo posible a lo que sería finalmente Isy a nivel visual.
La idea que plasmamos fue la de un proceso de interacción básico con Isy: usar nuestro escáner para consultar un producto, añadirlo a nuestra cesta, hacer un pedido y añadir lo que habíamos comprado a una lista creada previamente.
Prototipo
Para esta parte del proceso, surgió un challenge de última hora: enfrentarse solo tanto al diseño visual y prototipado como al testing. Decidí aceptarlo pese a la carga de trabajo que iba a tener que soportar, ¿el por qué? Porque quería vivir de primera mano todo el proceso de creación de un diseño visual de una app y aprender todos los factores a los que un diseñador debe enfrentarse para sacar una primera versión UI que convenza y pueda llevarse a un testing serio con usuarios.
Decidí englobar todas mis ideas bajo la premisa del Atomic Design: crear piezas pequeñas para ir haciendo cada vez bloques más complejos y reutilizables, agilizando enormemente el proceso de diseño y dando uniformidad y calidad a lo que estaba haciendo. Comencé mi diseño creando una paleta de colores, basada en el color verde (confianza, cercanía, éxito), y generando una serie de tipografías bien definidas. Gracias al trabajo con componentes y variants pude acelerar enormemente la reutilización de recursos dentro del diseño. Además de esto, y para los que tenemos TOC, trabajé sobre una grid de 8 píxeles y 2 columnas para que todo estuviese dónde debería estar. Aquí está el resultado tras estudiar los resultados del testing y realizar un rediseño completo de toda la aplicación:
Además de este prototipo también preparé el sistema de diseño completo de Isy para poder pasárselo al equipo de desarrollo, en caso de tenerlo. Mi idea principal era documentar al 100% todos los elementos que componen mi diseño y dejar que cualquiera le echase un ojo. ¿Te animas a investigarlo un poco? El sistema de diseño lo preparé con zeroheight y te dejo aquí mismo el link para que puedas verlo.
Testing
Ya estamos llegando al final de este proyecto, ¡espero que no te estés aburriendo! Tocaba ahora la parte clave de todo este proceso de diseño UX/UI: llevarlo al testing con usuarios reales para el primer prototipo realizado.
Mi principal objetivo con el test era el de analizar la usabilidad y la facilidad de uso de esta primera versión de Isy. Para ello, el test lo realicé con un total de 6 usuarios con edades comprendidas entre los 20 a 60 años, focalizándome en usuarios con rangos de edad mayor de 40 años. Estos son el target principal al que nos dirigíamos desde el inicio del proyecto.
Se utilizó Maze como herramienta. Durante el testeo se analizaron tanto misiones concretas, con una serie de pasos a cumplir, como el comportamiento del usuario durante todo este proceso de testeo. Al final del test se invitó a cada usuario a dar sus sensaciones usando la app y que mejoras añadirían ellos.
¿Quieres probar el test? Te lo dejo aquí abajo.
Al final del testing, saqué varias conclusiones y patrones muy buenos, e incluso di con claves que no pensaba que iba a dar. La verdad es que la fase de testing cada vez me sorprende con algo nuevo y demuestra la capacidad de mejora continúa que tiene cualquier tipo de producto digital.¡Confiemos siempre en nuestros testers!
Patrones
- El botón flotante no fue entendido por todos los usuarios. Sobre todo por los más mayores.
- La orden para añadir el pedido que acabamos de hacer a una lista ya existente, o nueva, no quedaba muy clara con el texto que contiene el botón que ejecuta esa lógica.
- Dos usuarios no supieron añadir el producto buscado. Buscaron el producto y, cuando se le presentó, le dieron directamente al carrito en la barra de navegación.
- Ningún usuario hizo click en el botón de ‘¿Tienes el código?’. Directamente fueron al escáner en la barra de navegación.
- Los usuarios más mayores no se fijaban en la información que se presentaba en la pantalla antes de hacer alguna acción.
- Un par de usuarios no entendieron el flujo para añadir la compra realizada a una lista ya existente.
Mejoras gráficas
- Eliminar el botón flotante y dejar la opción de crear listas en la sección de ‘Mis listas’.
- Eliminar el botón de ‘¿Tienes el código?’. Nadie lo ha usado.
- Hacer más llamativa la información importante para el usuario y conseguir que se detenga a verla. Quizás con mejores colores o fuentes de texto mayores.
Mejoras de concepto
- Ser más claro y conciso con las acciones que se piden al usuario. El tono amigable y desenfadado no ha funcionado también como se pensaba.
- Dar más indicaciones sobre cómo añadir el producto en la pantalla de resultados. Incluso se podría añadir un contador de cantidad y un icono de carrito en el propio producto presentado.
- Cambiar el botón flotante por uno de ayuda.
- Hacer un onboarding cuando el usuario entra por primera vez a la aplicación.
Conclusiones finales
- El diseño fue bien recibido.
- Las órdenes fueron bien interpretadas por casi todos los usuarios.
- La rapidez de uso del escáner fue lo que más gustó a los usuarios.
- la información sobre cada uno de los productos fue valorada positivamente.
- La barra de navegación quedó muy clara y se destacó su uso en varias ocasiones.
Y con esto llegamos al final de este viaje en el que llevo trabajando varios meses. Ha sido duro y laborioso pero también muy pero que muy gratificante. La experiencia que me llevo tras terminarlo es enorme y ahora solo queda iterar y aplicar mejoras, ¡esto nunca termina! La verdad es que cada día estoy más enamorado del diseño UX/UI y espero que esto sea el comienzo de algo importante en mi carrera profesional.
Vuelvo a rescatar a Indiana Jones de nuevo para decir que esta aventura ha concluido pero todavía tenemos muchos más por delante. ¡Muchas gracias por haber llegado hasta aquí y nos seguimos leyendo! ¡Let’s go!
