← Volver atrás
Product & UX Case Study

Audivo

Diseño de una experiencia nativa de música self-hosted: de la parálisis por elección al descubrimiento contextual, para usuarios de servidores Navidrome / Subsonic.

Diseño & desarrolloAbel Mercadal
RolUX Research · Product · iOS Eng.
PlataformaiOS 26 · SwiftUI nativo
DistribuciónTestFlight — beta activa
Scroll
EquipoProducto individual
HerramientasFigma · SwiftUI
ComunidadReddit — soporte & notas
Beta50 usuarios activos
01
Overview & oportunidad de mercado

Propiedad digital, sin sacrificar fluidez nativa

En los últimos años, miles de usuarios han vuelto a la propiedad digital mediante servidores privados como Navidrome u OpenSubsonic, almacenando bibliotecas de más de 10.000 o 40.000 archivos en alta fidelidad (FLAC).

Es una comunidad técnica, exigente con el sonido, y sistemáticamente desatendida por el software móvil disponible: interfaces rígidas que se asemejan a hojas de cálculo, cero contexto, cero personalidad. A pesar de poseer miles de discos, los usuarios experimentaban la parálisis por elección.

Lo que existía
Clientes Subsonic funcionales pero fríos — listas planas, sin curación, pensados para "encontrar un archivo", no para "vivir con la música".
Lo que propone Audivo
Una capa de experiencia nativa iOS sobre tu propia biblioteca: recomendación contextual, letras sincronizadas, CarPlay y una identidad visual que reacciona a lo que estás escuchando.
Self-hosting Subsonic / Navidrome API SwiftUI nativo iOS 26 · Liquid Glass CarPlay Producto 0→1
02
Mi rol y proceso

Diseñar y construir al mismo tiempo

Audivo es un proyecto en el que asumí las dos mitades del ciclo de producto que normalmente están separadas en dos personas: diseño y desarrollo. Cada decisión de UX la valido de inmediato contra su coste real de implementación en SwiftUI — y cada límite técnico se traduce de vuelta a una decisión de diseño consciente, no a un compromiso silencioso.

No hay una fase de "hand-off" donde el diseño se rompe contra la realidad técnica, porque diseño e implemento en el mismo ciclo semanal.

Discover
Entrevistas por arquetipos + observación de comportamiento en TestFlight → insights de fricción y confianza.
Define
Problem framing, Jobs-to-be-Done, arquitectura de la información → mapa de navegación, principio de 2 toques.
Develop
Bocetos analógicos, wireframes de baja fidelidad, sistema de diseño → componentes Liquid Glass.
Deliver
Implementación nativa SwiftUI, beta pública, iteración sobre feedback real → producto en producción.
03
User discovery & qualitative research

Investigación cualitativa y arquetipos

Lideré una etapa de investigación cualitativa mediante entrevistas semiestructuradas con 5 arquetipos diferenciados de usuario self-hoster, para identificar fricciones en la navegación diaria y el grado de confianza hacia la automatización.

Para validar en condiciones reales, desplegué una beta pública en TestFlight con 50 usuarios activos. A través del feedback no moderado y de una comunidad activa en Reddit — donde publico notas de versión y respondo directamente a la crítica — recopilé datos continuos sobre comportamiento en movilidad: conducción, transporte público, ejercicio.

Ejes de la entrevista

  • Hábitos de escucha y dispositivos usados para acceder al servidor propio
  • Confianza hacia recomendaciones algorítmicas sobre la propia colección
  • Frustraciones concretas con clientes Subsonic existentes
  • Expectativas heredadas de apps comerciales trasladadas al self-hosting
04
Problem framing & information architecture

Un máximo de dos toques

"Poseer una biblioteca musical masiva no garantiza su disfrute si el software no proporciona caminos claros de exploración intuitiva."
Funcional
Sin saber qué escuchar, quiero algo relevante de mi colección en segundos, sin navegar carpetas.
Emocional
Al delegar una decisión en la automatización, quiero sentir que sigo teniendo el control.
Situacional
Conduciendo o entrenando, quiero controles alcanzables con una mano, sin mirar la pantalla.

Estructuré la arquitectura de información para eliminar niveles de profundidad innecesarios: cualquier selección musical o radio contextual se inicia en un máximo de dos toques, desde cualquier punto de la app.

  • Home → Hub de redescubrimiento, Artist in the Spotlight, conciertos cercanos
  • Player → 1 toque desde el MiniPlayer persistente
  • Library → álbumes, artistas, playlists, podcasts, búsqueda global
  • Replay → estadísticas de escucha estilo Wrapped
05
Spatial ergonomics & design system

Ergonomía del pulgar y Ley de Fitts

Comencé dibujando bocetos a mano para estudiar la ergonomía de la mano sobre el dispositivo. Situé el MiniPlayer y los controles principales en la zona de alcance natural del pulgar, evitando cambios de postura para acciones frecuentes.

Desarrollé wireframes en escala de grises para validar la jerarquía visual sin la distracción del color, aplicando la Ley de Fitts: toda superficie táctil con un mínimo de 44×44 pt.

El sistema de diseño sigue las Apple Human Interface Guidelines: componentes de cristal traslúcido (Liquid Glass), tipografía musical SpotifyMix, y un motor visual adaptativo que extrae tonos en tiempo real de la portada sonando.

