Função Aplicação de identidade no layout; redação; programação dos sites em wordpress.
Conclusão Junho - 2024
Introdução 🧭
A BaaS2u é uma fintech para a qual trabalho, focada em construir soluções financeiras resolvendo as principais dores de grandes redes e ainda gerando novas fontes de receitas com produtos financeiros customizados. Com tecnologia proprietária, cria bancos digitais para diversos mercados, desenvolve ecossistemas financeiros inteiros e disponibiliza seus produtos financeiros para os usuários em aplicativo para dispositivos móveis e internet banking para acesso via desktop.
Estes projetos de site foram desenvolvidos no formato whitelabel (mesmo template), para os clientes para os quais foram criados os bancos digitais. Os sites têm a função de apresentar as principais informações dos bancos, além de disponibilizar acessos às lojinhas de aplicativos (app store e google play), aos contatos de suporte dos bancos, termos e políticas de uso e acesso ao internet banking da solução.
Metodologias ⚙️
→ Wireframe em alta fidelidade;
→ Programação no-code com elementor (wordpress).
Solução 💊
Foram desenvolvidos 5 sites no modelo whitelabel ao longo de 2023 e 2024, para clientes de diferentes segmentos do mercado. Para cada um destes projetos foi realizada a aplicação da identidade visual (style guide do site e ajustes nas telas); redação conforme texto institucional do cliente; programação no-code através da plataforma wordpress, com o Elementor; e adaptação do layout programado na versão desktop para as versões mobile e tablet.
O layout base original para os sites, o qual repliquei para todos os projetos, foi desenvolvido na ferramenta Adobe XD, pelo UI designer Rafael Ávila e o primeiro site foi programado por um parceiro terceirizado. A partir do segundo site institucional para cliente, fui responsável pela programação (no-code).
Página com os acessos para as lojinhas de aplicativos
Página com os acessos aos termos de uso (PDFs vinculados)
Página com a política de privacidade
Rodapé dos sites com os acessos aos contatos (Link e QR Code para o número whatsapp do suporte do banco), tarifários (PDFs), termos e guia de uso (links).
Além do uso do plugin Elementor, para a construção do site, o desenvolvimento também contou com o uso de plugin para a clonagem de projetos (já que sempre é utilizado o mesmo template e somente alterados os textos, links, arquivos e identidade visual); para o botão flutuante de direcionamento para a plataforma whatsapp; e para a customização otimizada do header e footer.
Ao longo desses 2 anos, para cada projeto de site iniciado foi realizado um breve estudo para possíveis otimizações e aplicadas as possíveis melhorias mapeadas, como: otimização das imagens; troca de plugins para alcançar maior eficiência; melhorias na diagramação dos conteúdos dentro dos containers do Elementor (padronização em margens e paddings) e implementação de header fixo (em que se pode conferir no projeto do Dom Bank).
Pontos de melhoria ⚠️
→ Por falta de conhecimento e prioridade, não configurei os breakpoints dos sites;
→ Os projetos dos sites mais antigos precisam ser otimizados (margens e paddings, topo fixo e animações das imagens).
Principais aprendizados 💡
Eu nunca tinha trabalhado com desenvolvimento de site, mas já tinha prática na alimentação de sites em wordpress (conteúdos para blog e alteração de textos e imagens), portanto todos os processos foram muito ricos em aprendizado pra mim. Porém, acredito que os processos nos quais tive meus principais aprendizados (os quais estudei mais para aprender a fazer) foram:
→ Clonagem de um projeto de site (encontrar o melhor plugin e processo para realizar o processo de clonar o site);
→ Definição de margens e paddings (desktop, mobile e tablet);
→ Header fixo.
