UI-UX case study
El reto fue diseñar una app para Amazon, concretamente para su producto Fire TV. Es un dispositivo de Streaming desarrollado por Amazon. Para poder utilizar sus productos en plataformas, la primera versión es de 2014, actualmente están desarrollados con asistentes virtuales como Alexa.
Role: Diseñador UX-UI Equipo: Fran y Daniel
El problema:
Los mandos tradicionales de televisión están sobrecargados de botones y funciones que la mayoría de los usuarios apenas utiliza. Esta complejidad genera frustración, esfuerzo innecesario y una mala experiencia de entretenimiento. Los usuarios buscan simplicidad y control, pero las soluciones actuales no se adaptan a diferentes niveles de uso o conocimiento.
Solución:
Diseñamos una aplicación móvil que actúa como mando simplificado para gestionar plataformas de streaming, especialmente Amazon Prime Video.
La idea clave se inspira en las calculadoras clásicas:
En modo vertical, la app ofrece una interfaz básica, con los controles esenciales (play, pausa, volumen, avance/retroceso).
Al girar el dispositivo en horizontal, se activa una versión avanzada, con funciones extendidas (información de la película, reparto, listas de reproducción, control parental, ajustes).
De este modo, el diseño permite que tanto usuarios básicos como avanzados disfruten de una experiencia adaptada y sin sobrecargar la interfaz.
Metodología
Utilizamos el modelo Design Sprint en este proyecto, es un tipo de metodología ágil inventado por Google. Design Sprint es una metodología para desarrollar una hipótesis, crear prototipos y probar y validar una idea en solo 5 días. El objetivo es ser lo más ágiles posibles, para llevar a cabo un proyecto en el menor tiempo posible. Si no funciona, solo has perdido 5 días, sacando datos de valor y pudiendo volver a empezar el proceso.
Proceso:
Día 1 — Entender y empatizar:
El objetivo es definir y entender el reto del proyecto. Utilizamos Road maps y Sprint Questions, How Might We? questions y entrevistas.
Día 2 — Divergir, generar ideas y buscar soluciones:
Anotar ideas que se nos ocurran, Crazy 8, Moodboard... Son algunas de las técnicas utilizadas para generar ideas de manera rápida para nuestro proyecto.
Día 3 — Decidir
Se comparten las ideas entre el equipo, en forma de Wireframes de baja fidelidad, para ver distintas opciones de desarrollo. También es útil hacer un Storyboard, para visualizar los puntos clave del uso de la aplicación.
Día 4 — Prototipar
Hacemos primero los wireframes de baja fidelidad para después pasarlos a alta fidelidad. En esta fase se desarrolla lo más rápido posible la fase de diseño UI.
Día 5 — Testear
Probar y evaluar el prototipo. La finalidad de esta metodología es validar o desechar las ideas de manera rápida. Cualquier resultado es positivo por su corta duración.
Día 1 — Entender y empatizar:
Definimos y entendimos el proyecto. Encontramos algunas ideas en las sprint questions, como: Utilizar un código QR que aparezca en la pantalla de la TV. Utilizado para la instalación desde tu teléfono mediante escaneo o bien para cargar un perfil existente, si llevas el Fire TV a casa de un amigo.
Día 2 — Divergir, generar ideas y buscar soluciones:
En esta fase, el Crazy 8, el moodboard y el storyboard fueron útiles para definir la arquitectura de la información del proyecto. Hicimos un moodboard concreto solamente de mandos, para tomar referencias de mandos "clásicos" con más botones, y las opciones más actuales con un diseño más minimalista. Nos sirvió para encontrar los "botones imprescindibles" y las opciones de interés para el mando avanzado.
Se puede ver como las ideas del storyboard fueron utilizadas posteriormente en el onboarding de la app.
Día 3 — Decidir
A partir de bocetos de wireframes en papel sacados del crazy 8, además de nuevos bocetos sobre papel de manera conjunta, discutimos la ruta e interacciones del proyecto. Pasamos a los diseños de wireframe en baja con una ruta a seguir clara de lo que queríamos hacer.
Día 4 — Prototipar
La paleta y tipografía siguen la estética del branding de Amazon, para mantener la coherencia de marca. Después de tener los wireframe de media fidelidad listos, teniendo clara la ruta y con el poco tiempo de esta metodología de trabajo decidimos pasar directamente a diseñar.
Un elemento destacable, es que debíamos incluir amazon prime pero también a la competencia. La manera de destacarlo fue usando jerarquía visual, el tamaño del logotipo de Amazon es del doble de tamaño que el resto. También, está situado el primero, en una zona destacable visualmente para dirigir el orden de lectura del usuario.
Día 5 — Testear
Sacamos como conclusión que la ruta planteada en el test no era evidente: Planteamos llegar hasta la película Harry potter 2, desde el menú principal (Sin que hubiera una imagen de esta).
Los test nos enseñaron que la sección que destinamos a ir a películas (la miniatura de kung fu panda) y los botones del footer no indican bien su función, como para que el usuario lo comprendiera.
Fue de utilidad este test, aprendimos que mientras estás diseñando y conoces las rutas o secciones puedes obviar, que no sean rutas claras para alguien externo al diseño.
Conclusiones:
Fue un proyecto en grupo del master donde aprendimos a desarrollar un trabajo UX-UI con metodología ágil, utilizando Design Sprint. Fue curioso ver como es posible tener una primera propuesta realizada en un periodo corto de tiempo. También aprendimos la importancia de los test de usabilidad con usuarios.
