Como construimos protótipos de alta fidelidade com HTML e CSS na ContaAzul

No começo deste ano paramos os designers por duas semanas para repensar nossos components e nosso processo de prototipação. Até então nossa biblioteca estava no Sketch e usávamos o Invision/Marvel para montar nossos protótipos. Este processo atrapalhava nossos testes, nossa comunicação com os desenvolvedores e havia diversos problemas com a atualização e versões dos components que estavamos usando.

Era claro que precisávamos de um novo método e por isso testamos várias ferramentas. Concluímos que o Bootstrap Studio atenderia nossa demanda. Nossos designers tem prática de Front-end e poderíamos seguir um caminho de prototipação com códigos (HTML + CSS + JS). Não ganhamos só na consistência em telas, mas nossa comunicação com o time de desenvolvimento melhorou e agora conseguimos criar protótipos de alta fidelidade. Além disto, nossos testes estão mais "reais" já que agora as pessoas navegam de fato dentro do ContaAzul (e não em uma imagem com links).

Quando abrimos para à comunidade à informação sobre estarmos trabalhando nesse formato recebi diversas perguntas (por e-mail, facebook e slack) sobre nosso processo, forma que estruturamos isto e principalmente se é viável. Então, resolvi escrever este post para compartilhar o que aprendemos desde janeiro.

O valor gerado nesses testes (aliás, aumentado/ potencializado/ otimizado, nesse caso) é positivo em relação ao esforço a mais de estruturar? (João Paulo Mello)

É positivo sim. O maior esforço que tivemos foi para construir a biblioteca. Principalmente porque não tivemos ajuda de front-ends. Foi construída pelos designers com a CDN do ContaAzul. O maior trabalho foi entender como o BSS funcionava e como poderíamos importar os códigos do CA para dentro. Confesso que na segunda semana refizemos boa parte do que fizemos na primeira. Porém, hoje é difícil ter que colocar a mão no código. É só arrastar e ajustar. Trabalhamos 2 semanas intensas para alcançar o que precisávamos.

Drag and drop :)

Como vocês fizeram para importar ou apontar para a cdn os novos componentes criados por vocês para dentro do bootstrap studio? (Rodrigo Peixoto)

No início nós trouxemos a CDN do ContaAzul. Mas, na segunda semana percebemos que era melhor reescrever boa parte dos códigos para deixar fluído com o uso do sistema. Quando importamos os códigos do ContaAzul percebemos que não poderíamos usar a personalização padrão do BSS e isto deixaria o processo de prototipagem lento, pois, não estaríamos usando ele com "potencia máxima".

Editando o botão sem colocar "a mão" no código

Muito legal esse processo que vcs criaram! Mas o sistema consome diretamente esses componentes? Ou vocês passam para equipe de front end depois? (Carla Demarchi)

Não estamos preocupados com o código. Nosso objetivo com o BSS é criar mockups "reais" para melhorar nossos testes de usabilidade. Percebemos que se ficassemos preocupados com semântica ou com a qualidade do código estaríamos perdendo tempo com algo que não faria diferença no nosso trabalho (sim, tem bastante !important ali dentro). Porém, este trabalho ajudou os fronts a mapear o que ainda não estava componentizado dentro do ContaAzul.

Porque que os fronts não aproveitam o que vocês já fizeram? Qual seria o motivo? (Alfredo Egito)

O código que está no BSS foi escrito por designers. Nosso foco não é aplicar as melhore práticas de front, mas sim dar um ponto de partida ou mesmo ter o mínimo de código para fins de teste. Então, eles não vão copiar e colar. Podem até olhar como foi escrito, mas vão reescrever novamente. Nosso foco com o BSS está nos testes e na agilidade para criar mockups navegáveis.

Mas queria entender melhor, vocês nao tinham um bootstrap do style guide do CA? Ou se tinham, no que isso facilitou para vocês? Além de aplicar testes “mais livres” (Monica Possel)

Nós temos o CA Components (que é baseado no bootstrap). Porém, ele só é baseado. Nós não utilizamos as mesmas classes do bootstrap padrão. Então, quando passamos a usar o BSS, tivemos que reescrever algumas coisas para adptar as classes de bootstrap. O maior ganho foi na construção de protótipos de alta fidelidade. Tudo agora está interativo.

Como foi essa mudança para a equipe, tiveram dificuldades no processo? por que muda muito você usa o BSS e o Invision, são duas ferramentas muito diferente com propósitos diferente, os designers aceitaram bem o BSS? (Henrique Shmoller)

A escolha da ferramenta foi tomada em conjunto com todo a guilda de design. Semanalmente nós temos uma conversa para falar sobre os procesos e ferramentas que estamos usando (chamamos de “design talk”). Chegamos a experimentar o webflow, porém, não atendeu o que buscávamos. Pensamos em ir para o Axure, mas, o preço dele está inviável para a quantidade de licenças que precisaríamos. Então, quase todo o time se uniu para estudar e montar os components no BSS.

De modo geral nossa experiência com o BSS tem sido positiva. Conseguimos criar templates das principais páginas do ContaAzul e isto facilita quando iniciamos um projeto novo. Além disto, conseguimos alcançar o resultado que buscávamos com nossos testes e melhoramos muito a comunicação com o time de desenvolvimento. Agora estamos trabalhando na atualização da nossa biblioteca para compartilhar ela publicamente.

E você? Já usou o BBS? Me escreve um e-mail contando a sua experiência: victor.zanini@contaazul.com.

:)