Este emprendimiento lo comencé lanzando un MVP al mercado en 2015. El producto fue iterando hasta 2020 convirtiéndose en la mayor plataforma de freestyle del mundo.
Roostfy.
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
Diseño de Producto
TAGS
Emprendimiento
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.
| 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.