Componentes
Tab bar Liquid Glass + MiniPlayer, cards de descubrimiento con color adaptativo, sheets nativas contextuales.
Principios
Consistencia con los patrones nativos de iOS 26. Un mismo lenguaje visual entre Home, Player y CarPlay.
Accesibilidad
Personalidad sin sacrificar legibilidad ni accesibilidad táctil — 100% de cumplimiento en áreas de toque.
06
High-fidelity interface design

Pantallas clave del producto

Todas las pantallas están implementadas y funcionando en SwiftUI nativo — no son mockups estáticos.

HomeView

HomeView

Saludo personalizado, Hub de Redescubrimiento ambiental, tarjeta diaria "Artist in the Spotlight" y conciertos cercanos vía Ticketmaster.

PlayerContentView

PlayerContentView

Extracción adaptativa de color desde la portada, letras sincronizadas línea por línea (Live Lyrics) y conmutador de vídeo Spotify Canvas.

CarPlay

Experiencia CarPlay

Controles simplificados y de alto contraste; requirió migrar parte de la arquitectura a UIKit AppDelegate para la integración completa.

Automix

Automix — DJ engine

Detección de BPM, crossfade y transiciones beat-matched sobre AVAudioEngine, con control explícito del usuario en todo momento.

Replay

Replay

Estadísticas de escucha estilo "Wrapped" desde el historial local — refuerza el vínculo con una biblioteca que el usuario ya posee.

Podcast Explorer

Podcast Explorer

Descubrimiento vía iTunes Search API con parsing de RSS, integrado en el mismo lenguaje visual que el resto de la app.

07
Usability testing & iterative refinement

Fricciones reales, detectadas en beta

Fricción 01 — Temor a perder el control en selecciones por IA
"Me da reparo usar la sugerencia automática porque no sé qué criterio sigue ni si está modificando los archivos de mi servidor."

Iteración de UX: revelación progresiva (Progressive Disclosure) — notas informativas sobre el criterio de selección, asegurando visualmente que la biblioteca personal permanece intacta.

Fricción 02 — Control del vídeo en bucle en redes móviles
"Me gusta el vídeo animado, pero no quiero que se cargue automáticamente cuando voy con datos móviles o me queda poca batería."

Iteración de UX: conmutador explícito con icono de cámara en la barra inferior — control total del usuario para alternar entre portada estática y vídeo, en un toque.

Fricción 03 — Canciones con varios artistas colaboradores
"Si la canción es una colaboración de dos artistas, ¿cómo elijo a cuál de los dos ir?"

Iteración de UX: hoja modal nativa (ArtistSelectionSheet) que detecta colaboraciones y permite elegir el perfil de destino de forma transparente.

Otras decisiones de diseño clave

CarPlay
Migrar a UIKit AppDelegate fue una decisión tomada desde diseño, no solo ingeniería: sin ella, la experiencia en el coche habría quedado degradada.
Automix
Vía de escape clara desde el inicio — pausar la mezcla automática sin perder el hilo de reproducción, respondiendo a la misma desconfianza de la Fricción 01.
Karaoke & letras
La animación palabra por palabra se pensó como extensión natural del Player, con los mismos gestos que el resto de la reproducción.
Iconos alternativos
Personalización de bajo coste, alto valor percibido para una comunidad que ya personaliza activamente su propio servidor.
08
Diseño defensivo & colaboración con ingeniería

Diseñar para el fallo, no solo para el camino feliz

La responsabilidad del diseñador frente a errores técnicos —retardos de red o pausas de búfer, habituales al reproducir desde un servidor doméstico— consiste en diseñar defensivamente para proteger la experiencia.

Al ser también quien implementa, el ciclo entre "esto falla en producción" y "esto se corrige en diseño" es inmediato — no hay una capa de traducción entre equipos que se pierda por el camino.

Servidor no responde
Skeleton de las cards de descubrimiento en vez de pantalla en blanco o spinner indefinido.
Pérdida de conexión
Mensaje de estado explícito + reintento manual, sin interrumpir la reproducción si el buffer aún tiene margen.
Metadatos incompletos
Fallback visual coherente con el sistema de diseño, nunca un hueco vacío.
09
UX metrics, impact & next steps

Métricas de impacto

<2.0s
Time-to-First-Audio
74%
Aceptación del Hub de Redescubrimiento
100%
Cumplimiento Ley de Fitts (44×44pt)

El Time-to-First-Audio reduce la latencia percibida gracias a una arquitectura visual limpia; la tasa de aceptación del Hub valida la solución frente a la parálisis por elección; y el cumplimiento de la Ley de Fitts asegura áreas de toque accesibles en todos los elementos interactivos.

  • Distribución activa y continua vía TestFlight, con actualizaciones frecuentes
  • Comunidad pública en Reddit como canal permanente de notas de versión y crítica
  • Producto usado a diario por su propio diseñador/desarrollador — dogfooding continuo
10
Roadmap & próximas iteraciones

Hacia dónde va el producto

  • Analizar el feedback continuo de los 50 usuarios activos en TestFlight
  • Recomendaciones inteligentes sin conexión a internet
  • Widgets para la pantalla de bloqueo y Dynamic Island
  • Refinar el sistema de theme switching en SwiftUI
  • Navegación por pestañas desplegables, inspirada en Apple Sports
  • Evolucionar el backend propio de descarga (FastAPI + spotdl)