Como é nosso processo de Design?

O design é muito mais do que layout de telas. Eis como fazemos na Nugo.

1 Tudo nasce de um problema.

É óbvio e é a coisa mais padrão do mundo. Todo mundo sabe disso. Mas mesmo assim, achamos que vale a pena a gente contar que na Nugo começamos todo e qualquer trabalho pelos problemas, pois eles são nossa Bússola.

Uma dica para vocês que estão lendo é TENHA FOCO. Não desvirtue do problema, pois as reuniões ficarão longas e nunca se saberá quando encerrá-las. Fica desgastante quando você começa pensando em um problema e acaba parando em outro lugar. A sensação é de missão-não-cumprida.

-Ahhhh, mas quais problemas devemos escolher? — você pergunta.

Como a Nugo é Design Driven, na grande maioria das vezes, começamos com os problemas do ponto de vista do usuário (ex: facilitar o fluxo de inclusão de um cartão de crédito). Mas eles poderiam ser problemas de Business (ex: melhorar o antifraude incluindo mais uma camada de segurança) ou problemas de Tecnologia (ex: velocidade ou performance do app).

Questione! Um bom design ao invés de ser uma boa resposta, é principalmente de uma boa pergunta.

Em seguida…

2 Converse. Dialogue. Discuta. Nada de computador.

Agora é onde muita gente erra, pois pegam o problema e se isolam. Esse é um comportamento inconsciente porque fomos EDUCADOS por anos a fio pelas escolas a agirmos dessa maneira. Tipo as provas, sabe? Onde a maioria das escolas testam nossos conhecimentos de maneira individual, isolada e sem "consulta ao coleguinha". Sir Ken Robinson já dizia: "Schools kill creativity".

Nosso querido autor Dan Ariely chamaria esse comportamento herdado das escolas de "Previsivelmente Irracional".

Pois bem, o segundo passo que fazemos na Nugo é: CONVERSAR.

Para conversar, nosso cérebro organiza as ideias em nossas cabeças para que a fala saia coerente e com sentido. Ao mesmo tempo, ele abre espaço para novas ideias e novos pontos de vista, o que ocorre facilmente quando praticamos "Audição Ativa".

"A coisa mais importante na comunicação é escutar o que não está sendo dito" — Peter Drucker

“Falar é uma necessidade escutar é uma arte” — Johann Goethe

Já dizia Murilo Gun: "As melhores ideias vêm da Combinatividade"

Depois de estressar e espremer bastante os neurônios a respeito da pergunta e os possíveis caminhos que podem trazer uma resposta clara, simples e objetiva, então passamos para a etapa 3, que é…

3 Faça Rabiscoframes

Chegou a hora de pensar visualmente, de rabiscar os cadernos, as paredes ou até mesmo aquele guardanapo, se você estiver em um restaurante.

Mas aprendemos com Viktor Blazek, Sprint Creative da Ogilvy, que:

"O tamanho das suas ideias é do tamanho do seu papel"

Portanto, tenha um quadro branco, um flip chart ou no mínimo um papel A3. Aqui na Nugo, temos centenas e centenas (não é força de expressão) de papéis A3 rabiscados com estudos, insights, mapeamentos e muitas telas e fluxos desenhados neles. Evite o Moleskine… ele é bonitinho e lindo pra se fazer posts nas redes sociais, mas pra AREJAR suas ideias, ele é claustrofóbico.

Saiba que nessa etapa, você desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga, desenha & apaga. Portanto, jogue seu EGO no lixo e tenha ZERO APEGO pelos seus desenhos. Ahhh, e o foda é que não tem CMD + Z. 🥺

A partir daí, a gente vai pra próxima etapa, onde transferimos os melhores fluxos para o computador. O objetivo aqui é ser rápido e ele é mais ou menos assim, como nesse vídeo em timelapse abaixo…

4Inicie seu Lo-Fi Prototype

Dicas:

1. NÃO USE CORES.
2. SEJA OBJETIVO.
3. PENSE EM FUNCIONALIDADES.

A ideia aqui não é validar se a cor agrada, se a fonte está no tamanho certo ou se está tudo alinhado no grid perfeito. Também não é para criar o motion perfeito para aquela interação mega-ultra inovadora. O objetivo do #Lo-FiPrototype é validar o fluxo, as funcionalidades, o conceito.

Então, crie, documente e depois discuta com o seu time.

E aqui, nós deixamos uma coisa bem clara para nosso time de design:

"Não é pra seguir tal-e-qual o Lo-Fi Prototype. Você tem total liberdade para evoluir os textos, os fluxos e as interações. Isso aqui é um esqueleto modificável, um documento vivo, um design dinâmico."

A quinta etapa é composta do Hi-Fi Prototype e nós fazemos da seguinte maneira, como esse timelapse abaixo:

5 Crie o Hi-Fi Prototype

Agora sim. Aqui vale usar a fonte no tamanho e cor de acordo com seu Design System, vale fazer animações nas transições, colocar tudo no grid e desenhar as ilustrações com todo o carinho do mundo.

Bem, pelo menos, é assim que fazemos por aqui. Tudo com um carinho enorme!

Essa etapa é onde a gente começa a CONCRETIZAR as nossas RESPOSTAS para o problema e em seguida, vamos validar elas com as pessoas que irão interagir com as interfaces que desenhamos, sejam mobile ou web.

Enquanto não chamamos as pessoas para testarem e validarem nossas ideias, a gente parte para outro momento, descrito aqui embaixo….

6 Imprima todas as suas telas

Sobre essa etapa aqui, a gente tem um POST especial comentando os benefícios de se imprimir e colar todas as telas na parede.

Leia sobre ele aqui: Por que imprimimos todas as telas do nosso App?

E você?

Que fluxos você tem / segue na empresa onde trabalha?

Quais são as best practices que gostaria de compartilhar?

Deixe seu comentário, pois queremos trocar figurinhas!!!