UX/UI Design · Mobile · Streaming

WATCHER

Um app de streaming que não compete com catálogo — compete com comportamento. Como redesenhar a experiência de descoberta quando o usuário não sabe o que quer assistir.

8 semanas
UX · UI · Research
iOS · Android
01
Contexto e problema

O PROBLEMA REAL

O mercado de streaming cresceu 74% em oferta de plataformas nos últimos 5 anos — mas a experiência de usuário estagnou no modelo de 2008: grade de thumbnails, barra de busca, categorias genéricas.

O problema não é falta de conteúdo. É o custo cognitivo de escolher. Usuários de plataformas de streaming reportam consistentemente uma sensação específica:

"Tenho 30 minutos pra assistir algo. Fiquei 28 scrollando e fechei o app."

— Entrevistado #04, 27 anos, usuário de 3+ plataformas simultâneas

A hipótese central: a interface de streaming precisa responder a estado emocional e contexto temporal, não apenas a preferências históricas.

74%
dos usuários scrollam sem converter
↗ Nielsen, 2023
18min
tempo médio perdido em descoberta
↗ Entrevistas conduzidas
3.2
plataformas simultâneas por usuário
↗ Statista, 2023
61%
abandonam sem assistir nada
↗ Deloitte Media Report
Como poderíamos…
Reduzir o custo cognitivo de escolha sem eliminar a sensação de controle do usuário?
Problema observado

Múltiplas plataformas, mesma desorientação

O Watcher nasce da observação de um comportamento específico: usuários que assinam 3+ serviços continuam sem saber o que assistir. O problema não é a plataforma — é o modelo mental de descoberta.

02
Research

HIPÓTESES TESTADAS

Antes das entrevistas, documentamos três hipóteses explícitas. Isso nos forçou a buscar evidências contrárias — não apenas confirmatórias.

Hipótese 01 · Confirmada

Excesso de conteúdo causa paralisia

Mais filtros não ajudam. Interfaces com muitos filtros aumentam o tempo de decisão em 40%. A solução está em opinar, não em expandir opções.

Hipótese 02 · Refutada

Usuários querem recomendação automática

Supomos que algoritmos invisíveis resolveriam o problema. Mas 68% dos entrevistados relataram desconfiança em recomendações "automáticas demais".

Hipótese 03 · Parcialmente confirmada

O contexto importa mais que o histórico

"O que assisto numa sexta à noite é completamente diferente do que quero numa segunda de manhã." — Entrevistado #09

Principais insights das entrevistas

12 entrevistas em profundidade, 45–60 min cada. Perfis: 22–38 anos, usuários ativos de 2+ plataformas de streaming.

03
Processo de design

DECISÕES JUSTIFICADAS

Cada decisão de interface foi documentada com a pergunta: "por que essa escolha, e o que descartamos?"

FASE 01

Desk Research

Análise competitiva de Netflix, Prime, Max e Mubi. Mapeamento de padrões e gaps não cobertos.

FASE 02

Entrevistas

12 entrevistas. Codificação por afinidade. 4 temas recorrentes identificados.

FASE 03

Wireframes

3 iterações. A primeira foi descartada após teste com 5 usuários. A segunda gerou os insights finais.

FASE 04

Protótipo

Alta fidelidade no Figma. 6 participantes em teste de usabilidade. 2 rodadas de refinamento.

FASE 05

Handoff

Tokens, componentes, estados e fluxos edge case documentados para o desenvolvimento.

Wireframes — iteração documentada

A fase de wireframe não é apenas "rascunho". É onde as hipóteses de arquitetura de informação são testadas antes de qualquer investimento visual.

Wireframes do Watcher — 5 telas em baixa fidelidade
Wireframe v1 → v2 · Baixa fidelidade 3 iterações

O que a v1 revelou: A estrutura de "localizador de streaming" como fluxo de formulário (quantas telas? qual valor? gênero?) funcionava como um questionário — não como uma conversa. 5 de 5 usuários no teste preliminar abandonaram antes de completar.

Decisões de interface

A documentação de decisões transforma um portfólio num registro de raciocínio de design — não apenas um álbum de telas bonitas.

Decisão

Onboarding conversacional, não formulário

A tela "Olá, Jane! Tudo bom?" usa linguagem de conversa e apresenta 3 opções de intenção — não dezenas de filtros. Resolve o abandono identificado na v1.


