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.
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:
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.
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.
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.
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.
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.
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).
Veja também os meus outros projetos:
Conheça o meu trabalhoCaso queira conversar comigo, ficam aí os meus contatos :)
Desenhei essa página com ♥ e desenvolvi utilizando o Bootstrap Studio