Voltar ao Início
LinkedIn
Claro Brasil / iMusicaCorp • América Latina

Claro música: Redesign, Design Ops e Design System em escala.

Liderança estratégica de UX, governança de Design System corporativo e estruturação de rituais de Design Ops para conectar objetivos de negócio, engenharia e necessidades reais de milhões de usuários na América Latina.

Papel

Senior Product Designer & UX Lead

Abrangência

Brasil, México e Colômbia

Eficiência

-50% Tempo de Handoff*

Plataformas

Mobile, Tablet, Web & TV

Claro música Ecossistema Digital
01 Contexto

O cenário do produto

O Claro música é o serviço oficial de streaming de áudio e entretenimento da América Móvil (Claro), com presença em mais de 16 países na América Latina. O produto atende a múltiplos contextos de escuta através de experiências dedicadas em smartphones (iOS e Android), tablets e iPads, versão Web para navegadores desktop e aplicações para Smart TVs.

Com squads multidisciplinares distribuídos entre o Brasil e o México, a plataforma enfrentava o desafio clássico de produtos que crescem rapidamente: múltiplos silos de desenvolvimento, padrões visuais divergentes entre plataformas e uma experiência em tablets que funcionava como uma interface mobile esticada, sem tirar proveito do espaço útil de tela.

02 O Problema

Fricção de uso e gargalos de escala operacional

UX

Fricção na Jornada do Usuário

Fricção no onboarding inicial, lentidão até o início da primeira reprodução (Time to First Play) e falta de ergonomia tátil em tablets: ao segurar o dispositivo na horizontal, botões centrais exigiam esforço desnecessário, enquanto no celular os alvos de toque ficavam comprimidos.

BIZ

Débito Técnico e Custo de Handoff

A ausência de uma linguagem compartilhada de design fazia com que engenheiros recriassem componentes semelhantes do zero. O handoff exigia alinhamentos manuais excessivos, gerando retrabalho de código, inconsistências visuais em produção e alto lead time para lançamento de features.

03 Discovery

Diagnóstico aprofundado e mapeamento de causas raízes

Estruturei um processo de discovery articulando auditoria técnica de interface, análise de telemetria de produto e rodadas de pesquisa qualitativa com usuários:

Auditoria Multiplataforma

Mapeamento de 100% das telas em smartphones, tablets, navegadores desktop e Smart TVs, catalogando mais de 40 variações divergentes de botões e cards de mídia.

Breakpoints & Ergonomia

Mapeamento ergonômico de zonas de alcance do polegar na transição retrato/paisagem em iPads e tablets Android.

Pesquisa com Usuários

Entrevistas e testes moderados para mapear a alternância de uso entre desktop no trabalho, smartphone em trânsito e tablet no ambiente doméstico.

04 Insights

O que a investigação revelou

01

Tablets Pedem Dual-Pane

Ouvintes em tablets demandavam visualização paralela: catálogo de busca à esquerda e controle da fila de reprodução à direita sem sobreposição de telas.

02

Acesso Imediato ao Catálogo

Formulários extensos de preferências no primeiro login retardavam o valor principal do streaming, aumentando o abandono no primeiro dia de uso.

03

Tokens como Linguagem Comum

A criação de tokens semânticos compartilhados era indispensável para unificar o vocabulário visual entre os times do Brasil e do México.

05 Estratégia

Hipóteses e direcionamento

Hipótese 1: Design System Multiplataforma

Ao estruturar uma biblioteca corporativa com tokens compartilhados, buscamos reduzir significativamente o tempo de handoff e assegurar paridade visual entre todas as frentes.

Hipótese 2: Arquitetura Dual-Pane para Tablets

Ao desenhar layouts adaptativos com duas colunas em tablets (conteúdo + player lateral persistente), aumentaremos a retenção e a facilidade de criação de playlists.

Hipótese 3: Governança de Design Ops e Rituais

Ao estabelecer rituais contínuos de design review, documentação padronizada e critérios claros de aceitação com Engenharia e Produto, garantiremos velocidade e consistência sustentável.

06 Decisões

Priorização e decisões fundamentadas

Navegação Ergonômica em Tablets

Menu lateral ancorado na zona natural de alcance do polegar, painel de reprodução fixo à direita e grid de capas em alta densidade, aproveitando 100% da área útil em orientação paisagem e retrato.

