Alexa Cruz

Site institucional · B2B

Site idwall

Presença digital da referência em identidade na América Latina, construída sobre clareza, confiança e ritmo visual.

Ver site da idwall
Papel
UX/UI Design · Front-end
Contexto
idwall · identidade digital e prevenção a fraudes
Ferramentas
Figma, Next.js, React

Visão geral

O desafio

Identidade digital é um tema técnico e denso. O site precisava conversar com decisores de risco, compliance e produto sem perder clareza, e sustentar um portfólio crescente de soluções sem que cada página parecesse um site diferente.

Como foi resolvido

Com a identidade e o style guide como base, o trabalho seguiu na manutenção e evolução da linguagem visual do site. Novas páginas e blocos foram desenhados como componentes reutilizáveis, seguindo a narrativa em camadas (promessa → prova → solução → conversão) e os tokens de cor, espaçamento e tipografia do guia.

O que mudou

Um site consistente de ponta a ponta, com hierarquia legível para um público B2B, CTAs claros em cada jornada e uma base de componentes pensada para que novas páginas sejam montadas sem redesenhar do zero.

Processo

  1. Descoberta

    Entendimento do ecossistema de produtos, dos públicos e do objetivo de cada página.

  2. Arquitetura

    Apoio na organização do menu em Ecossistema, Soluções, Institucional e Conteúdo, seguindo a narrativa B2B.

  3. Sistema

    Complemento da biblioteca com novos componentes e estados, sempre a partir dos tokens do style guide.

  4. Entrega

    Evolução das páginas em Next.js e React, com componentes espelhando os do Figma.

Telas

Design system

idwall DS

Sistema documentado a partir do style guide oficial do projeto: tokens nomeados, escala de espaçamento de quarck a giant e componentes em todos os estados.

  1. Confiança antes de tudo

    Roxo profundo e muito respiro: a interface transmite segurança antes de vender.

  2. Ênfase com peso, não com cor

    Títulos misturam Regular e Semi-Bold na mesma linha para destacar a ideia central.

  3. Estados explícitos

    Todo componente interativo tem hover, active e focus visíveis, com transição de 0.5s ease-out.

Aprendizados

  • Documentar todos os estados no Figma, inclusive o focus, evita idas e voltas na implementação.

  • Nomear tokens pelo papel (brand-primary, neutral-low) e não pelo valor deixa o sistema pronto para evoluir a marca.