Pública ¡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.
Buena práctica ?
Buena práctica ?
Mala práctica
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.