Novo site institucional da CI&T

Desenhando um site escalável para um sistema de gerenciamento de conteúdo (CMS)

A CI&T é uma empresa especialista em transformação digital que surgiu no Brasil há mais de 25 anos, com foco em acelerar negócios por meio de soluções digitais completas e escaláveis. Em 2020, a empresa procurou a Meiuca Design para participar do projeto de criação do seu novo site institucional.

As necessidades da CI&T

A CI&T possui escritórios nos EUA, Brasil, Canadá, Reino Unido, Portugal, Japão, China e Austrália. Até então, cada um desses escritórios possuía seu próprio site institucional, com linguagem visual própria e sem conexão entre si.

Um dos pilares do projeto foi unificar todos esses sites, promovendo a consistência da marca e o posicionamento global da CI&T. Para isso, criamos uma nova linguagem visual para o site, levando em consideração os padrões de identidade visual da CI&T e as diferenças na arquitetura da informação de cada país, criando assim conexão entre todos eles.

Outra necessidade foi projetar um ecossistema que permitisse a criação de novas páginas de conteúdo pelo time de Marketing da CI&T envolvendo o mínimo de desenvolvimento, tornando o processo de manutenção do site escalável. Sendo assim, o site foi criado utilizando uma lógica de componentes, módulos e templates e foi desenvolvido no Drupal, um sistema de gerenciamento de conteúdo (CMS) que possibilita a criação e publicação de conteúdos em plataformas digitais sem necessidade de envolver desenvolvimento.

Processo

A CI&T foi responsável pela arquitetura da informação, criação de conteúdo e desenvolvimento do site, enquanto a Meiuca foi responsável pela criação do conceito e desenho das interfaces, componentes, módulos e templates. Atuei no projeto como Product Designer e acompanhei todo o seu desenvolvimento, sendo responsável pela criação dos componentes, módulos e templates.

Iniciamos o projeto com uma etapa de Concept, onde alinhamos os fundamentos visuais do que foi desenvolvido posteriormente nas interfaces. Nessa etapa, realizamos pesquisas de benchmark, definimos os Princípios de Design, criamos um moodboard e definimos a linguagem visual do projeto.

Após a etapa de Concept, desenhamos todas as páginas do site partindo da linguagem visual definida e levando em consideração a arquitetura da informação estruturada pelo time da CI&T. Em paralelo, desenhamos todos os componentes, módulos e templates do site, responsáveis por garantir a escalabilidade do projeto.

Parte 1: Benchmarks

Fizemos pesquisas de benchmark selecionando diversos projetos de sites e alinhamos, junto com a CI&T, quais projetos possuíam linguagem visual mais adequada à identidade visual e ao posicionamento de marca da CI&T.

Colagem com diversos projetos de sites

Alguns dos projetos de sites selecionados durante as pesquisas de benchmark.

Parte 2: Princípios de Design

Após realizados os benchmarks, definimos também em conjunto com a CI&T os Princípios de Design, que são os valores que guiaram a construção de interfaces. Eles serviram para auxiliar a escalar decisões de criação e a julgar as interfaces desenhadas de maneira mais tangível. Os Princípios definidos foram:

  • Globalmente consistente: A CI&T está se posicionando globalmente e o site institucional é uma importante tangibilização desse movimento. A consistência é fundamental a sua construção.
  • Universal e diverso: A graça de ser global é ser diverso, precisamos representar o quanto isso agrega valor na entrega da CI&T. Não é um simples site com “muitos idiomas”. Isso inclui projetar para todas as pessoas e culturas, com foco em acessibilidade.
  • Dinâmico e adaptável: A forma como apresentamos o conteúdo e a jornada ao usuário não é monótona, porém sempre pensamos padrões escaláveis e reaproveitáveis, jamais presos a um único contexto.

Parte 3: Moodboard

Criamos também um moodboard consolidando nossas visões sobre imagens, componentes, tipografia, cores e tudo o que pudesse servir de subsídio criativo para o projeto.

Ícone representando lupaColagem com diversos elementos de interfaces, como botões, textos e fotos

Moodboard criado com elementos de linguagem visual que serviram de subsídio criativo para o projeto.

Parte 4: Definição da Linguagem Visual

