Para este reto he trabajado, como bien sabéis, en el diseño de un prototipo de alta fidelidad centrado en la app interna de Grover, pensada para inspectores de tienda. Ha sido un proceso bastante completo en el que no solo me he centrado en que la interfaz se viera bien, sino en que realmente funcionara, tuviera sentido y fuera clara para alguien que la usara en un contexto real.

He construido el flujo sobre la base de lo que ya tenía en el reto anterior, pero adaptándolo a un nivel más detallado y funcional. También hice el test de usabilidad con seis personas, aplicando la técnica del pensamiento manifiesto. Escuchar lo que decían mientras usaban el prototipo me ayudó a ver el diseño desde otro ángulo. A partir de eso, hice algunos ajustes que han mejorado bastante la propuesta y que fueron detalles clave a la hora del prototipo final.

Este reto me ha servido para unir diseño, validación y mejora continua en un proceso completo y muy práctico.

https://www.figma.com/proto/3mifv0Ogycf8uXACDxaF1q/Grover-RETO-4?page-id=4001%3A305&node-id=4002-1164&viewport=427%2C91%2C0.6&t=j59ZZ0UbkIoW4EUe-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=4002%3A1164

¡Hola a todos! Hoy quiero compartir con ustedes un emocionante ejercicio de prototipado que realicé, durante una temporada de viajes laborales. Este ejercicio se centra en las brechas de ejecución y evaluación al utilizar un limpiador para sanitarios y en la topografía en las interfaces, utilizando como ejemplo un bebedor de agua.

Análisis del Toiletseatcleaner

En una situación personal, me encontré con un limpiador para sanitario en el Aeropuerto de Schipool. Después de intentar usarlo varias veces, no obtuve ninguna retroalimentación o cambio del objeto. Esto me llevó a reflexionar sobre el reto del diseñador de crear una imagen del sistema acorde al modelo mental del usuario que facilite el uso del sistema, objeto o solución.

Evaluación Heurística

Siguiendo los 10 principios de usabilidad por Jakob Nielsen, evalué el limpiador de sanitarios y encontré los siguientes puntos de mejora del sistema:

1. La visibilidad del estado del sistema: Es crucial que el usuario pueda ver el estado actual del sistema para entender si sus acciones han tenido efecto.
2. La prevención de errores: El sistema debe estar diseñado para prevenir errores antes de que ocurran.
3. El reconocer en lugar de recordar: El sistema debe facilitar que los usuarios reconozcan opciones y acciones en lugar de tener que recordarlas.
4. La ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores: El sistema debe proporcionar mensajes de error claros y ayudar a los usuarios a corregirlos.
5. La ayuda y documentación: El sistema debe ofrecer ayuda y documentación accesible para que los usuarios puedan resolver problemas por sí mismos.

Este ejercicio me permitió comprender mejor la importancia de alinear el diseño del sistema con el modelo mental del usuario para mejorar la usabilidad y la experiencia del usuario.

Análisis de un Bebedor de agua

Topografía en las interfaces

La palabra «topografía» es un término técnico que viene a significar la relación entre dos cosas; en este caso, entre el bebedor de agua y los resultados en el mundo exterior. La topografía se aprende con facilidad y se recuerda siempre. En el caso del bebedor, es una topografía natural, visto que la relación lógica de presionar un pedal resulta en la salida del agua del bebedor.

Proceso de aprendizaje

El bebedor de agua es un claro ejemplo de cómo un objeto, por su diseño, facilita a los usuarios una comprensión rápida del sistema para el uso constante del objeto. La simplicidad y la intuición del diseño permiten que los usuarios entiendan rápidamente cómo interactuar con el bebedor sin necesidad de instrucciones adicionales.

Evaluación Heurística

Al realizar la evaluación heurística del bebedor de agua, se encontraron los siguientes puntos fuertes y puntos de mejora del sistema. Siguiendo los 10 principios de usabilidad por Jakob Nielsen, se validó que el bebedor de agua es fácil de utilizar gracias a:

1. La visibilidad del estado del sistema: El bebedor muestra claramente cuándo está en funcionamiento, lo que ayuda a los usuarios a entender el estado actual del sistema.
2. Darle al usuario el control y la libertad: Los usuarios pueden controlar fácilmente la cantidad de agua que desean obtener, lo que les da libertad en su uso.
3. Reconocer en lugar de recordar: El diseño del bebedor permite a los usuarios reconocer las acciones necesarias para obtener agua, sin necesidad de recordar pasos complejos.
4. La estética y diseño minimalista: El bebedor tiene un diseño limpio y minimalista que facilita su uso y comprensión.
5. La ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores: En caso de que el bebedor no funcione correctamente, los usuarios pueden fácilmente identificar el problema y buscar soluciones.

Este ejercicio me permitió comprender mejor la importancia de la topografía en las interfaces y cómo un diseño intuitivo puede mejorar significativamente la experiencia del usuario.

Referencias

Norman, D. (2002). The Design of Everyday Things. New York: Basic Books. pp. 1-36. ISBN 0465067107.

