Magda BrandiDiseñadora de Interacción
  • ES
  • EN
Contáctame

Caso
Audiomack

Música, pero con orgullo.

Rol
Sistema de diseño, research, UX/UI, propuesta de valor y arquitectura de información
Equipo
Con Sofía Oñate
Duración
1 semestre
Herramientas
Figma

Audiomack es una plataforma de streaming musical enfocada en públicos jóvenes: promueve artistas emergentes y géneros urbanos para oyentes de nicho que buscan sonidos nuevos más allá del mainstream. Junto a Sofía Oñate, en el Taller de Interfaces, rediseñamos su sistema de diseño en versión mobile.

Problema

Para entender la experiencia real de sus oyentes hicimos una encuesta en Google Forms, enfocada en percepciones, dolores y patrones de uso. Detectamos tres insights:

  1. 01ConfusiónLa interfaz y la navegación confunden y dificultan el control de la experiencia.
  2. 02Fallas claveEl buscador y la reproducción fallan y generan frustración.
  3. 03DesconfianzaDesaparece contenido y la calidad del audio es inconsistente.

Las reseñas de la app cuentan lo mismo:

  • Muy mal★★★★★La app siempre elimina música, siempre tendrás que volver a descargar música ya descargada, no sirve.
  • Pésima aplicación no la descarguen★★★★★Descargaba canciones y la aplicación las eliminaba solas.
  • la publicidad de abajo★★★★★La publicidad en la barra de control es muy molesto para controlar… en la versión anterior esto no existía!!!
  • Más o menos★★★★★La uso hace años y siempre había música que faltaba o me las borraban, y ahora ya no encuentro ni una canción que me gusta.

El player tenía tres capas de UI superpuestas que competían entre ellas.

Concepto

Nos propusimos eliminar las inconsistencias visuales y funcionales que degradan la experiencia, devolverles a los oyentes el control sobre lo que escuchan y que descubrir música sea fluido, confiable y sin fricciones.

Primero comparamos tres referentes para ver qué rescatar de cada uno:

  • Spotify6,2Dimensión crítica EncontrabilidadSu sistema de descubrimiento y una arquitectura de información clara.
  • Emisor Podcasting5,0Dimensión crítica EncontrabilidadCategorías bien definidas para descubrir nichos sin depender solo de algoritmos.
  • Cooperativa4,4Dimensión crítica UtilidadContenido editorial organizado con una intención narrativa.

Y descubrimos algo de sus usuarios: les encanta presumir que conocían una canción antes de que se hiciera mainstream. Esa es la propuesta de valor.

La interfaz escucha,no solo habla

De ahí salen los dos principios del sistema:

  1. 01DiálogoLa interfaz escucha, no solo habla.Las otras apps de streaming le hablan al usuario: el algoritmo le hace una declaración. En Audiomack la exploración deja de ser un catálogo y se convierte en una conversación sobre qué está pasando en la escena antes de que se vuelva mainstream.
  2. 02Tiempo como interfazContextualizar en lugar de categorizar.Las demás apps se organizan por género, mood o popularidad. Audiomack se organiza por momentos: qué pasó antes, qué está pasando ahora en la escena y qué está emergiendo. La exploración se vuelve una línea de tiempo viva.

El tiempo se vuelve color: tres acentos temporales tiñen la app según el momento que exploras.

  • PasadoEchoCálido y evocador. Lo que ya fue escuchado, para revisitar y reconectar.
  • PresentePulseFresco y activo. Lo que está sonando ahora, en tiempo real.
  • FuturoBloomVibrante. Las tendencias emergentes y los sonidos que aún no se consolidan.

En el mapa de navegación, Discover se abre en un Timeline Path con esos tres momentos, y aparecen categorías nuevas como Find your Mood, Artist Timeline y un Onboarding Timeline.

Mapa de navegación de Audiomack en siete niveles: Home, Discover y My Library, con las categorías nuevas en morado, el Timeline Path con Echo, Pulse y Bloom, y el Player como categoría central.
Mapa de navegación: en morado, las categorías nuevas.

Contextualizar en lugar de categorizar.

Producto