Mini Player Persistente & Gestos Mobile

Barra inferior persistente em smartphones que permite pausar, avançar ou expandir o player completo com um gesto de deslizar para cima, sem interromper a navegação por rádios, artistas e álbuns.

07 Design & Telas

Ecossistema Multiplataforma

Solução projetada para Web Desktop, Tablets (Landscape e Portrait), Smartphones e o ecossistema de Design System corporativo.

01. Web Desktop — Dashboard & Streaming Hub

Navegação Lateral & Player Contínuo
Dashboard Web Claro música

Grid expansível com suporte a resoluções ultrawide, carrosséis contextuais de lançamentos e barra de controle contínuo de áudio no rodapé.

02. Experiência em Tablets & iPads

Adaptação Dual-Pane e Ergonomia Tátil

Orientação Paisagem (Landscape)

Dual-Pane / Split View

Aproveitamento de 100% da largura útil com catálogo principal à esquerda e controle do player e fila de reprodução à direita.

Claro música Tablet Landscape

Orientação Retrato (Portrait)

Grid Vertical Fluido

Adaptação de colunas para leitura confortável e navegação rápida ao segurar o tablet na vertical com ambas as mãos.

Claro música Tablet Portrait
03. Jornadas Centrais no Smartphone

Navegação com uma só mão e alvos de toque calibrados

Claro música Mobile Player
Player & Controles

Gestos e fila de reprodução

Claro música Mobile Album
Álbum & Faixas

Hierarquia clara e ações rápidas

Claro música Mobile Artist
Perfil de Artista

Top faixas, álbuns e rádios

Claro música Mobile Library
Biblioteca Pessoal

Playlists, downloads e favoritos

04. Governança e Escala Técnica

Design System Corporativo & Diretrizes de Handoff

Tokens & Componentes

Figma Tokens

Padronização de estados de botões, variantes de feedback visual e tokens tipográficos sincronizados com os repositórios de código.

Design System Buttons Claro música

Diretrizes de Governança

Design Ops

Documentação estruturada para squads no Brasil e no México, reduzindo significativamente ambiguidades e retrabalho no processo de entrega técnica.

Design System Guidelines Claro música
08 Validação

Testes com usuários e iterações de produto

Testes com Usuários na Colômbia

Condução de sessões estruturadas de testes de usabilidade com usuários em Bogotá e Medellín, avaliando a facilidade de navegação entre playlists locais, rádios ao vivo e a ergonomia de toque em tablets e smartphones.

Avaliação Contínua de Usabilidade

Evolução consistente na avaliação de usabilidade após as iterações validadas com usuários, registrando ganho sustentado na facilidade de aprendizado do aplicativo e satisfação geral na experiência de streaming.

09 Impacto

Resultados e eficiência operacional

-50%*

Tempo de Handoff & Entrega

Redução no ciclo de desenvolvimento e aprovação técnica com o Design System unificado e tokens compartilhados.

Escala

Consistência LATAM

Experiência uniforme implementada em Smartphones, Tablets, Web e TVs em múltiplos países da região.

SUS

Satisfação dos Usuários

Evolução consistente na avaliação de usabilidade e facilidade de descoberta do catálogo musical após as iterações validadas com usuários.

*Métrica de eficiência operacional consolidada; dados analíticos detalhados e valores nominais protegidos por confidencialidade corporativa.

10 Seu Papel

Responsabilidades e liderança direta

  • Liderança da Estratégia de UX: Direção e concepção end-to-end da experiência de produto para a plataforma Claro música em todos os pontos de contato digitais.
  • Design System Corporativo: Criação, governança e documentação da biblioteca de componentes e tokens adaptativos para Smartphones, Tablets, Web e TVs.
  • Estruturação de Design Ops: Definição de rituais de design review, critérios de aceitação de UX e processos ágeis com squads distribuídos internacionalmente.
  • Mediação com Stakeholders: Alinhamento contínuo entre objetivos de negócio, viabilidade de engenharia e métricas de produto com lideranças no Brasil e no México.
Próximo Estudo de Caso

Azul Linhas Aéreas

Redesign da jornada do passageiro e cartão de embarque offline

Ver Case da Azul