Personalização de marca B2B
Ferramentas de marca em autosserviço para administradores de empresa nas páginas públicas de perfil, para que atualizar identidade visual não dependesse de chamado de suporte.
Visão geral
Em uma plataforma voltada ao consumidor, com páginas públicas de perfil em que performance importava, trabalhei nas ferramentas de personalização de marca para que administradores de empresa gerenciassem a identidade sem abrir chamado de suporte.
Problema
As opções de personalização do perfil eram poucas, então os administradores tinham pouco controle sobre a aparência pública além dos campos básicos. Precisávamos de ferramentas simples o bastante para administradores sem perfil técnico, sem depender de suporte.
Restrições
- Páginas públicas de perfil: performance importava.
- Frontend monolítico existente.
- A experiência precisava funcionar para administradores de empresa sem perfil técnico.
Arquitetura
Refatorei o editor de perfil com recorte de capa customizado, Unsplash e vídeo. Saí de passar props em cascata e centralizei o estado do editor na Context API.
Decisões principais
Context API para o estado do editor
Passar props em cascata tinha ficado difícil de manter. Context era suficiente para aquele editor na época.
Unsplash mais recorte
Deu aos administradores uma biblioteca de imagens utilizável e capa com enquadramento consistente.
Styled Components a partir do Figma
Seguiu as especificações do DevMode sem inventar uma linguagem de design paralela.
Stack
- React
- TypeScript
- Context API
- Styled Components
- Unsplash API
- Figma
Impacto
Os administradores passaram a definir recorte de capa, imagens do Unsplash e vídeo no perfil público pelo editor.
Aprendizados
- O estado do editor deve ficar perto da superfície que decide recorte e mídia; Context venceu a cascata de props aqui sem precisar de um store mais pesado.