El producto es el sistema de diseño de Audiomack: seis capítulos que van de los principios a la gobernanza, para que cada pantalla se construya con las mismas piezas y deje de haber inconsistencias.

2Guía de estilos

2.1Tipografía

Una sola familia, Lexend, en trece estilos: seis headlines, dos subtitles, dos bodies, button, caption y overline. Cada estilo se define con tokens de tamaño, peso y spacing.

  1. Headline 1
  2. Headline 2
  3. Headline 3
  4. Headline 4
  5. Headline 5
  6. Headline 6
  7. Subtitle 1
  8. Subtitle 2
  9. Body 1
  10. Body 2
  11. Button
  12. Caption
  13. Overline

2.2Colores

Un primario, un secundario y neutros pensados para una experiencia dark-first, más los tres acentos temporales y cuatro colores de retroalimentación. Las paletas van de 50 a 900; el paso base de cada una está marcado.

Marca

Primario
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500Base
  7. 600
  8. 700
  9. 800
  10. 900
Secundario
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500
  7. 600
  8. 700
  9. 800
  10. 900Base
Neutros
  1. 0
  2. 50
  3. 100
  4. 200
  5. 300
  6. 400
  7. 500
  8. 600
  9. 700
  10. 800Base
  11. 900

Acentos temporales

Echo · pasado
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500Base
  7. 600
  8. 700
  9. 800
  10. 900
Pulse · presente
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500Base
  7. 600
  8. 700
  9. 800
  10. 900
Bloom · futuro
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500Base
  7. 600
  8. 700
  9. 800
  10. 900

Retroalimentación

Error
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500
  7. 600Base
  8. 700
  9. 800
  10. 900
Éxito
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500
  7. 600Base
  8. 700
  9. 800
  10. 900
Información
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500Base
  7. 600
  8. 700
  9. 800
  10. 900
Advertencia
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400Base
  6. 500
  7. 600
  8. 700
  9. 800
  10. 900

Cada paleta se traduce en roles: el color, su contenedor, sus versiones fijas y el on-color, el que va encima. Así quedan los acentos:

Echo

  • Echo
  • On Echo
  • Echo Container
  • On Echo Container
  • Echo Fixed
  • On Echo Fixed
  • Echo Fixed Dim
  • On Echo Fixed Variant

Pulse

  • Pulse
  • On Pulse
  • Pulse Container
  • On Pulse Container
  • Pulse Fixed
  • On Pulse Fixed
  • Pulse Fixed Dim
  • On Pulse Fixed Variant

Bloom

  • Bloom
  • On Bloom
  • Bloom Container
  • On Bloom Container
  • Bloom Fixed
  • On Bloom Fixed
  • Bloom Fixed Dim
  • On Bloom Fixed Variant

2.3Métricas

Todo se mide en una escala de 4 px, de 4 a 72, que se usa como spacing, margin, padding y gap.

2.4Elevaciones

Cuatro niveles de profundidad expresados como sombra, de elevation50 a elevation300: más alto, más profundidad.

  • elevation50
  • elevation100
  • elevation200
  • elevation300

2.5Formas

Siete pasos de redondeo, de shape-50 a shape-600. Shape es el token y corner-radius su valor en px: corner-radius-200 son 12 px; corner-radius-500, 24 px, y corner-radius-600, 28 px.

  • shape-50
  • shape-100
  • shape-200
  • shape-300
  • shape-400
  • shape-500
  • shape-600

3Elementos

3.1Íconos

Los íconos se ordenan en navegación, acción e información, cada uno con sus estados: enabled, muted, pressed y disabled.

Tablero de íconos de Audiomack: navegación, acción e información, cada ícono en sus estados enabled, muted, pressed y disabled.
Íconos y sus estados.

3.2Media

Las portadas tienen un placeholder para cuando aún no cargan y variantes de tamaño, del thumbnail de una lista a la portada del player.

4Componentes

4.1Componentes

Veinte componentes, cada uno documentado con para qué sirve y cuándo usarlo, sus tipos, variantes y estados, y los tokens que consume.

  • Mini player
  • Bottom navigation bar
  • Top app bar
  • Search bar
  • Button
  • Icon button
  • FAB
  • Card
  • List item
  • Section header
  • Tabs
  • Chips
  • Toggle
  • Text field
  • Slider
  • Page indicator
  • Toast
  • Overflow menu
  • Avatar
  • Thumbnail

