Syncro

Objetivos

Meu papel foi criar o design visual dessa primeira etapa da plataforma, garantindo que o fluxo fosse funcional, tecnicamente viável e visualmente coerente com a identidade da marca. Para isso, era necessário entender o produto, alinhar com o time técnico e o cliente, aplicar boas práticas de usabilidade e entregar protótipos de alta fidelidade prontos para o desenvolvimento, respeitando as limitações do framework adotado (DaisyUI).

Alinhamento inicial

Logo nas primeiras reuniões com o cliente e com o time técnico, mergulhamos no contexto do negócio, entendi o que já havia sido desenvolvido e coletei as principais expectativas para a primeira entrega. Isso ajudou a guiar todas as decisões de design com clareza desde o início.

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

Conseguimos entregar todos os fluxos de onboarding e a landing page dentro do prazo de 21 dias, atendendo completamente às expectativas definidas no início do projeto: entregar um fluxo funcional, tecnicamente viável e alinhado à identidade da marca. O material entregue serviu como base sólida para testes de usabilidade e para o início do desenvolvimento. O trabalho foi bem recebido pelo time, que destacou a clareza da navegação, a fidelidade visual das telas e a aderência ao escopo. A estratégia de pular os wireframes de baixa fidelidade e usar componentes reais do design system foi essencial para acelerar o processo sem comprometer a qualidade.