Sobre el proyecto
Animetflix es una aplicación para ver series de animé. El objetivo era diseñar una plataforma Dark theme con la que los amantes del animé se identificaran y en la que pudiesen acceder a sus series favoritas, incluyendo los lanzamientos más recientes.
Proceso de diseño
Acordamos tener reuniones con frecuencia semanal para mirar hitos, entregables y avances en el proyecto. Esta fase de levantamiento básicamente se desarrolló mediante tres instrumentos:
- Reuniones.
- Entrevistas.
- Modelo de negocios.
En esta fase el objetivo era entender a la audiencia, entender el mercado y trazar una estrategia que permitiese darle a esta aplicación un valor diferencial y funcional sobresaliente.
Para ello, decidí valerme de tres instrumentos que me fueron muy útiles:
- Benchmarking.
- Online Research.
- Entrevistas a usuarios.
No apliqué card sorting porque consideré que este proyecto no lo ameritaba. Además, la información que logré recabar fue muy valiosa y los patrones de diseño para este tipo de plataformas eran bastante claros.
Una vez recabada la información y presentado el informe de hallazgos, comencé a organizar todo lo que había encontrado útil. La ventaja en este caso es que el stakeholder se involucró bastante en el proceso de investigación y sabía utilizar la herramienta que suelo utilizar para diseño de interfaces: Figma.
Así que, en medio de una tormenta de ideas organizamos juntos lo que sería el sitemap de toda la aplicación.
Además, para mi suerte, el stakeholders al igual que yo era Ingeniero Industrial, y ya había diseñador un flujograma con los principales procesos de la aplicación. Esto fue una herramienta muy valiosa en todo el proyecto.
En esta fase comencé a bajar los primeros bocetos y estructuras de alambre. Este tipo de diseños prefiero realizarlos en papel, pero a veces me apena un poco presentarlos al cliente final.
Las personas son muy visuales. Cuando miran un boceto poco estético (como suelen ser estas maquetas), tienden a ser duros en sus juicios y a cuestionar al diseñador.
En realidad, esto es muy personal, basado en mi propia experiencia, y no todos los proyectos son iguales. En este en particular, consideré que sería mejor usar los wireframes para organizarme y darle yo mismo una mirada a cómo quedaría el diseño final, y mostrar a mi stakeholder solamente los componentes principales sin llegar a realizar un prototipo de alta fidelidad.
Diseñada la navegación mediante flujogramas de proceso y aprobados los componentes, comencé a diseñar la interfaz de usuario.
El tema era dark, y todo diseñador comprende la complejidad que esto le añade. Sin embargo, los patrones de diseño para este tipo de aplicaciones facilitaron mucho este proceso.
Utilicé Figma para diseñar las pantallas y el prototipo.
El prototipo lo diseñé en Figma puro, sin Protopie. En este caso me concentré en mostrar cómo funcionarían los componentes y la interacción que tendrían con los contenidos.
De hecho, concentré mi mayor esfuerzo en aquellos elementos que no resultaban tan comunes entre los patrones de diseño que investigué, pero que formaban parte del valor diferencial de la plataforma. Por ejemplo, la precarga de contenidos online / offline.
Para cuando entregué el proyecto ya se encontraba en fase de desarollo Front-end. El back, al día de hoy está terminado. Me comprometo a actualizar el estatus de esto una vez la aplicación esté en el aire.
Para cumplir con esta fase, pedimos el informe de evaluación de heurísticas por parte de otro diseñador UX que no participó en el proyecto. Conocer sus impresiones y detalles de su informe podía darnos luces de algún ajuste o al menos para comprobar que el prototipo era intuitivo y usable.
Branding del proyecto
Previo al proyecto, diseñé la identidad de la marca basándome en la audiencia objetivo. Utilicé una tipografía minimal con detalles comunes entre las series más populares de animé.
1. Entendiendo el proyecto
Lo primero que tenía que entender era el alcance que tendría mi trabajo. El proyecto no contaba con un equipo de diseño. Había un desarrollador de Front y uno de Back. El Stakeholder se involucró en el proyecto mapeando directamente los procesos principales, lo cual sería un insumo de información bastante útil.
En este caso, la idea para la aplicación estaba bastante clara. Entrevisté al líder del proyecto y me concentré en entender cuáles serían las funciones que se ocuparían en la versión 1.0.
El stakeholder tenía muy bien definido su modelo de negocios. Con estos objetivos bien delimitados, es más fácil evaluar el impacto a nivel de diseño.
Por ejemplo, si es necesario que aparezcan anuncios, esto debe contemplarse en el diseño, y si se trata de un modelo de negocios freemium, se debe delinear muy bien esa ruta de registro y la diferencia de interfaz entre un usuario regular y uno Premium.
2. UX Research
La fase de investigación consistió mayormente en realizar entrevistas estructuradas y encuestas en foros para identificar los insight de este mercado. Pese a ser un mercado bastante amplio y diverso, era importante definir algunas User Personas que guiaran las decisiones más importantes.
Entrevisté principalmente a 5 usuarios conocidos fanáticos del animé, realicé preguntas en foros de Otakus y Fans de series reconocidas y se obtuvo una data interesante de necesidades, expectativas y aspiraciones a las que Animetflix podría responder.
Preguntas de encuestas y entrevistas
- ¿Qué aplicación prefieren para ver animé?
- ¿En qué tipo de dispositivo suelen ver animé?
- ¿Qué mejorarían en esas plataformas que utilizan?
- ¿Durante cuánto tiempo ven animé al día?
Protopersonas
Mediante preguntas en foros y entrevistas no estructuradas, se determinó que la audiencia objetivo estaba conformada por usuarios de ambos sexos, de entre 15 y 39 años de edad. Además, tienden a ser usuarios muy activos en el mundo digital: redes sociales y plataformas de streaming y gaming.
Journey map
Partiendo de las funciones de las que más se comenta en los blogs y foros más populares, se desarrolló un mapa que identificara las emociones de los usuarios hacia esos elementos:
Los usuarios evaden en lo posible los procesos de registro en una app, a menos que esta les devuelva beneficios que valgan la pena. Además, les desagrada cuando esto es una limitante para el uso de las funciones principales. Les molesta mucho la publicidad, las ventanas emergentes aparentemente cargadas de virus, los anuncios que distraen o solapan la pantalla y las actualizaciones que les cambian por completo la calidad acostumbrada.
Al mismo tiempo, ven positivo la personalización a temas dark y la posibilidad de descargar el animé al tener conexión a Wi-FI para mirarlo después.
Cuando pregunté acerca de rasgos como la experiencia de usuario o la gestión de vídeo, se mostraron indiferentes. Lo que ven positivo en las apps que usan es la facilidad de búsqueda y la velocidad que normalmente tienen estas aplicaciones.
Mapa de Afinidad
Entrevisté personalmente a algunos del conocedores del animé que usan frecuentemente plataformas como Crunchyroll, Anime ID, Animé Online, Kanime, Animeonegai, Legion Animé y Animé FLV, para ver sus series preferidas.
A partir de sus experiencias, puntos de dolor y listas de deseos, pude armar un mapa de afinidad.
Online Research
Además de la investigación en foros y redes sociales, hice una búsqueda rápida para enlistar las app de animé más descargadas y preferidas por los usuarios. En este caso, ya había bastante trabajo de investigación adelantado, pero una búsqueda rápida en google, y los resultados son casi siempre los mismos. A continuación, cantidad de reseñas hasta la fecha:
Las descargas de estas aplicaciones ascienden a millones de usuarios activos y, por el amplio rango de edades, tiene que resultar usable, sencilla e intuitiva para todas ellas.
3. Arquitectura de Información
A través de un Card Sorting híbrido determiné qué elementos ocuparían el MVP de la aplicación, en este mismo ejercicio con los usuarios entrevistados se determinó en qué áreas de la pantalla esperarían encontrar estas funciones. La precisión de los resultados fue casi unánime y se logró recabar información relevante que no había contemplado.
En un principio, contemplé dos posibilidades, una tab bar inferior con 4 opciones principales. Sin embargo, aunque esto resultó del Card Sorting, el espacio que restaría la tab inferior a una app cuyo valor agregado principal era presentar contenidos visuales, era un buen punto a considerar.
Por ello, se tomó la decisión, junto con el stakeholder, de mover dos de las opciones al Home y menú, y utilizar únicamente la barra superior. Los elementos «Buscar» y «Menú» se situarían en los extremos superiores de la pantalla siguiendo el patrón de diseño.
A continuación, el resultado final:
4. Bocetado de Wireframes
Inicialmente, el sistema de navegación se pensó con una tab bar inferior de 4 opciones principales:
- INICIO. Resumen de los capítulos por día, animes en curso y últimos lanzamientos.
- LISTA. Series guardadas para ver luego, pero que el usuario no había iniciado.
- EXPLORAR. Para descubrir o encontrar series.
- MENÚ. Ubicado en la parte inferior para liberar el navbar superior y mantener todo en la «zona del pulgar» con todas las funciones secundarias, como Perfil, Pagos, Estado de suscripciones, entre otras.
Sin embargo, algunos Treetesting y Card Sorting de este modelo de navegación con los usuarios, sugirieron un cambio en el diseño de la navegación, ¿por qué? Siendo una plataforma de Streaming en una pantalla móvil de una 6 a 10 pulgadas, la exploración de contenidos se entorpece con tab bar inferiores que resten visibilidad al usuario.
5. Diseño UI
Los componentes del UI Kit y la guía de estilos se diseñaron en Figma. Considerando que se desarrollaría en React Native, una tecnología híbrida y bastante flexible, ocupé componentes pensados principalmente para IOs y que pudiesen reutilizarse en las distintas interfaces de ambas tecnologías.
6. Prototipado UI
Partiendo del diseño Hi-Fi, conecté los componentes básicos para prototipar la navegación e interacción de los usuarios. Esto serviría a los desarrolladores para entender la lógica del producto y de cada componente.
7. Testing UX
El testeo de la app consistió básicamente en dos fases. Los usuarios entrevistados probaron los prototipos y los calificaron de forma positiva sumando sugerencias que posteriormente se implementaron.
Por otra parte, se hicieron consultas a otro Diseñador UX con experiencia en calidad de auditoría por Juicio de Expertos. En la evaluación, verificó el cumplimiento de algunas heurísticas importantes y buenas prácticas, y le brindó al equipo algunas sugerencias.
Cerrado este análisis, se hizo entrega de todos los entregables, editables, análisis, estudios y demás elementos.
Sigue de cerca el proyecto de Animetflix
Una vez desarrollado, enlazaré este caso de estudio a las tiendas de aplicaciones para que puedas descargarla. Mientras tanto, sigue de cerca el proyecto y forma parte de su comunidad en Instagram @animetflix_info.
