Vamos conversar

Vamolê:

Design imersivo para micro-momentos

--:--

A guerra pela atenção do usuário

Em um mundo dominado por vídeos curtos e notificações constantes, reter a atenção do usuário em textos longos através do celular é um dos maiores desafios de design de produto atuais. O Vamolê nasceu para combater o abandono de leitura, criando um ecossistema projetado especificamente para "micro-momentos" — como os 40 minutos de trajeto de ônibus diário.

O Desafio de Negócio: Como desenhar uma plataforma de e-books que reduza drasticamente a fricção na descoberta de novos títulos, incentive a assinatura de planos e, principalmente, ofereça uma interface de leitura tão imersiva que faça o usuário esquecer o ambiente caótico ao seu redor?

Entendendo o leitor moderno

Para não criarmos apenas "mais um leitor de PDFs", iniciei o projeto com uma fase aprofundada de entrevistas qualitativas. Precisávamos entender a jornada pendular dos nossos usuários e os motivos reais pelos quais eles abandonavam os livros.

"Eu até tento ler no ônibus, mas a internet cai, o aplicativo trava pra carregar a página e eu acabo abrindo o Instagram por frustração." — Usuária durante a fase de pesquisa.

Com base nas pesquisas, mapeamos nossa persona principal (Beatriz) e definimos três pilares inegociáveis para o produto:

Desenhando fluxos à prova de atrito

A arquitetura da informação foi desenhada para encurtar a distância entre abrir o app e começar a ler. Durante a fase de wireframes de baixa fidelidade, testamos diferentes taxonomias.

Um pivô importante aconteceu aqui: inicialmente, a biblioteca do usuário e a loja de novos livros dividiam o mesmo espaço. Os testes rápidos mostraram que isso confundia quem só queria abrir o app e continuar a leitura de ontem. Separamos a "Minha Estante" (focada em acesso rápido e offline) da aba "Descobrir" (focada em conversão e exploração).

Wireframe — Starting page Wireframe — Login Wireframe — Select profile Wireframe — Home Wireframe — Home variação Wireframe — Discover Wireframe — Bookshelf Wireframe — Book via Bookshelf Wireframe — Book via Discover
Wireframe — Starting page Wireframe — Login Wireframe — Select profile Wireframe — Home Wireframe — Home variação Wireframe — Discover Wireframe — Bookshelf Wireframe — Book via Bookshelf Wireframe — Book via Discover

Alta fidelidade e Design System

Com os fluxos validados, o desafio visual era criar uma interface que não competisse com o conteúdo do livro. Construí um Style Guide robusto, focado em legibilidade e redução de fadiga ocular.

A tipografia selecionada possui altos níveis de legibilidade em telas pequenas, e a paleta de cores foi restrita a tons neutros e complementares muito suaves. O Design System final contemplou componentes modulares que nos permitiram escalar o aplicativo para mais de 60 telas consistentes, garantindo um handoff técnico impecável para os desenvolvedores.

Tela Book Tela Book variação Tela Book detalhe Tela Book 1 Tela Book 2 Tela Book 2 variação Tela Book 5 Tela Book 3 Tela Book 4 Tela Book 12 Tela Catálogo Tela Catálogo variação Tela Catálogo detalhe Tela Busca no Catálogo Tela Favoritos Tela Favoritos variação Tela Favoritos detalhe Tela Favoritos alternativa Tela Biblioteca Tela Biblioteca detalhe Tela Biblioteca variação Tela Login Tela Boas-vindas Tela Onboarding Tela Criar perfil Tela Selecionar perfil Tela Selecionar perfil variação Tela Selecionar perfil detalhe Tela Planos Tela Perfil Tela Configurações Tela Configurações variação Tela Recuperar senha Tela Home Tela Mais buscados Tela Recomendados

Testando, iterando e impactando

Levamos o protótipo de alta fidelidade para testes de usabilidade com usuários reais. Mapeamos tarefas críticas: Cadastro, Login, Favoritar Livros, Download e Gestão da Biblioteca.

Os resultados validaram nossa arquitetura: obtivemos 100% de taxa de sucesso nas tarefas de Cadastro e Assinatura. No entanto, o teste revelou um gargalo de 8.24% de taxa de erro em uma tarefa específica: os usuários tinham dificuldade para ocultar ou excluir livros já lidos da sua estante. Com esse dado em mãos, refizemos a hierarquia visual do menu de contexto (ações secundárias) antes do lançamento, zerando o atrito.

100% Taxa de Sucesso

Nos fluxos primários de Cadastro, Login e Assinatura de Plano.

-8.2% Redução de Erros

Gargalo de usabilidade na gestão da biblioteca identificado e corrigido através de testes.

+60 Telas Padronizadas

Mapeadas e componentizadas dentro do Design System entregue para desenvolvimento.

O que levo desse projeto

Desenhar o Vamolê me ensinou que o papel do Product Designer muitas vezes é ser o "curador da interface". Quando o objetivo final é o foco absoluto do usuário, o melhor design é aquele que sai do caminho.

A experiência de resolver o problema do menu com base na taxa de erro de 8.24% também reforçou uma máxima importante: o design nunca está pronto até que o usuário tente usá-lo no mundo real. Muito obrigado por acompanhar este estudo de caso até aqui!