Problema
Crear listas se vuelve repetitivo
Los usuarios frecuentes organizan su música solo por género y recurren a apps externas, porque Spotify ofrece pocas formas de personalizar sus listas.
← Proyectos / Caso de estudio · App móvil · Proyecto de estudio y rediseño
Más control sobre tus playlists, dentro de Spotify.
- Rol
- Diseño UX/UI Comentarios y rediseño
- Proyecto
- 2024 en equipo de cuatro Rediseño en 2026
- Plataforma
- App móvil iOS 430 × 932 · Spotify 2026
- Herramientas
- Figma
Pantallas del rediseño · Desliza para explorar
Solución
Cuatro funciones nativas para tus listas
Harmony AI crea listas desde una descripción, los tags filtran canciones, la edición cambia el aspecto y los comentarios viven en cada canción.
Resultado
44 pantallas con la estética de Spotify 2026
Retomé el proyecto del equipo y lo llevé al estilo actual de la app, aplicando en cada función el feedback del design critic.
01 · El problema
Más control para que crear listas no aburra
Trabajamos con un Design Sprint de seis fases: Foundation, Define, Sketch, Decide, Prototype y Validate. El reto: ¿cómo explorar nuevas maneras de crear listas para que los usuarios tengan más control y no se aburran?
Listas por género, y nada más
Los usuarios frecuentes clasifican su música por género. Dentro de una playlist no tienen otra forma de ordenarla o encontrarla.
Apps externas para lo básico
Para ver estadísticas u organizar su música usan herramientas de terceros, porque la app no lo ofrece.
Escuchar es una experiencia aislada
No hay un lugar dentro de la canción para compartir lo que se siente al escucharla con amigos.
Pregunta de diseño
¿Cómo logramos que crear listas sea más rápido para algunos usuarios y más nutritivo y completo para otros?
«Quiero crear mis propias categorías para clasificar las canciones a mi gusto.»
Historia de usuario · Design Sprint 2024«Quiero comentar y leer en una canción para compartir mis ideas con mi círculo de amigos.»
Historia de usuario · Design Sprint 2024«Quiero una interfaz clara y organizada para no perderme entre íconos y botones.»
Historia de usuario · Design Sprint 2024
Fuente: entrevista a un usuario frecuente con Premium, benchmark de Apple Music, Amazon Music y Deezer, e historias de usuario del equipo.
02 · Usuarios
Un oyente curioso que quiere ordenar su música
La entrevista del Foundation dio forma a la persona del sprint. El recorrido muestra en qué momento entra cada función.
Oyente frecuente
Estudiante en Colombia · 20 años
«Uso Spotify todos los días, tengo Premium y siempre estoy buscando música nueva.»
Necesidades
Crear listas para guardar y categorizar sus distintos gustos, descubrir música nueva y organizar sus canciones.
Mentalidad
Apertura, curiosidad y creatividad para combinar géneros: rock, electrónica, bachata, jazz, soul, pop y country.
Meta del producto
Hipótesis de valor
«Si crear listas es más fácil y personal, la gente usará más la app y tendrá más motivos para pagar Premium.»
Señales
Más uso de «Añadir a la lista», sin depender de apps externas.
Métricas
Más listas creadas, más reproducciones de sus canciones y más seguidores por lista.
- 01
Descubrir
Explora recomendaciones
En el rediseñoHarmony arma la lista desde una descripción
- 02
Crear
Nombre, descripción y portada
En el rediseñoPortada, color del encabezado y nota
- 03
Organizar
Busca y ajusta canciones
En el rediseñoTags de color, carpetas y canciones ocultas
- 04
Compartir
Recibe comentarios de amigos
En el rediseñoComentarios en la canción con marca de tiempo
- 05
Iterar
Actualiza y experimenta
En el rediseñoAgregar canciones por mood
03 · Punto de partida
Cuatro funciones, cuatro responsables
Cada integrante diseñó una función y las unimos en una sola tarea: crear una lista con IA, personalizarla y comentar una canción. En 2026 retomé las cuatro para llevarlas a la estética actual de Spotify.
Función 1
Comentarios
Mi parte del equipo: comentar, dar like, responder, reportar, editar y eliminar desde la canción.
Función 2
Harmony AI
Juan Miguel Betancur: un asistente que arma playlists a partir de una descripción.
Función 3
Tags
Juan Camilo: etiquetas de color para clasificar y filtrar canciones dentro de una lista.
Función 4
Edición
Eddy: portada, color del encabezado, carpetas, notas y canciones por mood.
Wireframes y alta fidelidad con Avenir Next y la paleta de Spotify de ese momento. Cada función tenía su propio lenguaje visual.
Las mismas cuatro funciones unificadas con Figtree, variables de color y componentes compartidos, siguiendo la app actual.
Cada cambio del rediseño responde a un comentario del design critic o a un hallazgo de las pruebas de 2024.
04 · Decisiones
Del feedback del critic al cambio aplicado
Decisión 01
Harmony conversa como un chat
Tus mensajes van a la derecha y los de Harmony a la izquierda. El menú de la playlist generada pasó de muchos botones a tres acciones (Guardar, Abrir y Regenerar) y chips para refinarla, como «Más movida». También acepta voz.
Responde a
«Tus mensajes deberían ir a la derecha» y «el menú tiene demasiados botones»
Decisión 02
Comentarios con contexto
Comentas en un momento de la canción («en 1:24»), filtras por Destacados, Recientes o Amigos y puedes reportar con un motivo. La hoja conserva el color de la portada, lo más elogiado en el critic.
Responde a
«¿Se pueden denunciar comentarios?» y la idea de marcas de tiempo
Decisión 03
Tags discretos, no micro-playlists
Los tags pasaron de bloques a puntos de color junto al artista. Una canción puede tener varios, cada uno con color e ícono opcional; Harmony sugiere tags y puedes reproducir solo uno.
Responde a
«Los tags se sienten como micro-playlists»
Decisión 04
Edición sin perder la playlist
El color del encabezado sale de la portada o lo eliges tú. Hay carpetas, una nota para la lista y la opción de ocultar canciones sin borrarlas.
Responde a
«Quiero más opciones de organización para encontrar más fácil la música»
05 · Sistema visual
Diseñar dentro de un sistema que ya existe
El reto no era inventar una identidad, sino que cuatro funciones nuevas se sintieran nativas de Spotify. Armé un sistema con variables, estilos y componentes, y un logo propio para Harmony.
Logo de Harmony
Barras de ecualizador que forman una H sobre un degradado de verde a azul (#1ED760 → #4CB3FF). Elegí el degradado para que no se confunda con el logo de Spotify.
Exploraciones
Tres direcciones dentro del lenguaje de Spotify: A · Onda armónica, B · H ecualizador y C · Chispa sonora.
- #121212BaseFondo de la app
- #1F1F1FElevadoHojas y tarjetas
- #1ED760VerdeAcento y acción principal
- #2A2A2AResaltadoEstados y filas activas
- #B3B3B3Texto tenueDatos secundarios
- #F3727FNegativoReportar y eliminar
Tipografía
- Figtree
- Sustituto libre de Spotify Mix · 11 estilos
- Avenir Next
- Tipografía del proyecto de 2024
Sistema de diseño
Colección de variables «Spotify 2026», estilos de texto y componentes. Las cifras cuentan solo lo que usan las 44 pantallas.
- 11variables de color en uso
- 10componentes base en uso
- 11estilos de texto en uso
Componentes
Status bar, navegación inferior, mini player, chips, fila de canción, avatar de Harmony, botones, teclado y toast, sobre un set de íconos de línea.
06 · Prototipo y validación
Probado en 2024, rediseñado con el feedback
En 2024 probé los comentarios con cinco participantes en pruebas no moderadas (tres presenciales y dos por videollamada), y el equipo hizo cinco entrevistas moderadas sobre Harmony. El rediseño de 2026 aún no se ha probado con usuarios.
Pantallas
44
en cuatro flujos, más una playlist que los une
Interacciones
496
con hojas inferiores, smart animate y pasos automáticos en el chat
Flujos
6
navegación libre, Harmony, comentarios, tags, edición y playlist central
Componentes
10
componentes base sobre la colección de variables Spotify 2026
Prueba de comentarios · 2024
Cinco participantes de 17 a 62 años, no moderada
- T1
Dar like a un comentario.
Probada - T2
Responder un comentario.
Probada - T3
Reportar un comentario.
Probada - T4
Publicar un comentario propio.
Probada
Participantes anónimos. Se evaluó el lenguaje visual de la hoja de comentarios con intervención mínima.
Hallazgos clave para trabajar
- A los participantes de más edad les costó encontrar el botón de comentarios: el rediseño agrega una vista previa bajo el reproductor.
- Pidieron reportar al mantener presionado un comentario: ahora las opciones salen del comentario y el reporte pide un motivo.
- El critic pidió tags más discretos y menos botones en Harmony: decisiones 01 y 03.
Lo que funcionó
- «Pude completar rápido la tarea ya que la interfaz se asemeja a otras apps que ya tengo interiorizadas.» · Participante, prueba de comentarios
- Los íconos se entienden fácil y el flujo se comprende rápido y tiene alternativas.
- «Está todo super bien integrado, parece hecho por el mismo Spotify.» · Compañero, design critic
07 · Cierre
Lo que aprendí y lo que sigue
Aprendizaje
Diseñar dentro de un sistema es aprender a escucharlo.
Proponer funciones para una app que millones de personas ya conocen me obligó a respetar sus patrones. La crítica de mis compañeros fue la mejor guía para iterar, y dividir el trabajo por funciones nos dejó avanzar en paralelo sin perder la tarea común.
Próximos pasos
- Probar el rediseño de 2026 con cinco usuarios frecuentes.
- Pruebas propias para tags y edición.
- Límites de Harmony y moderación de comentarios.
- Comentarios de amigos y públicos en listas compartidas.
Siguiente caso
SproutQuest