Oficina Reserva:do e-commercepara o app
O primeiro app de uma marca de moda masculina forte no digital: benchmarking, MVP, um design system atômico publicado como biblioteca e a UI de todas as telas.
Product Designer Sênior
Figma e FigJam
Benchmarking, fluxos, design system e UI
iOS e Android
Uma marca de moda masculina forte no e-commerce, sem um app para aproximar o cliente e simplificar a compra no celular.
Benchmarking, fluxos e wireframes do MVP, um design system atômico publicado como biblioteca no Figma, a UI de todas as telas e o handoff para o desenvolvimento.
Uma marca pronta para sair do navegador
A Oficina Reserva é uma marca brasileira de moda masculina conhecida pelo visual moderno e pela qualidade. Com vendas fortes no e-commerce, o próximo passo era um app para aumentar o engajamento, simplificar a compra e fortalecer a fidelidade.
O discovery e a estratégia de produto já estavam definidos. Entrei como Product Designer Sênior para transformar essa estratégia em produto: definição do MVP, sistema visual e todas as telas.
Como outras marcas falam com o público masculino
Analisei concorrentes diretos e indiretos olhando para três coisas: os elementos visuais que posicionam a marca, os componentes que destacam as ações principais e as interações que encurtam o caminho até a compra.
Decidir o MVP antes de desenhar a primeira tela
Com o PO e o time de produto, desenhei os fluxos e os wireframes do app. Foi aí que ficou claro o que entrava no MVP: só o essencial para a estratégia e para a necessidade de quem compra.
Um sistema atômico, publicado como biblioteca
Construí o design system com base em atomic design. Tokens de cor, tipografia e espaçamento na base; átomos como botões; moléculas como campos de formulário; e organismos como as barras de navegação.
Publiquei tudo como biblioteca no Figma, para que qualquer arquivo do projeto usasse a mesma fonte e cada atualização chegasse em todas as telas de uma vez.
Cada componente pensado também para quando dá errado
Organizei as telas por funcionalidade e desenhei os casos de borda de cada componente: listas vazias, erros, estados de carregamento e permissões. Cada tela e interação saiu com documentação e handoff para o desenvolvimento, o que preservou a intenção do design até a implementação.
Lançado em julho de 2024, nas duas lojas
A marca vendia só pelo site.
Um app consistente em iOS e Android, com adoção forte para um produto novo.
O que eu levo
- Craft está nos detalhes que ninguém pede. Os estados de borda são o que separa uma tela bonita de um produto que funciona.
- Sistema primeiro, telas depois. Com a biblioteca publicada, cada atualização ficou mais rápida e consistente.
O que eu faria diferente: definiria os eventos de analytics junto com os componentes, para medir o uso de cada fluxo desde o lançamento.