Email :
diegovillarroelzaballos@gmail.com

Introducción.

Roostfy es a día de hoy la plataforma de freestyle más grande del mundo. Cuenta con más de 3 millón de descargas en Google Play en más de 80 países, y una nota de 4 estrellas con más de 9.000 reseñas.

Rol

Head of design

Fecha

1 de Julio, 2015

Categoría

Proyectos reales

TAGS

App móvil, Agile, Startup

Propuesta de valor.

Cuando desarrollamos Roostfy en 2015, estábamos cubriendo una gran necesidad presentada por toda la comunidad del freestyle. Por aquel entonces sólo existía la App oficial de Red Bull, pero los usuarios no estaban satisfechos con el producto y no paraban de pedir funcionalidades y mejoras.

Nuestra plataforma entró al mercado en 2015 como un MVP y actualmente, después de 5 años y muchas iteraciones, cubre todas las necesidades de los usuarios, como pueden ser entrenar, competir online, realizar batallas en directo, etc.

Investigación.

Estudio de campo

En esta fase de la investigación es donde empatizo con el usuario y empiezo a entender sus necesidades. En este estudio de campo utilizo una muestra de 15 usuarios y uso dos métodos para recoger la información: la observación directa y las entrevistas cualitativas.

La observación directa la hago en su entorno natural (en parques, en plazas y en su casa) para entender cómo es el proceso real del usuario durante sus tareas.

El output que obtengo de esta fase son las dos principales Personas que usan mi producto.

Estudios de diario

En la App hay ciertas funcionalidades que requieren un uso continuado por parte del usuario para poder analizar correctamente su usabilidad, por lo tanto decido usar este método para probar dichas funcionalidades.

Para este estudio cuento con 10 usuarios, los cuales tienen que rellenar un documento diariamente durante el uso de la aplicación con la siguiente información:

Tareas realizadas
Sensaciones
Objetivos
Frustraciones

Pruebas de usabilidad

Para las pruebas de usabilidad recluté 10 usuarios, siguiendo la buena práctica de probar con 5 usuarios de cada segmento que se haya definido en el estudio de campo y las entrevistas.

El plan de la prueba de usabilidad consta de 10 tareas, objetivos, localización, caso de negocio, etc.

Puedes verlo en detalle tocando el siguiente botón.

Análisis y feedback

En el mercado de las aplicaciones móviles sólo existe una competencia: Redbull.

Mi análisis comienza descargando la App y revisando todas sus funcionalidades y cómo las abarcan desde el punto de vista del usuario.

Lo siguiente que hago es analizar todas las reseñas (positivas y negativas) de Google Play para conocer la deseabilidad de los usuarios y cuáles son sus mayores frustraciones.

La App va muy lenta siempre, y te tiene muy pocas opciones cuando subes tus posts, no puedes eliminarlos ni editarlos. Además hay pocos beats y no a veces no suenan.  

Aaron

La idea está genial pero le faltan muchas cosas que mejorar. El beat la mayoría de las veces no suena, la App va muy lenta, y las validaciones para registrarse fallan constantemente. 

Jeff

Por favor tenéis que añadir batallas online!! Es lo que todos los usuarios pedimos, poder batallar cara a cara con otros usuarios!!

Carlos

Día A (actual) B (rediseño)
1.
8
15
2.
7
16
3.
10
22
4.
9
16
5.
11
20

Test A/B

Desde que lancé el MVP muchas de las iteraciones fueron validándose mediante este tipo de pruebas.

La metodología estándar consiste en probar el nuevo diseño con unos 10.000 usuarios para comprobar qué impacto tiene con respecto al grupo control.

En este ejemplo se mide la media de uso diaria de una nueva funcionalidad, cruzando los datos del grupo A con los del grupo B.

El experimento tuvo un aumento del 98% en la media de uso de la funcionalidad rediseñada, lo cual fue un gran éxito.

Decisiones de diseño.

"Incluso las páginas web de las ligas profesionales son difíciles de entender [...] me cuesta mucho encontrar la información que quiero."

