As fases para a construção do Concreto,
o design system da maior construtech do Brasil
Nesse projeto conto sobre minha experiência como designer system ops do Stant (a maior construtech do Brasil), onde projetamos um design system que atende oito produtos diferentes dentro da mesma empresa.
Time de design envolvido:
Georgia Demas
Lucas Cesar
Marília Carvalho
Novos colaboradores:
Beatriz Nascimento
Nathalia Matos
.png)
Introdução sobre o Stant
O Stant é uma construtech que possui oito soluções que facilita a gestão de informações de obras. Os nossos usuários são desde pedreiros que precisam relatar problemas do seu dia a dia na obra ao govenador do estado, que consegue acompanhar relatórios completos das obras públicas monitoradas.
Com o input das informações de planejamento e orçamento das obras, as equipes técnicas pode executar o acompanhamento de forma simples através do smartphone, computador ou tablet.
Resolvemos o problema de controle nas obras, uma vez que hoje, elas requerem uma disponibilização de recursos muito grande, o que faz com que muitas usem um formato de controle pouco robusto e ineficiente, com o uso principalmente de papel e caneta.
Como aumentamos o controle nas obras, permitimos que seja diminuído o gasto com retrabalho, além de obter muito mais dados relevantes da obra, afim de ajudar na tomada de decisão de gestores.
O impacto mais abrangente consiste em permitir um big data entre as informações das obras, pois como o nosso banco de dados é global, conseguimos prever tendências e demanda de materiais e mão de obra com uma precisão sem precedentes.
Além disso o Stant possui projetos com as gigantes Concremat e Gerdau, ajudando obras grandes e pequenas por todo o país.
Introdução ao projeto
Quando cheguei no Stant, encontrei um grande desafio no qual trabalharia nos próximos seis meses. A empresa possuía oito produtos, alguns protótipos, nenhum símbolo, nenhum guia de estilo e nenhuma documentação. Haviam dois times de desenvolvimento mobile (Android e iOS), que muitas vezes trabalhavam em um mesmo app que possuía interfaces distintas de acordo com o sistema operacional para o qual havia sido projetado.
Um fato era que precisávamos escalar e padronizar o design desses oito produtos para poder
evoluí-los nossos em qualidade, escalabilidade, design, experiência e para tornar o processo de desenvolvimento mais rápido e unificado, fornecendo apoio e documentação para isso.
Decidir começar um design system do zero era uma alternativa óbvia, pois só com esse recurso conseguiríamos aplicar um redesign de qualidade em nossos produtos, mas antes disso, nosso time precisava auditar, conhecer e mensurar o que já tínhamos até aquele momento.
Planejamento de fases
Planejar fases para para nos organizar no processo foi extremamente necessário para que o time estivesse pronto para execução do projeto.
Auditar todo o material de design dos últimos cinco anos de empresa, não seria uma tarefa fácil para um time tão pequeno. Por isso dividi esse processo em pequenos passos que fossem nos ajudar na criação do novo design system, mas que ao mesmo tempo nos desse suporte para sermos mais ágeis no processo de redesign que viria a seguir e que era de extrema prioridade para a empresa.
Fase 1
Mapeamento
e imersão
Fase 2
Construção
do design system
Fase 3
Documentação
do design system
Fase 4
Redesign do app
Inspeções
Fase 1 - Mapeamento de imersão
Para mapear e entender o quais eram os fluxos e componentes dos oito apps do Stant, precisamos quebrar essa primeira fase em alguns processos que nos ajudassem a progredir de forma sistemática.
Seguimos os seguintes processos nessa primeira fase:
-
Escolher uma nova tecnologia para prototipar nossos produtos, pois tínhamos poucos protótipos de fato e eles estavam descentralizados entre o Sketch e o Adobe XD;
-
Refazer ou transferir os todos os apps do Stant para a tecnologia escolhida, uma vez que alguns deles não possuíam mais o arquivo de seu protótipo das versões nas quais se encontravam atualmente;
-
Contabilizar e auditar componentes, preferências de cores e tipografia;
-
Por último, mas não menos importante, fazer diagramas UML para mapear o sistema e manter uma documentação como legado.
Escolhemos utilizar o Sketch como tecnologia por entender sua vantagem na criação e gerenciamento de componentes. Essa escolha se deu depois de uma pesquisa, onde percebemos que o Adobe XD não possuía eficiência suficiente para nos ajudar com apps tão grandes e complexos, e que o Figma poderia significar que não teríamos um arquivo de exportação até aquele momento.
Em sequencia, o mapeamento teve semanas de duração, transformando prints de nossos apps em vetor dentro do Sketch. Posso te dizer que foram semanas de muito aprendizado, com toda certeza.
Uma das partes mais ricas desse trabalho foi o contato com todos os apps e todas as suas telas e componentes. Isso nos fez conhecer as propriedades de cada produto, mas principalmente, nos fez ir de encontro com dezenas de cores, tipografias, sombras, botões, espaçamentos, ícones e elementos sem qualquer padronização.
Trazendo um pequeno exemplo acima, perceba que encontramos 34 tons de cinza em nossos apps sem que houvesse nenhum registro ou nome atrelado a qualquer um deles.
Sabíamos, após esse mapeamento, que o design system seria um investimento de tempo absolutamente necessário para mudar o dia a dia dos nossos desenvolvedores, para o amadurecimento dos nossos designers e para nos ajudar em um enorme redesign que viria ao mesmo tempo em que crescíamos como um time unificado, pois designers e desenvolvedores precisavam começar a colaborar entre si e estabelecer uma comunicação mais clara.
Nós tomamos todas as decisões seguintes, sabendo que nada mudaria se não repensássemos a forma que nosso processo de criação aconteceria e em uma metodologia de criação para nossos produtos.
Por último, criamos diagramas UML de todos os apps para estudar arquitetura, percebendo também muitas redundâncias e complexos caminhos para processos simples. Essa ação do nosso mapeamento, nos ajudou a alcançar conhecimento mais profundo em cada produto, sabendo da existência de cada microinteração e componente do sistema.
Te digo honestamente que com certeza nossos diagramas foram importantes para nosso processo de imersão no projeto. Possuir esse legado de documentação é muito importante para ajudar na integração de novos designers ao nosso time e mensuração de melhorias e otimizações futuras.
Fase 2 - Construção do design system
Após todo o estudo e mapeamento do sistema, possuíamos informações suficientes para começar a criar componentes novos. Ao mesmo tempo, decidimos começar a fazer entrevistas com os stakeholders para o redesign do primeiro app que reconstruiríamos. Foi decidido que iniciaríamos pelo app mais usado, nosso produto principal, o app Inspeções. Essa escolha nos auxiliou muito na construção do design system, pois o app possuía quase todas as categorias de componentes que precisaríamos criar e unificar.
Realizamos uma pesquisa de mercado e reunimos referências de estilo para começar a montar um style guide inicial com cores e tipografia.
Estudamos e aplicamos a metodologia do Atomic Design para produzir nossos componentes, o que nos auxiliou muito no processo de criação. Com a metodologia aliada a inteligência dos símbolos do Sketch, a criação de componentes ficou dinâmica e sistemática. Nos dedicamos a nomear cada componentes com a nomenclatura correta, atrelar a cada um deles o grau de personalização interna necessária e organizar suas camadas internas.
Esse tempo de lapidação foi importantíssimo para que criássemos familiaridade com cada família de componentes. Nossa biblioteca estava arrumada e extremamente personalizável neste ponto.
Simultaneamente, conseguimos eliminar com a ajuda dos stakeholders excessos de informações que foram poluindo os sistemas. Isso nos ajudou a montar um wireframe do app Inspeções mais enxuto, onde tivemos bastante tempo para discutir e projetar funcionalidades que colocavam nossos componentes em teste.
Fase 3 - Documentação
Começamos nossa documentação na plataforma Zero Height, onde cada família de componentes foi descrita e exemplificada. Adicionamos também a documentação um style guide, uma página de estudos, uma área de download de materiais e um explicativo sobre as metodologias seguidas por nosso time.
Fase 4 - Redesign
Quando iniciamos o redesign do app Inspeções, já tinhamos um wireframe base que já havia passado por uma revisão de arquitetura, e esse processo que foi feito junto a criação do design system, nos deu suporte para um processo rápido e eficiente.
Ao evoluir nosso wireframe para um protótipo, conseguimos validar os componentes e fazer manutenção do design system, adicionando componentes e ajustando outros com base em edge cases.
O momento atual
Hoje em 2020, parte do time de desenvolvimento está alocado para executar o design system e ganhar agilidade no redesign dos outros apps do Stant.
Atualmente eu presto consultoria para a empresa, ajudando o time a continuar com o projeto.
.png){kind=small}