Para finalizar a etapa de Concept, desenhamos a página inicial do site utilizando os padrões de linguagem visual desenvolvidos até o momento. Com isso, nós queríamos garantir que a linguagem visual era de fato aplicável ao projeto, ao mesmo tempo em que atingia os objetivos de promover a consistência da marca e o posicionamento global da CI&T.

Para validar a página desenhada, realizamos dinâmicas de Design Critique com os times da Meiuca e da CI&T. Essa foi uma etapa importante para alinharmos a linguagem visual do projeto antes de começarmos a desenhar as outras páginas.

Ícone representando lupa
Imagem com páginas web

Parte da página inicial do site desenhada no final da etapa de Concept nas versões mobile (à esquerda) e desktop (à direita).

Parte 5: Componentes, Módulos e Templates

Após definida a linguagem visual na etapa de Concept, desenhamos todas as outras páginas do site levando em consideração a arquitetura da informação estruturada pelo time da CI&T. 

Em paralelo, também desenhamos todos os componentes, módulos e templates responsáveis por garantir a escalabilidade do projeto. Diferentemente de um produto que costuma ser utilizado em diversas plataformas e desenvolvido em diversas linguagens, o escopo de um site institucional é mais reduzido e limitado. Isso nos levou a optar por essa abordagem mais simples de componentização do que a abordagem comum de um Design System, que costuma possuir Design Tokens e componentes em diversas bibliotecas, por exemplo.

Definimos como componentes as menores partes das interfaces, como, por exemplo, botões, escala tipográfica, cards, tags e campos de formulário.

Ícone representando lupa
Colagem com diversos componentes de páginas web como botões, escala tipográfica, cards, tags e campos de formulário.

Alguns dos componentes que foram desenhados com suas variações e estados.

Como módulos, definimos todas as seções da página que são construídas utilizando os componentes. Eles foram criados para serem utilizados pelo time de Marketing da CI&T, que pode combinar esses módulos dentro do sistema do Drupal para criar novas páginas no site institucional.

Ícone representando lupa
Colagem com diversos módulos de páginas web, composto por elementos como botões, escala tipográfica, cards, tags e campos de formulário.

Alguns dos módulos que foram desenhados.

Por último, os templates são todas as páginas construídas utilizando os módulos. O time de Marketing da CI&T pode utilizar os templates em páginas com mesma interface e conteúdo dinâmico, como postagens de blog.

Ícone representando lupa
Imagem com páginas web

Parte do template de postagem de blog nas versões mobile (à esquerda) e desktop (à direita).

Aprendizados

A etapa de concept foi essencial para o resultado do projeto. Um processo colaborativo que envolve os stakeholders desde o início garante alinhamento sobre o que está sendo desenvolvido e evita retrabalho.

Também foi importante perceber as necessidades do projeto e criar uma solução adequada a essas necessidades. Um Design System também poderia atender as mesmas necessidades, porém seria muito mais custoso do que o necessário levando em consideração o escopo limitado de um site institucional.

Por último, foi interessante desenvolver um projeto que precisava dar suporte a idiomas como japonês e mandarim. Antes de entregar as interfaces desenhadas para os desenvolvedores, realizamos testes para garantir que o layout das páginas se adequaria às tipografias desses idiomas. Essa etapa de teste também esteve presente na validação das interfaces desenvolvidas.

Onde o projeto foi realizado?

Meiuca Design

Quando o projeto foi realizado?

2020

Com o que eu contribuí?

Acompanhei e participei da etapa de Concept e fui responsável pela criação e acompanhamento da implementação dos componentes, módulos e templates.

Qual foi a minha função no projeto?

Product Designer

Quem mais trabalhou comigo no projeto?

Thiago Hassu (CEO & Founder @ Meiuca Design), Bruno Delorence (Product Design Lead @ Meiuca Design), Wènnis Bonilha (Design Lead @ Meiuca Design) e João Vitor Ferreira (Communication Designer @ CI&T).

Obrigado por ter lido até aqui!

Veja também os meus outros projetos:

Conheça o meu trabalho

Caso queira conversar comigo, ficam aí os meus contatos :)

Desenhei essa página com ♥ e desenvolvi utilizando o Bootstrap Studio