Javier S. (Tester)

Liga online

La primera dificultad viene con una de las funcionalidades más complejas de la App: competir por una liga online cada mes.

El reto aquí era conseguir una correcta distribución de la información y las funcionalidades en la pantalla, por lo que pude percibir en las entrevistas con los usuarios.

Varios testers comentaron lo mismo, por lo que el objetivo fue mostrar cinco bloques funcionales de la liga en una sola pantalla, manteniendo una buena experiencia de usuario.

Enfrentamientos en vivo

La segunda dificultad llegó con la funcionalidad más potente de la App: enfrentamientos en vivo entre los usuarios.

Este tipo de enfrentamientos se desarrollan por turnos de 60 segundos.

Al desarrollar las pruebas de usuario vi ciertos problemas que había que solucionar para conseguir una perfecta experiencia de usuario, por lo que decidí implementar ciertos detalles visuales y funcionales en la pantalla:

"Durante la batalla no me queda claro de quién es el turno."

David R. (Tester)

"A veces el micrófono de mi contrincante hace mucho ruido cuando me toca a mi."

Bautista Q. (Tester)

Problema Solución
Ruido del contrincante durante tu turno.
Silenciar programáticamente al usuario que no tiene el turno.
Volumen inadecuado de la voz del contrincante.
Controlador de volumen en la zona de la pantalla del contrincante.
Volumen inadecuado de tu música.
Controlador de volumen en tu zona de la pantalla.
No saber de quién es el turno.
Aumentar el tamaño en pantalla de quien tiene el turno y oscurecer ligeramente la cámara del otro.

Método de votación

La forma de votar a otros participantes es en base a 3 parámetros, cada uno con una puntuación de 0 a 10.

En una primera versión, el valor de estos parámetros se introducía de forma manual por el teclado numérico del móvil, pero con los datos recogidos en el estudio de diario me de cuenta que el tiempo y esfuerzo de la tarea están ocasionando que los usuarios no la realicen.

Por lo tanto para mejorar la experiencia de esta tarea decido sustituir los 3 inputs por 3 sliders.

Esta decisión de diseño está validada por los resultados del test A/B descrito anteriormente.

Arquitectura de la información

Roostfy se convirtió en una plataforma similar a una red social, por lo que la arquitectura de la información aumentó en tamaño y complejidad.

En este punto decidí implementar un menú de navegación de cuatro pestañas que se encargaría de encapsular los cuatro bloques funcionales de la plataforma.

Sistema de diseño.

Colores

El color primario es un rojo poco saturado para evitar un excesivo contraste sobre el fondo negro.

El color secundario sigue el mismo concepto que el rojo, pero en este caso en la gama del amarillo. Su objetivo es encargarse de las acciones secundarias.

Componentes

Este es un punto crucial para ahorrar futuro trabajo y ganar consistencia a lo largo de todo el producto.

Toda la interfaz está estudiada siguiendo las leyes de la psicología de Gestalt para asegurar una correcta percepción visual por parte de los usuarios.​

Tipografía

En este producto decidí usar la tipografía por defecto de Android: Roboto.

Me aporta la limpieza tipográfica que necesito en las pantallas, ya que la lectura es de blanco sobre negro.

Gráficos

Todos los gráficos, tanto ilustraciones como iconos de color, llevan un diseño plano para aportar limpieza a la interfaz.

Los iconos de color son usados en zonas donde se requiere más información visual que la aportada por un icono blanco/negro.

Los iconos de línea son usados en zonas como el menú lateral, las pestañas inferiores, el menú superior, etc.

Animaciones

Las animaciones siguen el mismo patrón visual que los gráficos, y son usadas en ciertos puntos de la App donde se requiere algo de dinamismo.

Las ilustraciones están creadas en Adobe Illustrator y el proceso de animación en Adobe After Effects.

Interfaz completa.

© 2022 No hay derechos reservados.
De hecho, comparte, roba (like a pro) y obtén la inspiración que quieras.
¡Vivimos en un mundo libre!