Este projeto consistiu no redesign do site institucional da BBZ Administradora de Condomínios, posto online em Dezembro de 2024, com uma atualização de identidade visual em Janeiro de 2025 (em colaboração com uma agência de design), versão que segue em uso até o momento.
O resultado foi um site com alta performance, UI consistente e experiência otimizada para o público-alvo.

O site está com valores verdes no resultado de testes de PageSpeed Insights, no modo desktop, e razoáveis no modo mobile.

Destaques Técnicos

• Design System no Figma: Baseado no “Simple Design System” lançado pela própria comunidade da Figma oficial, usado aqui para criar os protótipos e para validação dos stakeholders no início de tudo.
• Tecnologias: HTML/CSS/JS puros, Bootstrap 5 e PHP básico (sem CMS), priorizando velocidade e SEO. Tudo desenvolvido e codificado por mim, de fato.
• Performance: Nota 90+ no PageSpeed Insights (desktop, maioria dos usuários visitantes deste site), e 65 mobile.
• Animações LottieFiles: Implementadas para reforçar a identidade visual e cativar o usuário. Animação vetorizada SVG inline.
• Detalhes gráficos de ícones e logos todos em vetores SVG inline para leveza e fluidez.
  

☝️Obs.: para ver alguma destas imagens em tamanho real, clique com o botão direito do mouse, escolha a opção “abrir imagem em outra aba” (ou “abrir imagem num novo separador”), e na aba que abrir, clique novamente nela (na imagem que mostrará), e o seu browser dará zoom no tamanho real automaticamente.

Processo

Teve início em Novembro 2024, e concluído em Dezembro daquele ano. Esta foi a primeira versão. Uma abordagem inteiramente minha, tomando como referências alguns materias que a equipe de marketing da empresa já usava, como PPTs e designs feitos em apps variados.

Já a segunda teve a participação da agência de Design chamada Megalo, que prestou consultoria para a BBZ na busca por um aperfeiçoamento em sua identidade visual. O logotipo como visto hoje já era assim antes disso, e antes de eu também ter me adentrado na empresa para contribuir, mas a Megalo fez ajustes sutis (mas importantes) no desenho, e elaborou todo um manual de identidade, que é disponibilizado online também.

Daí eu apliquei no site as diretrizes do manual deles na segunda versão, distribuindo melhor a paleta de cores em todo o layout do site.

Não seguimos metodologias de criação ou de user research no entanto… Apenas levantamos dados básicos sobre o público-alvo, as necessidades das equipes de atendimento, e adotamos a linguagem de comunicação orientada pela agência de Design Gráfico (i.e., a Megalo), com seu manual de identidade visual. A agência de fato fez pesquisas de público-alvo e persona, e eu adotei as abordagens trazidas por eles em todo este design de interface.

Meu papel foi traduzir tudo isso em UI Design, e aplicar as melhores práticas de UX (ou as mínimas viáveis, pelo menos, sobre as quais eu já tinha noção com o meu repertório de estudos e experiência), para termos um site eficiente para carregar, e para renovar a identidade visual e comunicativa da empresa. Para testes mais precisos, o máximo foram: o Figma para validação, e o PageSpeed Insights para refinar a qualidade do código, aprimorar o SEO, e estabilizar a performance em geral.

Figma como ferramenta principal de criação

Usei Figma no início do processo de redesign, e também durante o processo de desenvolvimento. Criei um Design System para a empresa com ajuda de um Figma set lançado pela própria comunidade da Figma oficial, chamado “Simple Design System”. A partir dele, fui construindo todos os elementos, compondo de modo a gerar um Figma Prototype, que eu usava para apresentar aos stakeholders e validar. Mas usei também Adobe Illustrator (para refinar alguns detalhes de vetor), e Photoshop (para tratar imagens de pixels, como as fotografias aplicadas no layout, etc.).

Porém, não usei o Figma Devmode, devido a restrições que até a época eram comuns no aplicativo, e a questões técnicas do lado da BBZ, que me fizeram também desenvolver o site inteiro de modo estático. O site hoje é de fato HTML, CSS, e JS puros, porém sem CMS. No máximo implementando com arquivos de PHP, com includes básicos. E claro, foi usado o Bootstrap 5 como framework de layout e componentes.
A empresa foi sugerida de fazermos em WordPress, mas preferiram seguir um caminho mais fácil e rápido, uma vez que queriam comunicar apenas o essencial da empresa em sua home-page e páginas internas, que são relativamente poucas.

Conclusão

Considero este um projeto de sucesso, e uma participação consistente minha como UI Designer que conduziu todo o processo, oferecendo insights tanto para a equipe da empresa, seus stakeholders, quanto à agência de design gráfico que participou conjuntamente.
Usei Figma como ferramenta de Design System, e desenvolvi todo o código posteriormente.
Tive o controle de toda a passagem do visual para o técnico, e consegui refletir na interface o que foi planejado no início com os primeiros protótipos visuais.
Ou seja, eu fui um UI Designer full aqui. (risos!)