Contexto
Finalizado
Freelance
Financeiro
Landing page
Institucional
Pesquisa de mercado
Escrita de cópia
Benchmark
Wireframes
Design UI
Style guide
Protótipo
Entregas
Escrita de cópia
Design UI
Prototipagem
Projeto
Site institucional
Setor financeiro
One-page
Período
Fev. - Mar. 2024
Rio Grande do Sul
Brasil
Ferramentas
Figma
Google Drive
Google Meet
Google Forms
Framer
Análise de Mercado e Competidores
Para entender as práticas atuais do mercado, realizei uma busca por outras empresas do ramo, observando também as indicações da cliente de concorrentes locais. Pude perceber que, apesar da característica predominantemente remota, poucas empresas contavam com presença online ativa.
Algumas possuíam páginas com grande conteúdo textual, representando alta carga cognitiva para um possível cliente. Outras não disponibilizavam claramente os serviços oferecidos, dificultando o acesso à informações básicas.
Pesquisa com usuários
Elaborei um formulário com duas perguntas para entender melhor como as pessoas descobrem novos serviços e como se comunicam com as empresas e prestadores após a escolha.
O formulário foi criado através do Google Forms e contei com a participação de 23 pessoas, sendo elas representantes de pessoas jurídicas (empresários) e pessoas físicas.
Descoberta de serviços
Quando ao meio de descoberta, além das opções apresentadas ao lado e da opção "outros", em que o participante coloca uma resposta personalizada, também coloquei diversas redes sociais .
A grande maioria dos participantes disse procurar por novos produtos e serviços diretamente por mecanismos de pesquisa (Google).
Em segundo lugar veio o Instagram, com 7 votos, e por último, 4 participantes disseram utilizar referências pessoais de conhecidos.
Meio de contato
Quando perguntados sobre o meio de comunicação preferido para entrar em contato para saber mais sobre um serviço ou produto, a maioria dos participantes disse preferir o Whatsapp, por sua praticidade.
Em segundo lugar, os participantes disseram preferir o e-mail, por representar um meio mais formal e possibilitar o encaminhamento de informações e mensagens dentro de um ambiente profissional, entre diferentes setores.
A pesquisa inicial mostra a necessidade de uma presença online ativa, bem como a oportunidade de apresentação da proposta comercial através de um site institucional dedicado.
Wireframes
Definida a ideia inicial do projeto, criei as wireframes mantendo o requerimento da cliente de apresentar o conteúdo relevante em apenas uma página. Ao todo, foram criadas 6 variações de layout.
Decidi seguir com a navegação lateral, um padrão não tão utilizado, reforçando o diferencial da marca em relação aos competidores, bem como a ideia de manter o scroll das seções travadas ao seu topo, para que o cliente tivesse em foco apenas um assunto por vez.
Design visual
Com a estrutura definida e aprovada, comecei a aplicar a identidade visual da cliente, os assets fornecidos (imagens), então escolhi a família da fonte e de ícones para o projeto.
Iterações
Nas primeiras iterações comecei testando a paleta de cores da marca da cliente, procurando uma combinação que funcionasse e mantivesse um bom contraste para os elementos como CTA, botões e navegação.
Hero
As primeiras versões do hero ficaram muito escuras, numa tentativa de tornar o texto mais legível.
Para a versão final, decidi seguir com um gradiente na margem inferior da seção, assim, o texto ficaria legível mantendo a imagem perfeitamente visível ao fundo,
Mobile
Para a versão mobile, o CTA fica em destaque no header e o formulário de contato deve ser rolado, por conta da sua extensão.
Guia de estilos
Tipografia
Regular, semibold e bold
Cores
Cinzas
25
#FCFCFD
100
#F2F4F7
200
#EAECF0
300
#D0D5DD
400
#98A2B3
500
#667085
700
#344054
800
#1D2939
900
#101828
Primária
100
#E5F2EE
200
#B6E3D2
300
#7EBEAC
400
#5EB896
500
#519E82
600
#376B58
700
#376B58
800
#2A5243
900
#1D382E
Secundária
100
#FFF5E8
200
#F5E3CE
300
#E3C6A3
400
#E3B174
500
#C99D67
600
#B0895A
700
#7D6140
800
#634D33
900
#4A3A26
Iconografia
Espaçamentos
Os espaçamentos, radius, paddings e margins seguem a grade de 8 pontos.
Protótipo
Acima disponibilizo o protótipo criado para mostrar a minha visão à cliente. Por conta das restrições de dimensões, algumas telas podem não apresentá-lo corretamente, neste caso, clique no botão abaixo para acessar o protótipo em alta resolução.
Considerações finais
Este foi o meu primeiro projeto profissional, a cliente, proprietária de um escritório contábil, me procurou para auxiliar na criação de um site institucional a fim de reforçar sua presença online. O projeto deveria permitir um rápido desenvolvimento, atendo-se ao guia de marca já definido, consistente em apenas uma página, apresentando de forma breve os serviços realizados, bem como uma introdução ao método utilizado, o BPO financeiro.
A cliente já possuía um desenvolvedor e portanto pude realizar o processo de handoff diretamente para o profissional de front-end ao terminar o projeto.
Se pudesse fazer algo diferente, mudaria o formulário para requerer apenas o e-mail do cliente, captando o lead para disparo de contato de boas vindas e algumas opções rápidas de "pacotes de serviços", facilitando o acesso do cliente, sem precisar preencher um formulário tão longo. Uma limitação foi a utilização ao chatbot de Whatsapp, que poderia ser útil na fase de contato inicial com o cliente.
Ver essa entrega realizada foi uma conquista e hoje, olhando para o primeiro projeto que fiz, consigo perceber o meu desenvolvimento na área de design.