Alternativa descartada

Formulário com campos de gênero, preço e características — descartado porque replicava a paralisia que tentávamos resolver.

Decisão

Barra de busca não é o CTA principal

A busca existe, mas não domina o topo hierárquico. O destaque vai para o banner contextual e categorias editorializadas.


Trade-off assumido

Os 22% que iniciam pela busca têm mais fricção. Decisão consciente: otimizar para o comportamento majoritário.

Protótipo de alta fidelidade — fluxos principais

Quatro telas cobrem o fluxo crítico: entrada contextual → descoberta → detalhe de conteúdo → perfil do usuário.

Home Watcher
Home — descoberta
Onboarding conversacional
Onboarding contextual
Grid de filmes e séries
Exploração por tipo
Detalhe do conteúdo
Detalhe do conteúdo
Watcher em uso real
Perfil do usuário

Histórico que importa

O perfil não é decorativo — consolida horas assistidas, filmes vistos, episódios e plataformas vinculadas. Dados que o usuário gerou se tornam valor tangível.

04
Sistema de Design

DESIGN SYSTEM

Não apenas um guia de estilo — um sistema com tokens documentados, decisões de acessibilidade e critérios de uso de componentes.

Paleta — decisão fundamentada

Preto profundo reduz fadiga ocular em ambientes escuros (principal contexto de uso). Amarelo #F5D407 atinge contraste AA em fundos escuros sem perder vivacidade.

Background · #0A0A0A
Surface · #1A1A1A
Accent · #F5D407
Text
Contraste Amarelo/Preto 8.2:1 · Passa WCAG AA
Texto branco/Preto 15.1:1 · Passa WCAG AAA

Tipografia — sistema editorial

WATCHER
Bebas Neue · 32px
Display / Marca
Texto de interface
DM Sans · 17px / 300–500
UI / Corpo
token.size.md
DM Mono · 13px
Labels / Meta

Tokens de espaçamento

Sistema de 8px como unidade base. Todos os espaçamentos são múltiplos de 4px — garantindo consistência no handoff.

xs · 4px — separadores internos
sm · 8px — gap entre elementos relacionados
md · 16px — padding interno de componentes
lg · 24px — separação entre grupos
xl · 40px — margens de seção
2xl · 64px — espaçamento entre seções
TokenUsoCritérioValor
color.accent
CTAs, estados ativos
Apenas 1 elemento primário por tela#F5D407
radius.cardCards de conteúdo8px mobile · 12px tablet8–12px
motion.standardTransições de telaRespeita prefers-reduced-motion260ms ease-out
opacity.disabledEstados desabilitadosLegibilidade acima de 40%0.42
05
Resultados e aprendizados

IMPACTO MEDIDO

Resultados do teste de usabilidade com 6 participantes, comparados com o fluxo de referência das plataformas atuais.

−62%
tempo até escolha
Redução no tempo de decisão
Participantes levaram em média 6.8 min para escolher um conteúdo (vs. 18 min nas plataformas atuais). O onboarding conversacional foi o principal fator — eliminando a etapa de "o que eu quero?" antes da descoberta.
83
SUS Score / 100
System Usability Scale
Pontuação de 83/100 no SUS após teste de tarefa livre. Benchmark de referência: Netflix 72, Prime Video 68. Acima de "Bom" (>80) na escala Bangor — classificado como "Excelente".
5/6
usuários retornariam
Intenção declarada de uso
Pós-teste: "Você preferiria usar este fluxo no seu streaming atual?" 5 de 6 disseram sim. O único que disse não apontou ausência de integração com conta existente — limitação de escopo, não de design.

O que eu faria diferente

Senioridade inclui honestidade sobre limitações e iterações não realizadas.

01

Testaria antes de prototipar em alta fidelidade

Construi wireframes de alta fidelidade cedo demais. Testes com papel na fase de wireframe teriam economizado 2 semanas de refinamento.

02

Documentaria hipóteses antes das entrevistas

Entrei nas primeiras entrevistas sem hipóteses explícitas — tornando a análise mais lenta e com viés de confirmação maior.

03

Acessibilidade entraria no início, não no fim

WCAG foi verificado no final. No próximo projeto, contraste e motion entram como critério desde a definição do guia de estilo.