Reinventando a presença digital de uma
empresa de tecnologia e IA

Acessar projeto

2026

AI/R Company

Área

Product Designer

Duração

60 dias

Responsabilidade

Criação da interface na versão desktop e mobile das páginas do produto

Ferramentas

Figma / Claude

Contexto geral

A AI/R Company é uma empresa de Agentic AI com sede em San Francisco e escritório em São Paulo. Ela atua em engenharia de software com agentes de IA e em transformação de negócios, e tem plataformas próprias (AI/Cockpit, Llia, Dora, AI/AgentsBuilder e AI/Studio). O site é a principal porta de entrada para clientes e para candidatos a vagas.

O desafio

Apresentar de forma clara um portfólio muito amplo: 5 plataformas, 14 soluções, 13 Innovation Studios e 16 Agentic AI Studios por setor. O site também precisava atender públicos diferentes (decisores de negócio, candidatos e parceiros), em inglês e português.

Mais do que apresentar serviços, o site precisava comunicar o posicionamento da empresa, fortalecer sua percepção de inovação e tecnologia e criar caminhos para diferentes perfis de visitantes, desde potenciais clientes até parceiros e profissionais interessados em conhecer a AI/R.

Objetivos de negócio:

Fortalecer o posicionamento da AI/R no mercado de tecnologia e Agentic AI.

Apresentar de forma estruturada o portfólio de produtos, soluções e especializações.

Criar caminhos para geração de oportunidades comerciais, incluindo Contact us e Request a Demo.

Fortalecer a marca e criar uma presença digital consistente com seu novo posicionamento.

Apoiar a atração de talentos por meio de uma experiência específica para Careers.

Criar uma estrutura escalável para novos conteúdos, soluções, campanhas e iniciativas da empresa.

Pesquisa e insights

Antes de desenhar as interfaces, realizei uma etapa de imersão para compreender o negócio, o posicionamento da empresa e a forma como a AI/R deveria se apresentar ao mercado.

A pesquisa ajudou a identificar quais mensagens deveriam ganhar protagonismo, como o portfólio poderia ser organizado e quais caminhos seriam mais relevantes para os diferentes públicos.

Também foram realizadas pesquisas de referências e benchmarks, considerando concorrentes diretos e indiretos, empresas de tecnologia, consultorias e outras referências digitais.

Foram analisados aspectos como:

  • Arquitetura de informação;

  • Organização de portfólios complexos;

  • Apresentação de serviços e produtos;

  • Hierarquia de conteúdo;

  • Padrões de navegação;

  • Linguagem visual;

  • Uso de CTAs;

  • Estratégias de conversão;

  • Formas de comunicar inovação e tecnologia.

O objetivo não era replicar padrões existentes, mas entender como o mercado comunicava ofertas complexas e identificar oportunidades para construir uma experiência própria para a AI/R.

Principais achados

1. Portfólios extensos precisam de diferentes níveis de exploração → A arquitetura foi estruturada para permitir que o usuário tivesse uma visão geral do ecossistema e pudesse aprofundar gradualmente em plataformas, soluções, setores e cases.

2. Diferentes públicos possuem necessidades diferentes → A navegação passou a contemplar grandes áreas de interesse, como AI Platforms, AI Solutions, Agentic AI Studios, Our Work e Careers, facilitando o acesso aos conteúdos de acordo com a intenção do usuário.

3. Tecnologia complexa precisa ser comunicada de forma objetiva → As páginas passaram a trabalhar com blocos curtos de conteúdo, títulos diretos e cards que apresentam uma visão inicial da oferta antes de direcionar o usuário para informações mais detalhadas.

4. Prova de experiência ajuda a contextualizar a oferta → Os cases foram incorporados à experiência como evidências concretas da atuação da AI/R, incluindo projetos como Empório Nestlé, Aarin, Nsight Live e 6Pages.

Estratégia e arquitetura de informação

O desafio de arquitetura foi organizar um ecossistema extenso sem transformar o site em um catálogo difícil de explorar.

A estrutura foi organizada em cinco grandes grupos de navegação:

  • AI Platforms

  • AI Solutions

  • Agentic AI Studios

  • Our Work

  • Careers

Além disso, Contact us e Request a Demo foram mantidos como ações de destaque para facilitar o acesso aos principais caminhos de conversão.

Dentro dessas categorias, o conteúdo foi organizado por diferentes níveis de profundidade. Por exemplo, AI Platforms reúne as cinco plataformas da empresa, enquanto Innovation Studios e Agentic AI Studios permitem explorar as especializações da AI/R por capacidade e por indústria.

Como a organização foi definida:
A estrutura partiu da combinação entre posicionamento de negócio, natureza das ofertas e intenção dos usuários, buscando separar aquilo que a AI/R oferece diretamente — plataformas e soluções — das formas como sua expertise é aplicada — por capacidades, setores e cases.

Redesign do Design System

O redesign do Design System foi conduzido em parceria com o time de Branding.

O objetivo era criar uma linguagem visual mais consistente e flexível, capaz de atender diferentes pontos de contato da AI/R.

Enquanto o Branding trabalhou a evolução da identidade e seus princípios visuais, minha atuação esteve principalmente relacionada à tradução desses princípios para uma experiência digital e para um sistema de componentes aplicável ao site.

A colaboração buscou criar uma base que pudesse ser utilizada não apenas na construção do novo site, mas também em:

  • Campanhas de marketing;

  • Materiais institucionais;

  • Conteúdos digitais;

  • Comunicações da marca;

  • Novas páginas e experiências digitais.

No sistema, trabalhamos elementos como tipografia, espaçamentos, grids, componentes, navegação, cards, CTAs e padrões de interação, criando uma estrutura mais consistente e escalável.

Essa parceria foi importante para aproximar Branding, Marketing e Produto, garantindo que a identidade visual pudesse ser aplicada de forma coerente em diferentes contextos.

Minha atuação × Branding

Branding

  • Evolução da identidade visual;

  • Diretrizes de linguagem visual;

  • Elementos e princípios de marca;

  • Aplicações para campanhas e comunicação.

Product Design

  • Tradução da identidade para interfaces digitais;

  • Estruturação dos componentes;

  • Definição de padrões de interação;

  • Aplicação do sistema nas páginas;

  • Garantia de consistência e escalabilidade da experiência.

Números do sistema:

31 famílias de componentes. Entre elas: cards, accordions, carrosséis, abas, formulários, botões, vídeos e listas de cases

[quantidade de estilos/tokens]

142 rotas localizadas — 72 em inglês e 70 em português

Há uma biblioteca de parceiros com páginas próprias, e não apenas uma lista de logos.

Construção da experiência

A partir dos aprendizados de negócio, pesquisas, benchmarks e validações, trabalhei na estruturação da arquitetura de informação, jornadas, fluxos e interfaces do novo site.

Um dos principais desafios foi organizar um ecossistema extenso sem tornar a experiência excessivamente complexa. A solução precisava permitir que diferentes públicos encontrassem rapidamente informações relevantes, enquanto mantinha uma narrativa institucional coerente.

O resultado foi uma experiência digital construída para conectar posicionamento, portfólio, conteúdo e objetivos de negócio, criando uma base visual e estrutural preparada para a evolução contínua da AI/R.

Create a free website with Framer, the website builder loved by startups, designers and agencies.