https://design-toolkit.recursos.uoc.edu/es/evaluacion-heuristica/

Parte 1:

Hoy os comparto mi trabajo para esta segunda parte de la asignatura. Teníamos que desarrollar dos partes: una centrada en elementos de interacción, y otra relacionada con las hojas de estilo y la iconografía de Grover.

Intenté mantenerme a seguir la metodología de atomic design. Para que la estructura de capas y páginas fuera mucho más clara.

Para empezar, os muestro cómo definí los estilos de texto y color. Esta parte es clave, porque si lo dejamos bien planteado desde el inicio, luego todo el sistema es mucho más fácil de aplicar.

os comparto el link de algunas de las interacciones de la parte 1 https://www.figma.com/proto/eNiyAYx4r17TpRu5t0AAsL/Prototipado-2?node-id=2032-39&p=f&t=AnDR6lAmn6f1rodB-0&scaling=min-zoom&content-scaling=fixed&page-id=2032%3A39

Abajo comparto mi UI kit, junto a las interacciones e iconos

Parte 2:

Os comparto un video de mi planteamiento para la segunda parte. Hice dos opciones, una más simple y otra con más páginas.

link del prototipo: https://www.figma.com/design/eNiyAYx4r17TpRu5t0AAsL/Prototipado-2?node-id=2034-268&p=f&t=qd8yuyfYxG1LpDbY-0

Buenos días a todos,

Para este segundo reto lo primero que realicé fue el UI KIT. Ya que de la manera que yo tenía pensado mostrar las galería de instancias muchos de los componentes contenían iconos, lo primero que quise realizar fueron los elementos de estilo, posteriormente la iconografía y finalmente los elementos de interacción, ya que de esta manera podría utilizar las referencias que había creado antes para ir mucho más rápido.

El primer frame corresponde a los dos primeros apartados, los elementos de estilo y la iconografía. Dentro de él encontramos 4 secciones, la tipografía, la cual utilizando el inspector en la página web averigüé que se trata de «Inter», la paleta de colores en el cual existen 6 primarios, y luego tanto el amarillo como el verde son colores que he encontrado en los switch y por eso he querido añadirlos.

Posteriormente, en cuanto a los estilos de forma, averigüé que Grover utiliza unos recuadros siempre de la misma tonalidad gris clara con un grosor de 2px en sus espacios, y que los radios de las esquinas principalmente son de 8px para los recuadros más grandes y 5px para alguno en concreto más pequeño. En Grover también es muy habitual el uso de elipses que yo he creado mediante un rectángulo y poniéndole de corner-radius la mitad de la altura de dicho recuadro.

Los iconos los hay de muchos estilos, pero principalmente son de un tamaño de 24x24px y luego pues los hay con fondo, sin fondo, gris/negros, blancos, banderas…

Finalmente, el el segundo frame recreé los diversos estilos de interacción que fui encontrando tanto por la App como en la web, ya que para esta segunda entrega me he centrado mucho en la web porque podía utilizar el inspector para conocer mejor los tamaños de los elementos, los padding…

El resultado de este segundo frame se traduce en una galería de instancias que puede visitarse en el siguiente link:

https://www.figma.com/proto/iJ429W8f5InZsxIKdLhlz6/Prototipado_Reto2?page-id=2083%3A498&node-id=2083-499&p=f&viewport=25%2C260%2C0.21&t=kvAa52N4yAFH54vp-1&scaling=min-zoom&content-scaling=fixed

Muchas gracias por la atención,

Aitor Umerez

¡Hola a todos y todas! 

Quiero compartir con ustedes el proceso y el resultado de la creación del prototipo de la página de producto de la app Grover.

Prototipo de Página de Producto de Grover App

Aquí está el video que realicé con el resultado final:

Un Proceso Creativo

Empatía

Para comenzar, me enfoqué en entender el servicio que ofrece Grover, el anuncio y mis objetivos con este reto. Aunque el servicio puede parecer lógico, tuve dificultades para comprenderlo, ya que al descargar la aplicación desde el App Store de Colombia, se descargó en alemán. 

Gracias al plugin de Figma Brandfetch, pude identificar la paleta de colores, logos y tipografía utilizados en la página web, y guardé estos estilos para la app. Tomé capturas de pantalla de la app, asimilé los tamaños y estilos de texto, descargué los íconos en SVG con el plugin Iconify, definí el layout grid y finalmente guardé las primeras imágenes del producto sugerido, el iPad mini. 

Coherencia 

Después de crear los estilos base, comencé a desarrollar cada componente siguiendo el sistema Atomic Design, que explica cómo las unidades atómicas se unen para formar moléculas, que a su vez se combinan en organismos más complejos. Esta metodología fue muy útil para mantener coherencia y consistencia en cada botón, componente e interacción que iba creando. Al realizar el prototipo, me di cuenta de que el desarrollo de la aplicación no coincidía con los estilos de texto y la similitud con los flujos en la página web. 

