Redesign de Interface Branding Testes de Usabilidade Wolkie · 2023

A revisão que
virou vitrine

A página de revisão funcionava. O problema era que parecia de outra empresa. Quando uma produtora enviava o link para o cliente, o cliente abria uma página que não tinha nada da identidade de quem havia enviado. Redesenhei o fluxo e propus uma feature de branding que não estava no brief.

Empresa Wolkie
Ano 2023
Meu papel Product Designer
Entregas Research · Wireframes Web/Mobile · Testes · Hi-fi
A revisão que virou vitrine — Wolkie
O insight central

Uma feature de usabilidade resolve o fluxo. Uma feature de branding resolve o negócio.

Nenhum usuário pediu "quero colocar minha marca na página de revisão". O que apareceu nas entrevistas foi a dor — a percepção de desprofissionalismo quando o cliente abria uma página sem contexto de quem havia enviado aquele link. A hipótese foi minha.

Dois problemas que se reforçavam

O affinity mapping que conduzi ao chegar na Wolkie revelou que a página de revisão aparecia com frequência nas reclamações — mas não da forma que eu esperava. A página funcionava. O fluxo básico existia. O problema era de identidade e clareza, e esses dois problemas se reforçavam mutuamente.

PROBLEMA 01
Identidade ausente
A página de revisão era da Wolkie, não da produtora. Quando o cliente abria o link recebido, encontrava uma página de plataforma desconhecida — sem identidade de quem havia enviado. A percepção de profissionalismo da produtora ia por água abaixo numa tela que deveria estar fortalecendo sua marca.
PROBLEMA 02
Fluxo de feedback confuso
Os usuários não tinham certeza de onde e como deixar comentários, qual era o estado atual da revisão, o que acontecia depois de aprovarem. A interface existia, mas não comunicava o que esperava do usuário em cada momento — estado invisível, ações sem contexto.

Resolver só um dos dois não resolveria nenhum deles. Um fluxo mais claro numa página genérica continuaria parecendo improvisado para o cliente final. Uma página com a marca da produtora mas com fluxo confuso continuaria frustrando o revisor. Os dois precisavam ser redesenhados juntos.

Cinco usuários, uma dor consistente

Entrevistei cinco usuários que utilizavam a página de revisão regularmente. O objetivo era entender não só o que estava quebrando, mas como eles experienciavam o processo — o que sentiam ao enviar o link para um cliente, o que o cliente costumava perguntar de volta, onde o processo travava com mais frequência.

A dor que emergiu com mais força foi a da identidade ausente. Produtoras relatavam que clientes frequentemente perguntavam "o que é essa Wolkie?" ao receber o link — uma fricção que não deveria existir numa relação profissional onde a produtora deveria ser o ponto focal.

"O cliente perguntou o que era a Wolkie. Tive que explicar que era a plataforma que eu uso para compartilhar. Parece que não tenho minha própria ferramenta."

Affinity map — síntese das entrevistas
Sessão de teste de usabilidade com usuário real

Affinity mapping com os achados das entrevistas (esq.) e sessão de teste de usabilidade com protótipo mobile (dir.)

Uma proposta além do escopo

O redesign do fluxo de revisão estava no escopo. A feature de branding não estava.

Identificar a oportunidade durante as entrevistas foi o primeiro passo. Defender a inclusão foi o segundo. A hipótese era simples: se a produtora pudesse personalizar a página com sua identidade visual, ela deixaria de ser uma ferramenta de terceiro e passaria a ser uma extensão do serviço dela.

Essa distinção importa. Uma feature que resolve dor declarada e uma feature que resolve dor identificada têm ciclos de validação diferentes. A dor aqui era real — a hipótese era minha sobre a solução.

Redesign da página de revisão — Web
Redesign da página de revisão — Mobile

Redesenho do fluxo de revisão

Em cada momento da revisão, o usuário precisa saber três coisas: onde está no processo, o que pode fazer agora e o que acontece depois. A versão anterior não respondia essas perguntas — os elementos existiam, mas sua hierarquia não priorizava a informação certa no momento certo.