4.2Librería

En la librería viven todas sus instancias. Las cards tienen una versión por acento: neutra, Echo, Pulse y Bloom.

Librería de componentes en modo oscuro: thumbnails, tabs, section header, overflow menu, list item, input, search bar, chips, mini player, avatar, nav bar, top app bar, toast, icon button, FAB, button, slider, page indicator, toggle y action menu.
Librería de componentes.
Cards de la librería en su versión neutra y en sus versiones Echo (naranjo), Pulse (verde) y Bloom (rosado).
Cards: neutra, Echo, Pulse y Bloom.

5Patrones de diseño

5.1Ciclo de vida de los componentes

Todos los componentes pasan por los mismos estados, y cada estado tiene su token y su movimiento:

EstadoQué comunicaToken / cambioMovimiento
DefaultReposo, listo para interactuar.Superficie base · color-action-primary-default—
FocusFoco de teclado o lector (inputs).outline-default + anillo action-primaryduration-100 · ease-standard
PressedContacto activo del dedo.action-primary-pressed · state-layer · surface-container-lowestduration-100 · ease-standard
Active / SelectedDestino o elección actual.action-primary-default + surface-brightduration-200 · ease-standard
InactiveDisponible pero no es el actual.icon-muted · text-mutedduration-200 · ease-standard
DisabledNo interactivo, sin respuesta.action-primary-disabled (color, no opacidad)sin transición
LoadingCargando contenido.skeleton: surface-container-high + shimmerduration-500 · ease-linear (loop)

El movimiento sigue una escala de duración según el tamaño del cambio:

  1. duration-100100 msMicro-feedback: state-layer, toggle, switch
  2. duration-150150 msControles pequeños: chips, icon-button
  3. duration-200200 msEstándar: botones, tabs, selección
  4. duration-300300 msMedio: cards, bottom sheets, expandir
  5. duration-400400 msGrande: navegación entre pantallas
  6. duration-500500 msÉnfasis: player, overlays a pantalla completa

5.2Cómo se mueve la interfaz

Y en el prototipo, en modo oscuro, cada transición está especificada sobre los tres flujos críticos:

Escuchar canción de playlistFlujo principal

  1. Pantalla 1 de 12 del flujo «Escuchar canción de playlist»
  2. Pantalla 2 de 12 del flujo «Escuchar canción de playlist»
  3. Pantalla 3 de 12 del flujo «Escuchar canción de playlist»
  4. Pantalla 4 de 12 del flujo «Escuchar canción de playlist»
  5. Pantalla 5 de 12 del flujo «Escuchar canción de playlist»
  6. Pantalla 6 de 12 del flujo «Escuchar canción de playlist»
  7. Pantalla 7 de 12 del flujo «Escuchar canción de playlist»
  8. Pantalla 8 de 12 del flujo «Escuchar canción de playlist»
  9. Pantalla 9 de 12 del flujo «Escuchar canción de playlist»
  10. Pantalla 10 de 12 del flujo «Escuchar canción de playlist»
  11. Pantalla 11 de 12 del flujo «Escuchar canción de playlist»
  12. Pantalla 12 de 12 del flujo «Escuchar canción de playlist»

Buscar canción / artista

  1. Pantalla 1 de 8 del flujo «Buscar canción / artista»
  2. Pantalla 2 de 8 del flujo «Buscar canción / artista»
  3. Pantalla 3 de 8 del flujo «Buscar canción / artista»
  4. Pantalla 4 de 8 del flujo «Buscar canción / artista»
  5. Pantalla 5 de 8 del flujo «Buscar canción / artista»
  6. Pantalla 6 de 8 del flujo «Buscar canción / artista»
  7. Pantalla 7 de 8 del flujo «Buscar canción / artista»
  8. Pantalla 8 de 8 del flujo «Buscar canción / artista»

