Figma

A continuación puede revisar la implementación del prototipo digital del MVP. Este diseño se entrega como mockup de alta fidelidad en Figma realizado con Stitch y refinado de forma manual aquí.

Adicionalmente, se cuenta con la navegación de la aplicación que muestra el flujo completo para ambos roles, coleccionistas y visitantes. Puede revisar el prototipo navegable aquí.

Uso de Google Stitch

Para generar el prototipo digital, el equipo realizó un prompt especializado en Google Stitch agregando un diseño de guía de Dribble y el siguiente prompt:

Crea una aplicación tomando como base [903c82e73f2c7236834dee5683c36a8b.webp]. La aplicación tendrá las siguientes historias de usuario: HU01 Consultar catálogo de álbumes Como usuario visitante quiero navegar el catálogo de los álbumes para escoger los que más me interesan HU02 Consultar la información detallada de un álbum Como usuario visitante quiero ver el detalle de un álbum para ampliar la información sobre él HU03 Consultar el listado de artistas Como usuario visitante quiero ver el listado de artistas para escoger lo que más me interesan HU04 Consultar la información detallada de un artista Como usuario visitante quiero ver el detalle de un artista para ampliar la información sobre él HU05 Crear un álbum Como coleccionista quiero agregar un álbum al listado HU06 Asociar tracks con un álbum Como coleccionista quiero agregar tracks a un álbum para actualizar el catálogo HU07 Comentar un álbum Como coleccionista quiero comentar un álbum para dar a conocer mi opinión HU08 Agregar un álbum a un artista Como coleccionista quiero agregar un álbum a un artista para actualizar su información.

Ten en cuenta las siguientes consideraciones:

La aplicación cuenta con 2 tipos de usuarios, por lo que debe existir una pantalla de inicio de sesión que direccione a cada usuario a sus respectivas funcionalidades. Este inicio de sesión va en la APP, no hay manejo de roles o consumo al backend.

La aplicación debe ser minimalista.

Cada pantalla debe tener una cantidad sobria de componentes, es decir, no pantallas o componentes difíciles, pero tampoco lo más básico que demuestre mediocridad.

Genera un mockup de esta aplicación con una navegación completa entre pantallas para ser exportado a Figma. Hazme máximo 8 preguntas para refinar tu resultado si así lo deseas.

Imagen y diseño guía: https://dribbble.com/shots/27159017-Music-Streaming-Mobile-App-UI-Smart-Audio-Player-Experience

Una vez exportado el resultado de Google Stitch a Figma, el prototipo fue refinado de forma manual para contar con un MVP enfocado en las historias de usuario elegidas.

Diseño final

La siguiente imagen muestra todas las pantallas implementadas (es decir, las mismas pantallas expuestas en Figma) en el caso de no contar con acceso o cuenta de Figma.