Hierarquia de estado visível. O status da revisão — em andamento, aguardando aprovação, aprovado — passou a ser o elemento mais proeminente. Primeiro elemento que o usuário vê ao abrir a página.

Ações contextuais. Comentar, aprovar, solicitar revisão aparecem associados ao conteúdo que está sendo revisado, não numa barra de ferramentas genérica que o usuário precisa procurar.

Feedback de confirmação. Quando o usuário toma uma ação, o sistema confirma de forma clara. A versão anterior deixava o revisor inseguro sobre se sua ação havia sido registrada.

Customização sem precisar de designer

A interface de configuração de branding foi projetada com um princípio específico: qualquer pessoa deve conseguir aplicar a identidade visual da empresa sem precisar de ajuda técnica. Logo, banner, cores, links de redes sociais, descrição — tudo configurável de forma intuitiva.

Tela de Customização de Branding — Web
Personalização de Branding — preview mobile
Personalização de Branding — com logo aplicada

Preview em tempo real durante a configuração — web (acima) e mobile. À direita, o resultado com a identidade visual da produtora já aplicada.

Preview em tempo real de como a página ficará para o cliente. Campos com exemplos claros do que colocar em cada área. Hierarquia de elementos que segue a ordem de importância visual — logo primeiro, banner depois, informações de contato por último.

O objetivo não era só estética. Era posicionamento. Uma página de revisão com a identidade da produtora comunica ao cliente que está trabalhando com uma empresa profissional que controla sua experiência do início ao fim.

Testes mobile antes do handoff

Desenvolvi protótipos em alta fidelidade para web e mobile, com foco especial na experiência mobile — onde parte significativa das revisões acontece. Os testes de usabilidade revelaram onde as hipóteses de design não haviam sobrevivido ao contato com usuários reais.

Rótulos que não eram suficientemente descritivos, ações que não estavam visíveis no scroll inicial da página mobile, a hierarquia da seção de branding que não deixava óbvio por onde começar. Cada achado gerou uma iteração. O handoff foi feito com a versão já ajustada.

Protótipo Hi-fi — Web final
Protótipo Hi-fi — Mobile final
Resultado do teste de usabilidade no Maze — score 81

Resultado do teste de usabilidade via Maze: score 81, 8 respostas, 10 blocos testados no fluxo de revisão.

Implementado. A hipótese confirmada.

O redesign e a feature de branding foram implementados. O retorno dos clientes foi positivo — e de uma forma específica que confirmou a hipótese original. As produtoras passaram a ter mais confiança ao compartilhar o link de revisão. A página deixou de ser um constrangimento e passou a ser um argumento de venda.

"Isso é o que uma hipótese bem formulada parece quando se confirma: o problema que o usuário tinha não era exatamente o que ele descrevia, mas a solução endereçou a dor real que estava por baixo."

O que funcionou. O que custou.

O que funcionou

Identificar a oportunidade de branding antes que qualquer usuário a pedisse explicitamente. O affinity mapping revelou a dor. A hipótese traduziu essa dor numa feature que resolveu um problema de negócio real além do problema de usabilidade.

O que custou

A hipótese de branding foi desenvolvida sem validação prévia com usuários. Fui direto do insight do affinity map para a feature completa. Funcionou — mas a confiança no resultado seria maior com uma etapa de validação da hipótese antes de comprometer tempo de design.

O que eu faria diferente

Validar a hipótese antes de desenvolver

Apresentaria um protótipo simples da ideia de branding para alguns usuários antes de comprometer tempo de design na feature inteira — apenas para verificar se a dor que identifiquei era real e se a solução proposta fazia sentido para eles.

Medir adoção da feature de branding

Quantas produtoras configuraram o branding após o lançamento? Em quanto tempo? Essas métricas de adoção diriam se a hipótese confirmou na escala real de uso — não só no feedback qualitativo de clientes que responderam positivamente.

Outros projetos