Descubrir músicaPropuesta de valor

  1. Pantalla 1 de 7 del flujo «Descubrir música»
  2. Pantalla 2 de 7 del flujo «Descubrir música»
  3. Pantalla 3 de 7 del flujo «Descubrir música»
  4. Pantalla 4 de 7 del flujo «Descubrir música»
  5. Pantalla 5 de 7 del flujo «Descubrir música»
  6. Pantalla 6 de 7 del flujo «Descubrir música»
  7. Pantalla 7 de 7 del flujo «Descubrir música»

6Gobernanza

Para que el sistema se mantenga ordenado: un glosario, una convención para construir tokens en tres capas y permisos claros.

  1. Primitivoprimary-500
  2. Semánticocolor-action-primary-default
  3. Componentebtn-primary-bg

6.1Glosario de términos

Primitivo (token base)
Valor crudo, color o número sin intención de uso. Capa más baja del sistema.
Token semántico
Token con intención de uso que referencia un primitivo (color-action-primary-default).
Token de componente / alias
Token específico de un componente que apunta a un semántico (btn-primary-bg).
Rol
Función del color en la UI: action, surface, outline, text, icon, status, accent.
Estado
Condición de interacción: default, hover, active/pressed, disabled, on, container, on-container.
Variante
Forma alternativa de un componente, tamaño o estilo (button-sm, card-elevated).
Tipo
Clase estructural de un componente (two-lines vs one-line en list-item).
Escala
Progresión numérica ordenada: 4px en métricas, 50–900 en color, 50–600 en formas.
Surface / Container
Jerarquía de superficies: default, dim, bright, container-lowest … container-highest.
On-color
Color de texto o ícono que va encima de una superficie (color-on-primary).
Acento temporal (Echo · Pulse · Bloom)
Acentos decorativos ligados al producto: Echo = pasado, Pulse = presente, Bloom = futuro. Uso temporal, no de estado.
Status
Colores de retroalimentación al usuario: error, success, info, warning.
Elevation
Nivel de profundidad expresado como sombra (50 / 100 / 200 / 300).
Shape vs corner-radius
shape = token de redondeo; corner-radius = su valor concreto en px.
Spacing / Margin / Padding / Gap
Tipos de métrica dentro de la escala de 4px.
Weight
Peso tipográfico (weight-regular … weight-bold) sobre la familia Lexend.

6.2Convención para construcción de tokens

  • Primitivos / colores{paleta}-{step}neutral-0 · primary-500 · echo-300 · pulse-500 · bloom-700 · error-500Valor crudo de color, sin intención de uso. Solo los referencian los semánticos; nunca se usan directo en un componente.
  • Semánticos / colorcolor-{grupo}-{rol}-{estado}color-action-primary-default · color-surface-container · color-text-muted · color-accent-echo-hoverAplican intención de uso. Grupos: action, surface, outline, text, icon, accent-(echo|pulse|bloom), status.
  • Tokens de componente{componente}-{parte}-{propiedad}btn-primary-bgCapa más alta: el componente apunta a un semántico mediante este alias. Es el token que el componente realmente consume.
  • Tipografía{estilo}-{propiedad}h1-size · subtitle2-size · body2-lineheight · weight-semibold · family-fontEstilos: h1–h6, subtitle1–2, body1–2, button, caption, overline. Propiedades: size, weight, spacing.
  • Formasshape-{step} | corner-radius-{step}shape-100 · corner-radius-200 (12px) · corner-radius-500 (24px) · corner-radius-600 (28px)shape = token de redondeo; corner-radius = su valor en px.
  • Métricas / espaciado{tipo}-{valor}spacing-8 · margin-16 · padding-12 · gap-24Escala base de 4px (4–72). Tipos: spacing, margin, padding y gap.
  • Elevacioneselevation{nivel}-{propiedad}elevation200-y · elevation200-blur · elevation200-spreadNiveles 50, 100, 200 y 300 (más alto, más profundidad). Propiedades: x, y, blur, spread.

6.3Permisos

Este sistema de diseño es de propiedad de Magdalena Brandi y Sofía Oñate. Todos los cambios que se quieran hacer deben ser consultados, revisados y aprobados por Magdalena Brandi.

Una línea de tiempo de tu escucha: la prueba de que llegaste primero.

Otros proyectos

Ver todos los proyectos