UX Collective 🇧🇷

Curadoria de artigos de UX, Visual e Product Design.

Follow publication

Explorando o universo de ferramentas no-code: uma jornada de 42 Dias

Laís Lara Vacco
UX Collective 🇧🇷
8 min readFeb 13, 2023

Diversos gráficos em barras aumentando e representando as 3 fases da jornada. Uma pessoa está no início pensando que vai ser difícil. Mais pra frente tem essa pessoa em cima de um dos gráficos pensando: isso foi divertido!
Visão geral dos caminhos de aprendizados da jornada — desenho que fiz usando a ferramenta Excalidraw.

Ano passado comecei o desafio #100DaysOfNoCode. Eu já vinha testando algumas ferramentas no-code antes, mas queria aprofundar.

Minha hipótese era de que o conhecimento nessas ferramentas me permitiriam ampliar meu conhecimento em lógicas de programação, melhorar a colaboração com os desenvolvedores e prototipar com mais rapidez e eficiência.

Meu foco desde o início era menos na interface e mais na utilidade das ferramentas e possibilidades em projetos.

Aqui está um resumo dessa trajetória, com alguns links e aprendizados.

Desenho de um iceberg como representação das possibilidades das ferramentas no-code.
Ilustração que criei usando Excalidraw. Tradução do título: possibilidades de construção usando ferramentas no code. Na superfície, a ponta do iceberg representou o que eu imaginava. Embaixo d'água, a base gigante do iceberg está o que realmente parece.

Problema

  • Quantidade de ferramentas no-code: é difícil escolher quais aprofundar e comparar de maneira efetiva em quais projetos usar.
  • Experiência prática limitada: Sem um plano de aprendizado estruturado, estava difícil ganhar experiência prática significativa em ferramentas no-code.

Objetivos

  • Avaliar e selecionar as ferramentas no-code mais adequadas para determinados projetos ou finalidades.
  • Ganhar experiência prática com ferramentas no-code através de aprendizado estruturado e trabalho em projetos.
Um boneco palito olhando a 'execução' de algo como bem distante, enquanto pensa várias ideias. Abaixo tem a pessoa equipada com várias ferramentas no code na mochila, pensando as várias ideias, mas a execução está mais perto.
Desenho feito usando excalidraw

A primeira semana foi sobre explorar diferentes ferramentas e me familiarizar com os modelos mentais de construção de automação, bancos de dados e formulários.

Comecei criando uma conta no Twitter (já que não tinha uma desde 2017) para compartilhar meus aprendizados e me aproximar da comunidade de no-code, que desde o início foi bem receptiva.

Lá publiquei minha primeira automação de agendamento de tweets que construí usando o Airtable.

Imagem do airtable com uma sequência de ações conectando para a automação
Agendador de tweets usando Airtable

Também criei uma espécie de diário usando o Airtable. A ideia era registrar e dar visibilidade ao progresso nesses desafios.

Depois criei uma página simples usando o Carrd.

Diário construído com Airtable

Um projeto interessante foi a automação de tarefas diárias usando o Zapier.

Resolvi automatizar o encaminhamento de e-mails de confirmação de pagamento que costumo enviar para o meu parceiro. Dessa forma eu reduziria esse esforço manual.

Encaminhamento de e-mails usando o Zapier

Em um dos desafios, aproveitei para refletir sobre coisas que estava gostando de aprender em 2022, então construí um mini site pessoal usando a ferramenta chamada mmm.page. Logo quando vi a página demo da ferramenta, já fiquei interessada, por ser divertida e diferente do que costumo ver em landing pages.

Página inicial da mmm.page

A conta gratuita tinha restrição de 30 blocos (componentes), então tive que adaptar algumas ideias.

Mini site pessoal construído usando mmm.page

Eu estava acostumada a criar formulários com lógicas no Jotform e Typeform, mas desta vez testei o Tally.so. A ferramenta foi criada em julho de 2020 por 2 pessoas e a abordagem que eles escolheram foi a de ter preços mais acessíveis, mesmo em features avançadas. A ferramenta tem uma UI simples e é bem prazerosa de usar.

Quando tive dúvidas, entrei em contato com eles pelo Twitter. A própria fundadora respondeu à mensagem e foi bem solícita.

Visualização da lógica condicional usando o Tally

Outro projeto interessante foi criar um aplicativo usando o aplicativo Glide app. Eu já tinha usado essa ferramenta no passado e tinha gostado bastante. Dessa vez, aproveitei o desafio para organizar uma lista de +100 perguntas que tenho coletado ao longo do tempo. A ideia era facilitar meu acesso às perguntas e compartilhar com quem tivesse interesse também.

App de perguntas criado com o Glide

Entre as criações, construí um site usando Softr que pegava os dados do Airtable. A ferramenta tem modelos prontos, o que torna bem simples conectar os dados da tabela, transformando em uma lista clicável e com filtros.

Como nesse dia escolhi falar de feiras que visitei, segui um tutorial que ensinava a adicionar mapas interativos do Google para aparecer na página de detalhes da feira.

Exemplo do diretório de feiras usando Softr

Em outro projeto também usando Softr, criei um diretório com uma lista de artistas que criam analogias visuais. O mais trabalhoso desse projeto foi construir as tabelas e categorizar de forma que eu conseguisse aproveitar na página como filtro.

Tabela com todos os dados que seriam automaticamente carregados na página
Website que criei utilizando Softr e os dados vindos do Airtable

O Coda foi uma das ferramentas que mais gostei. Ela tem um bom desempenho, é mais estável do que muitas ferramentas no-code, e tem inúmeras possibilidades.

