¡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.