¿Cómo se llama esa canción que dice…?
Add a feature · UX / UI Case Study
Seguro que alguna vez te ha ocurrido que has escuchado una canción y has querido conocer su nombre para no perderla. ¡Hay canciones que merece la pena recordar!
Hoy en día existen varias aplicaciones móviles que nos permiten identificar un tema en cuestión de segundos con tal solo escucharlo. ¿Pero qué ocurre cuando la herramienta no es capaz de reconocerlo o no tenemos el teléfono a mano en ese instante?
1. El proyecto: Add a feature
En este proyecto planteamos el reto de añadir una nueva funcionalidad a la aplicación de Shazam.
¿Qué es Shazam?
Shazam es una popular aplicación de reconocimiento musical creada por Chris Barton, Philip Inghelbrecht, Dhiraj Mukherjee y Avery Wang en 1999. Recientemente comprada por la compañía Apple por un valor de 400 millones de dólares.
Esta herramienta es capaz de identificar la canción que está sonando en el ambiente a través del micrófono y al cabo de unos segundos informar de cuál es el título, autor y letra del tema.
Su funcionamiento es tan efectivo que cuenta con más 450 millones de usuarios que generan alrededor de 300 millones de descargas digitales.
2. Research
Empezamos el proyecto con una primera fase de Research en la que empleamos diferentes metodologías de investigación con el objetivo de entender a los usuarios de Shazam y sus necesidades.
Encuestas
Con las encuestas obtenemos información cuantitativa acerca de la percepción de los usuarios con respecto a la aplicación. Identificamos comportamientos y problemas comunes con los que trabajar posteriormente. Nos apoyamos en canales de comunicación populares como WhatsApp o Slack para alcanzar al máximo número de personas posible.
Obtuvimos un total de 25 resultados.
Tras interpretar los datos, concluimos que:
En general, los usuarios de Shazam están acostumbrados a conseguir con éxito el nombre de la canción que buscan. Cuando esto no ocurre, suelen probar suerte buscando por la letra en internet. También observamos que con frecuencia, el usuario pierde la oportunidad de rastrear el tema por no tener el móvil a mano en ese momento.
Entrevistas
Realizamos 5 entrevistas personales con las que sacamos información cualitativa y específica. Nos contaron diferentes experiencias que han tenido durante el uso de la aplicación y descubrimos patrones que se repetían, como el siguiente:
“Lo que siempre hago cuando Shazam no encuentra la canción es buscarla por la letra en internet”
Benchmark
A partir del Benchmark y su análisis, posicionamos el producto en el mercado, descubrimos a los competidores directos y destacamos los aspectos más relevantes de cada herramienta.
Primero, estudiamos en profundidad la propia aplicación de Shazam. Evaluamos la usabilidad de su interfaz y generamos un visión global de la misma que nos ayudaría posteriormente a encajar la nueva funcionalidad.
A continuación, analizamos a su competencia para entender mejor los pros y contras que tienen con respecto a nuestra app.
User Persona
Con el objetivo de entender mejor la mentalidad del consumidor y su comportamiento, creamos usuarios arquetipos que nos ayudaron a empatizar con nuestro target y validar algunas ideas.
Tanto Luigi como Marga son perfiles a los que les apasiona la música, descubrir nuevos artistas y además compartirlo con el resto.
Jobs to be Done (JTBD)
Esta metodología nos ayuda a centrarnos en la necesidad del usuario y comprender qué es lo que espera resolver a través del uso de la aplicación.
Ejemplo:
Yo, como Luigi, cuando intento averiguar el nombre de una canción necesito una herramienta que me permita probar varias opciones de búsqueda en un mismo espacio para así aumentar las posibilidades de encontrarla y además ahorrar tiempo.
Funcionalidad: añadir a Shazam una alternativa de búsqueda en caso de que el reconocimiento de sonido falle.
Con este ejercicio definimos que funcionalidad resuelve mejor el problema de nuestro user persona.
Affinity Diagram
Por último, recopilamos y clasificamos en un diagrama de afinidad la información obtenida. Conseguimos una visión global de la investigación que con la que sacar conclusiones fácilmente.
3. Funcionalidad
Llegados a este punto, analizamos la información obtenida durante el Research y concluimos que la nueva funcionalidad que añadiésemos a la aplicación de Shazam tendría que mejorar y simplificar el proceso de identificación de una canción para el usuario.
Búsqueda por letra de la canción
Gracias a la nueva funcionalidad de Shazam “Búsqueda por letra de la canción” aumentamos las posibilidades de identificar el tema y evitamos al usuario la necesidad de recurrir a una herramienta externa para hacerlo. Además, la búsqueda puede realizarse en cualquier momento.
4. Producto Mínimo Viable (MVP)
Un Producto Mínimo Viable consiste en una “maqueta” del producto o funcionalidad que permite validar con los usuarios su eficacia de manera rápida y económica. Como primer paso en el desarrollo de nuestro MVP, realizamos un Diagrama de Flujo de Usuarios.
User Flow (Diagrama de Flujo de Usuarios)
Con el User Flow representamos los posibles recorridos que un usuario puede realizar durante la ejecución de una tarea en nuestro sistema. Esto es útil para identificar aquellos puntos donde es necesario reforzar la experiencia. Si representamos el recorrido ideal que esperamos que el usuario realice durante la tarea, estaremos mostrando el Happy Path que hemos planteado para dicho escenario.
Tal como se muestra en el User Flow, Luigi (nuestro user persona) quiere realizar la tarea de identificar una canción que está sonando en el ambiente a través de la aplicación de Shazam y añadirla a su playlist de Spotify.
Existen dos vías o recorridos posibles para hacerlo. En este caso hemos considerado que el recorrido ideal será la Opción 1. Es decir, una búsqueda convencional sin éxito que deriva en el descubrimiento y uso de la nueva funcionalidad de “Búsqueda por letra” para completar la acción deseada.
Prototipo Low-Fi (Prototipo de Baja fidelidad)
Una vez definido el camino de nuestro usuario, pasamos a dibujar en papel los wireframes del proceso. Con esta metodología lean podemos testear el prototipo de forma rápida y económica con los usuarios y así sacar conclusiones y mejoras fácilmente.
Con este prototipo en papel iniciamos la fase de testeo e iteración a partir de la cual sacar conclusiones que nos orientaron hacia una versión mejorada del producto.
Conclusiones del test
De las pruebas con usuarios pudimos concluir principalmente que:
- La barra de “búsqueda por letra” no debía competir con la función principal de escuchar la canción.
- El copy en algunos mensajes resultaban flojos y confusos.
- Cambiar el orden de los botones y enfatizar el de “buscar por letra”.
- Al tratarse de una herramienta nueva, es conveniente explicar brevemente al usuario su funcionamiento.
5. Solución: implementación de la funcionalidad
Corregimos los puntos críticos identificados durante la fase de testeo y los implementamos en el prototipo de alta fidelidad.
Para crear el prototipo de alta fidelidad estudiamos en profundidad la línea gráfica de Shazam. De esta forma podríamos imitar su lenguaje (iconos, botones, colores…) e implementar la nueva funcionalidad sin que resultara disonante con el resto.
En este video podemos ver el prototipo Hi-Fi donde se representa la acción de Luigi realizando la tarea especificada detallada a continuación:
- Luigi, una vez dentro de la aplicación de Shazam, pulsa el botón central para “hacer un Shazam” y rastrear la canción que está sonando.
- La aplicación empieza a escuchar el sonido de ambiente, pero no es capaz de obtener un resultado. Ofrece la alternativa de realizar la búsqueda a partir de la letra de la canción.
- Luigi pulsa la opción de “Buscar por la letra” y escribe en la barra de búsqueda algunas palabras que recuerda de la canción.
- El buscador va ofreciendo resultados de búsqueda en tiempo real mientras Luigi escribe el texto. Cuando este finaliza la acción, le muestra una lista con los resultados obtenidos. Las coincidencias encontradas las representa en color azul para diferenciarlo del resto de descripciones.
- Luigi elige uno de los resultados de búsqueda y para comprueba si es correcto dándole al botón de reproducción que aparece en la carátula. En ese momento cambia el estado a “Pausar” y además aparece una pequeña animación abajo a la derecha que indica que está sonando música.
- Tras comprobar que el tema es el correcto, Luigi decide añadirlo a sus lista de reproducción de Spotify, para lo cual pulsa el botón vertical “More” y seleccionar “Añadir a Spotify”. Acto seguido elige la lista a la que desea añadirla.
- Durante unos segundos aparece la card de la canción y notificación que confirma que la canción ha sido añadida con éxito a la playlist. Después vuelve a la pantalla de inicio.
6. Next steps
En cuanto a los siguientes pasos a desarrollar, hablaríamos de:
- Evaluación periódica del uso y percepción de las diferentes funcionalidades de Shazam para priorizar aquellas herramientas que resulten eficaces y generen una mejor experiencia para los usuarios. Por ejemplo, a partir de un Matriz de Funcionalidad.
Aprendizaje y agradecimientos
Es cierto que algunas aplicaciones del mercado son, a priori, capaces de realizar más funciones que el gigante Shazam. Sin embargo, su efectividad no siempre las respalda y esto puede causar en los usuarios una percepción negativa hacia ellas. Por este motivo, entendemos que Shazam es selectivo con su contenido y prefiere ofrecer una experiencia basada en la calidad más que en la cantidad y centrarse en el buen funcionamiento de su herramienta.
Por otra parte, trabajar en un producto ya existente fue todo un reto, ya que debíamos analizar en profundidad todos sus elementos y aprender un lenguaje que nos permitiera generar consonancia con el resto de su contenido.
Para terminar, agradeceros el tiempo invertido en esta lectura y esperamos que os haya gustado. Si tenéis alguna duda o comentario, estaremos encantados de responderla.
