Não deixe o fluxo para trás

Adria Meira
Cobli
Published in
5 min readSep 30, 2021

Há alguns meses, meu time começou a trabalhar em um novo produto para o painel da Cobli. Esse desafio tem um tempo apertado, nos colocando em briga com o relógio para entregar uma primeira versão viável do produto. Algumas semanas atrás, essa correria nos cobrou um preço alto quando percebemos que havíamos pulado uma etapa crucial do processo de Design: a de criação de fluxos.

Na Cobli, nós tentamos seguir ao máximo a metodologia do Double Diamond de Design Thinking. A etapa de descoberta contou com uma profunda desk research, uma pesquisa quantitativa via typeform e algumas entrevistas onlines. Esse levantamento de dados possibilitou a escrita de job stories, no estágio de definição. E então, nós fomos para os wireframes, na fase de desenvolvimento.

Desenhar fluxos é uma parte importante da etapa de definição do Double Diamond

O problema

Esse pulo causou problemas graves no processo de desenvolvimento, por exemplo:

Não sabíamos o que esperar das interfaces

Como eu não sabia quais informações e ações deveriam estar na tela, cada exploração de interface continha um componente diferente, posicionado em um local diferente. As decisões aqui foram guiadas pelo visual, não pela arquitetura.

Apenas alguns das interfaces desenvolvidas

A validação nunca chegava a um consenso

Ao compartilhar os desenhos com o Product Manager e os desenvolvedores do time, surgiram feedbacks de diversas naturezas — não só sobre a viabilidade técnica e a necessidade de determinada ação ou não, mas também sobre a existência de certo componente, sua cor, seu posicionamento, e assim por diante… Consequentemente, o time nunca concordava sobre as interfaces.

A solução

Todo esse caos trouxe à tona o fato de que havíamos pulado a etapa de desenho de fluxos. (Aliás, estou usando este termo genérico, pois falar sobre task flow, user flow e flowchart daria todo um outro artigo. Caso você queira se aprofundar nesse tema, recomendo que leia este texto.)

De forma simples, um fluxo pode ser definido como uma sequência de passos que o usuário precisa realizar para concluir uma tarefa, levando em consideração tanto as suas necessidades como as necessidades do produto.

O fluxo coloca o usuário no centro das decisões ao mostrar visualmente sua navegação para alcançar determinada meta. Esse exercício nos obriga a pensar quais informações precisam estar disponíveis para que o usuário seja bem-sucedido, entendendo tanto o cenário ideal, como também desvios e possíveis barreiras.

Se este é o seu primeiro contato com fluxos, isso pode até parecer simples, mas a verdade é que é fácil deixar de lado um passo ou esquecer-se de algum caminho. Principalmente ao ter um tempo curto e com muitas coisas a serem feitas.

Algumas perguntas que podem ajudar a iniciar o desenho do fluxo são:

  • O que o usuário deseja realizar?
  • Quais informações são necessárias para ele realizar seu desejo?
  • O que pode impedir o usuário de fazê-lo?

Indo mais a fundo, entender esses pontos — e tê-los alinhados com todo o time — nos leva a construir melhores experiências, uma vez que o coloca foco em como podemos atender, da maneira mais satisfatória possível, o desejo do usuário ao interagir com o produto. Quanto mais facilidade o usuário tiver para realizar uma tarefa, mais agradável será para ele interagir com o produto. E não é isso o que realmente importa? O quanto o usuário está satisfeito usando nosso produto?

Por fim, desenhar fluxos economiza tempo e energia, dado que suas definições servem como guias para as interfaces. Deixar o Design Visual para um segundo momento diminui enormemente a carga mental, pois separa decisões de naturezas distintas em momentos e espaços diferentes. Assim, a escolha de componentes acontece somente após entender o objetivo do usuário e o caminho que ele percorrerá para isso — ou, em termos mais de fluxo, o que é ponto de entrada, de saída e as etapas para conclusão.​

Fluxos desenvolvidos para a nova roteirização da Cobli

No caso da Cobli, ao darmos um passo para trás e voltar para esta fase, vimos a quantidade de informação que havíamos simplesmente deixado de lado. Assim que alinhamos as viabilidades técnicas, os objetivos do produto e as necessidades do usuário em um fluxo, foi muito mais fácil seguir para os wireframes. Rapidamente, a colaboração entre os times de Engenharia, Produto e Design voltou a funcionar, dessa vez com todos na mesma página e em um ambiente muito mais harmonioso e produtivo.

Pequenos passos são a chave para o desenvolvimento de grandes desafios. Em Design, isso significa se dedicar de cabeça em todas as etapas, sem deixar nenhuma para trás.

Acredite, criar fluxos não é tão desafiador quanto parece e seguir a ordem do processo irá lhe economizar muitas reuniões — o que é sempre bom, certo?

Para quem chegou aqui e, assim como eu, é fã do Figma, recomendo alguns arquivos que podem ser úteis para a criação de fluxos: Autoflow, Handoff Components, Flowmaps, Omnichart — Customizable UX Flow Chart.

Espero que esse artigo te ajude a ter mais diversão e menos dor de cabeça ao desenvolver seus projetos. Fique à vontade para comentar com dicas, questionamentos e/ou críticas. Caso você queira se juntar ao nosso time de Design, confira as vagas abertas!

--

--