Syncro

Alinhamento inicial

Na primeira reunião, conhecemos o cliente, o time técnico e o contexto do negócio. Eles apresentaram o que já havia sido desenvolvido e compartilharam as expectativas para a primeira versão do produto.

Benchmark

Com a proposta aprovada, realizamos um benchmark com plataformas concorrentes e tecnologias similares, identificando padrões de mercado, pontos de fricção e oportunidades que poderiam ser exploradas para diferenciar a experiência da Syncro.

Criação do primeiro fluxo

O fluxo inicial foi construído com base em documentação técnica e refinado a partir de insights de benchmark, heurísticas de usabilidade e conhecimento de produto. A cada tela, foram definidas as ações possíveis, seus destinos e interações esperadas.

Conteúdo e escrita

Os textos para cada tela foram definidos com UX writting em mente, e foram incluídos pontos importantes como avisos de LGPD e elementos que aumentassem a segurança percebida.

Decisão por não criar wireframes

Como o produto usaria um framework  que usa um design system (DaisyUI) já consolidado, decidimos não criar wireframes de baixa fidelidade. Avançamos direto para protótipos em alta fidelidade, usando os próprios componentes do design system como base para garantir velocidade e aderência técnica.

Wireframes da Landing Page

O usuário chega na plataforma após ser redirecionado da LP, então ela também é primordial no fluxo, e deve ser construída em paralelo. Criamos 3 versões de wirefame, cada uma alinhada a uma decisão de negócio diferente, que precisaria ser validada com o cliente.

Componentização visual

Adaptei os componentes do design system para refletir a identidade visual da Syncro e suportar o que havia sido mapeado no fluxo, tomando cuidado para não alterar muito e evitar aumento da carga técnica. Após aprovação dos fluxos e componentes, produzi todas as telas do onboarding em alta fidelidade.

Validação com cliente e time

O fluxo foi aprovado visualmente em uma reunião de alinhamento. Foram feitos ajustes com base em necessidades do time técnico e decisões do cliente.
‍O processo de melhoria foi contínuo, com interações semanais e trocas rápidas.

‍

Animações e interações

Criei animações para algumas interações importantes usando After Effects e Figma. Essa etapa foi fundamental para evitar ruídos de navegação e simular uma experiência mais fluida, mesmo com as limitações do framework.

‍

Refinamentos visuais da Landing Page

A landing passou por ajustes visuais, com efeitos, microinterações e melhorias de copy, para comunicar o produto com mais clareza e gerar maior percepção de valor.

Documentação

Documentei os componentes usados, suas variações e os ajustes aplicados ao design system. Também incluí observações técnicas para facilitar a implementação e mantivemos um canal de suporte direto com o time de desenvolvimento.

Entrega e resultados

Com todas as entregas finalizadas, o projeto foi entregue ao cliente, servindo como base sólida para as próximas etapas, como testes de usabilidade e desenvolvimento. O time avaliou positivamente o trabalho, destacando a clareza, a fidelidade visual e a aderência ao escopo proposto.