En esta etapa, quiero resaltar que crear átomos, moléculas y organismos me ayudó mucho a corregir errores y rediseñar componentes que ya tenía prácticamente diseñados. 

Economía y reutilización 

Durante el diseño de la interacción de los datos técnicos, me di cuenta de que el estilo era muy similar a las cards en la página de detalle del producto. Esto me llevó a rediseñar la «Content-card» con todas las posibilidades que este átomo podría incluir, como el Trailing y Leading Icon, subtítulos de dos líneas, los logos de los métodos de pago e incluir el ícono o no. Todas estas decisiones fueron tomadas con el objetivo de reutilizar los componentes creados y minimizar el número de nuevos componentes por crear. De esta forma, logré resolver la interfaz gráfica con el menor número de elementos posibles para el diseño de las Collection cards, datos técnicos, etiquetas, carruseles y los precios. 

De la misma manera, se crearon las cards de los diferentes carruseles, diseñando una sola card pero con dos variables para mantener el mismo número de piezas que componen las cards, como el título, la descripción y una imagen, y usando la misma card pero en diferentes carruseles, con diferentes títulos y contenidos. 

Estética 

Una vez que todos los componentes fueron diseñados y prototipados, comencé a agregar el contenido real de la app. Aunque tenía un alto nivel de fidelidad, terminé copiando y pegando textos e imágenes que faltaban en el prototipo. En esta fase, también traté de perfeccionar algunas de las interacciones en Figma, pero al final me di cuenta de que esta es una oportunidad para seguir aprendiendo más sobre esta herramienta. 

Prototipo de Figma

Les dejo el enlace al prototipo de Figma con todo el proceso que les comenté: aquí

Referencias

Brandfetch. (s.f.). Brandfetch for Figma. https://brandfetch.com/plugins/figma

Frost, B. (2013, 10 de diciembre). Atomic web design. Brad Frost. https://bradfrost.com/blog/post/atomic-web-design/

Iconify. (s.f.). Iconify for Figma. https://iconify.design/docs/design/figma/

Universitat Oberta de Catalunya. (s.f.). Estética y usabilidad. Quadern Prototipat. https://quadern-prototipat.aula.uoc.edu/es/2-1-introduccion/

Saludos,

Angélica.

En este ejercicio he aprendido mucho sobre como utilizar Figma. Al principio, me resultó fácil el diseño de los elementos, pero a la hora de crear componentes, animaciones e interacciones me costó un poco más. De hecho, tras hora de intentarlo, no conseguí hacer la interacción del cambio de imagen con miniaturas, y me gustaría preguntar a otros compañeros cómo lo habéis conseguido. Pero en general me siento con más confianza usando Figma y en el uso de interacciones.

Añado vídeo explicándolo:

Hola a todos,

En esta publicación os voy a compartir el trabajo realizado para este primer reto.
El objetivo principal del reto era crear un Prototipo interactivo que replique la App móvil de Grover, en mi caso la versión de Android y un UI Kit con los componentes presentes en la pantalla.

Lo primer que he hecho ha sido tomar como referencia el siguiente video, analizando el flujo de la app:

Posteriormente, utilizando algunas capturas de pantalla de la App he sacado desde Adobe Illustrator los colores que iba a utilizar en mi prototipo. Para la tipografía, he utilizado MyFonts pero aquella que me proporcionó no estaba en Figma así que decidí utilizar la tipografía Inter, la cual consideré la más similar. Para los tamaños y estilos, utilicé algunas capturas de pantalla sacadas de la App, aunque a lo largo del proceso he tenido que ir añadiendo alguna más que las que inicialmente creé.

Para los iconos, he utilizado dos plugins disponibles en Figma, como son «Unicons by IconScout» y «Mono Icons by Iconduck». La razón de utilizar dos plugins diferentes ha sido intentar buscar los iconos más similares a los de la App original.

La creación de componentes ha sido el aspecto más complicado del reto, ya que esta era la primera vez que utilizaba Figma. Yo al principio cree todas las pantallas y posteriormente quería animarlas, ya que no tenía ningún conocimiento sobre los componentes. Una vez conocí la existencia de estos, tuve que modificar las pantallas iniciales, sintiendo haber perdido mucho tiempo. Algunos de los componentes han sido sencillos de crear, como el corazón que cambia de color al pulsar o el periodo de alquiler. Respecto a este último, lo que no conseguí es enlazarlo con los cambios de precio, pero creo que el desconocimiento es también parte del aprendizaje. Otro de los aspectos que no pude recrear relacionado con los componentes es el proceso de «añadir a la cesta». Si pude recrear la animación, pero luego no pude hacer que ese componente activará la apertura del overlay al ocurrir toda la animación.

Finalmente, en este video se muestra lo que he podido obtener:

Finalmente, os dejo el link a la presentación de Figma:

https://www.figma.com/design/Rdie5JACUyd3h7fJnzJKaT/Prototipo-de-Grover?node-id=1-2&t=vtIm6tyEEJ1KP7Rq-1

Muchas gracias por vuestra atención. Cualquier feedback es bien recibido.