Nesse projeto me lembrei das necessidades que tive como Gerente de Produto, de acompanhar e alinhar diferentes projetos com outras áreas.

A proposta era criar um rastreador de projetos. Nesse desafio aprendi a criar um botão com valores pré-definidos, fórmulas básicas para calcular a priorização das tarefas e criar uma visão geral e simplificada do projeto.

Rastreador de projetos usando Coda

No mesmo espírito de rastreamento de projetos, construí um roadmap de produto usando o Airtable. A ideia era conectar OKRs, projetos e atualizações semanais para equipes assíncronas.

O objetivo era construir uma fonte centralizada para melhorar a visão geral dos projetos.

Roadmap feito no Airtable

Mais para frente no desafio, usei o Voiceflow para criar um aplicativo de voz que seria controlado por comandos de voz.

Primeiro, era necessário conectar com uma tabela de dados e não consegui com o Airtable, pois apareceu um erro 401 e não encontrei uma solução.

Para continuar, resolvi usar o Google Sheets e deu certo. Aprendi a adicionar, recuperar e atualizar dados usando a integração do Voiceflow com o Google Sheets.

Nesse dia fiquei bem surpresa com a possibilidade de construir um produto com comandos de voz sem escrever código.

Visão da construção e testes do aplicativo de voz usando Voiceflow

Resolvi pular um desafio de criar uma Wiki pessoal usando o Notion, pois já o usava como portfólio e também como rastreador de hábitos.

O que eu não sabia era que eu poderia personalizar meu site do Notion de forma bem simples, então experimentei o Popsy.co. Uma ferramenta simples para customizar páginas do Notion.

Aqui está uma parte da página do Notion com o Popsy aplicado usando apenas as funcionalidades gratuitas.

Página do Notion com o visual do Popsy

Em certo momento comecei a aprender os conceitos de API e para testar meu aprendizado, resolvi criar uma analogia visual. Eu queria uma analogia diferente daquela do garçom — que foi a melhor que ouvi até o momento.

Analogia que criei para explicar o que é uma API

Tradução da imagem: A criança seria a aplicação/usuário que chama a API. A carta que ela escreve para o papai noel é como se fosse a requisição que vai até o servidor, que é o papai noel. Ele valida a requisição e, caso aprovada, responde com o presente. A árvore é a API que recebe a resposta e permite o acesso à criança que fez a requisição inicial.

Só depois percebi algumas implicações desta analogia:

  • A árvore (API) não verifica as informações, ela ficou mais passiva.
  • Diferente de uma API, o tempo de resposta pode ser bem longo 😂

Depois experimentei fazer requisições para uma API usando Hoppscotch. Isso foi completamente novo para mim, então fiquei um tempo testando a ferramenta.

Fazendo requisições usando Hoppscotch

Para não esquecer as informações importantes dos parâmetros, criei essa colinha:

Informações do parâmetro

Segui o desafio com entusiasmo e consegui manter por 42 dias. Estava divertido experimentar novas ferramentas, até eu começar a me sentir sobrecarregada.

Naquela época eu tinha recém começado a atuar como Gerente de Produto e estava com outros projetos pessoais além desse. Foi quando resolvi dar uma pausa.

Ilustração representando como eu estava me sentindo antes e depois da pausa

Quando retornei ao desafio meses depois, percebi que o próximo conjunto de atividades eram focadas em wireframes e ferramentas de design, o que eu já conhecia. Então, decidi abandonar o desafio e começar a explorar novas ferramentas por conta própria.

Confesso que no início tive certa dificuldade em abandonar o desafio, como se fosse uma falha parar no meio. Até que me lembrei do motivo pelo qual comecei ele e decidi usar isso como motivação para continuar minha própria jornada. Desde então sigo mais confiante e animada com os aprendizados que tive, apesar de ter tomado um rumo diferente do planejado.

Resultados após 42 dias:

  • 20 ferramentas diferentes testadas
  • 21 categorias de aprendizagem, tais como automação, banco de dados, visualização de dados, CRM, API, etc.
  • +35 projetos diferentes criados

🔗 Visite o diário dessa jornada para ver mais detalhes e acessar todos os links dos projetos.

Reflexões

Adoro esses desafios para aprender ou praticar algo e particularmente recomendo o #100DaysOfNoCode.

Foi uma mistura de conceitos e práticas, seguindo uma estrutura como de um curso, mas 100% gratuito.

Ao longo dos dias aprendi possibilidades e limitações das ferramentas no-code com o apoio da comunidade. Quando tive dúvidas ou problemas, entrei em contato com as empresas e fui muito bem atendida, especialmente através do Twitter, onde geralmente eram os próprios criadores das ferramentas respondendo.

E essas são as minhas principais conclusões da jornada:

  • As ferramentas no-code têm um grande potencial para reduzir esforços manuais e aumentar a produtividade em diferente projetos.
  • Os modelos mentais de programação ainda estavam presentes mesmo utilizando ferramentas sem código e isso tornou mais divertido aprender esses conceitos como automação, bancos de dados e API.
  • As ferramentas no-code tem várias limitações. Algumas vezes tive que ser criativa e me adaptar aos limites para fazer as coisas acontecerem. É bem importante testar diferentes formas e ferramentas antes de se comprometer com um projeto específico.

🎁 Links extras:

Aqui estão alguns sites para te ajudar a encontrar mais ferramentas no-code:

Obrigada por ler! :)

Se tiver dúvidas, manda mensagem. E fique à vontade para me adicionar no LinkedIn.

No responses yet

Write a response