Vieses cognitivos no design

Você já ouviu falar em vieses cognitivos?

Um viés cognitivo é um atalho de pensamento que afeta as nossas percepções, e portanto, julgamentos e decisões. Imagine só: Um ser humano toma várias microdecisões durante um dia (“Vou levantar agora ou daqui a 5 minutos? O que comer para o café da manhã? Vou sair de sapato ou tênis?“). Só que tomar decisões é cansativo!

Por isso, durante a evolução o cérebro humano criou atalhos, permitindo concentrar esforços em decisões que realmente importam (chamamos isso de diminuir a carga cognitiva). Porém, um viés cognitivo pode nos levar a percepções que não refletem toda a realidade ou contribuir para comportamentos irracionais. É isso que o Rian Dutra explica em seu livro “Enviesados”.

Abaixo, traremos os principais vieses apresentados no livro:

Viés da ancoragem

Imagine que você não tem noção de quanto custa uma bicicleta elétrica. Se alguém te falar que é 6000, você vai acreditar. Caso uma segunda pessoa te ofereça uma bicicleta elétrica de 4000, você pode achar que é um bom preço, pois é mais barato. Ou seja, o valor da primeira oferta de 6000 alterou sua percepção sobre a oferta de 4000.

A primeira oferta (de 6000) foi uma âncora. As âncoras são informações iniciais que os usuários obtêm, e que podem afetar o julgamento e interpretações posteriores. A âncora pode ser usada tanto para fazer um produto parecer mais barato ou mais caro. Também pode ser usada para diminuir a carga cognitiva (por exemplo, sugerindo um valor de contribuição, ao invés de deixar em aberto).

Viés da perda (aversão à perda)

O ser humano tem 2 vezes mais medo de perder do que alegria de ganhar algo, afinal, “mais vale um pássaro na mão do que dois voando”. Provavelmente por questões evolutivas, as emoções negativas têm mais impacto que as emoções positivas.

Por exemplo, nas primeiras compras online, existia um receio muito grande de que a encomenda não fosse chegar. Era uma tecnologia nova, que iniciou-se na base da confiança. Para aliviar o medo de perder algo, os e-commerces começaram a dar mais informações sobre onde estava a encomenda.

A aversão à perda também pode ser usada para mostrar a um cliente o que ele perde ao não adquirir seu produto (os seguros de carro são um bom exemplo). Com isso, aumenta-se a chance de engajar mais clientes.

Efeito cashless

Quanto mais “real” for o pagamento, mais doloroso é. Por isso sentimos mais “dó” de gastar dinheiro físico do que sentimos ao fazer uma compra com o cartão de crédito. Quanto menos vemos o dinheiro sendo gasto, mais valorizamos uma aquisição. Com o cartão, porém, há a impressão de que não foi gasto tanto dinheiro assim, aumentando a propensão a comprar mais e por um valor maior.

A Disney, Amazon e tantos outros perceberam isso, e tornaram as compras online cada vez mais fáceis, até com compras de 1-clique (exemplo abaixo).

Viés do custo afundado

Imagine que você começou a aprender a tricotar. Comprou todas as agulhas, linhas, aprendeu a fazer alguns tipos de nó e até já fez as suas primeiras peças. Se alguém te falasse que é uma perda de tempo, você desistiria? Provavelmente não, porque já investiu dinheiro e tempo para aprender.

O viés do custo afundado é similar ao princípio físico da inércia, no sentido de que quando investimos muito em algo, tendemos a permanecer ali. Em aplicativos e sistemas, permitir que o usuário experimente seu produto e faça progressos, cumpra metas, favorece que ele tenha a tendência de continuar usando o seu produto.

Viés do status quo

A psicologia identificou que, se não há um grande incômodo, nosso cérebro tem uma preferência natural por deixar as coisas exatamente como elas estão. Os seres humanos iniciaram como nômades e passaram a ser sedentários, muito por conta de terem achado espaços confortáveis o suficientes para não precisar buscar outros incessantemente.

Preferimos continuar em nossa rotina, mesmo que hajam alternativas mais vantajosas. Nosso estado atual vira um ponto de referência, e qualquer mudança pode ser percebida como uma possível perda. Em aplicativos e sistemas, é possível usar o princípio do status quo para manter um usuário consumindo o produto (facilitando suas decisões, como deixar a resposta pré-preenchida), ou enfatizando os benefícios de mudar, caso seja esse o comportamento almejado.

Viés de enquadramento

Lembra daqueles anúncios famosos de pasta de dente? “9 em cada 10 dentistas recomendam”. Isso é uma forma de apresentar a informação. E se as propagandas falassem “1 em cada 10 dentistas não recomendam” ou “10% dos dentistas não recomendam”? Pareceria bem ruim.

Esse e vários outros exemplos mostram que manipular a forma como a informação é apresentada pode influenciar e alterar a tomada de decisão. O efeito de enquadramento atua utilizando a aversão à perda, de forma a maximizar algum aspecto positivo do produto, para que o consumidor preste atenção no ponto que o interessa, e não fique receoso de estar fazendo uma escolha ruim.

Fadiga da decisão

Quando sobrecarregados com muitas opções, podemos demorar muito ou até desistir de tomar uma decisão. Ao ser confrontados com muitas opções em um cardápio ou um aplicativo de compra, é bem provável que iremos na opção mais fácil. Inclusive, é possível que seja perdida uma boa oportunidade, simplesmente porque é cansativo ter que escolher tanto.

Para evitar a fadiga de decisão, devemos optar por uma boa arquitetura da informação, de forma a ser fácil discernir um tópico de outro, bem como dividir em partes os fluxos que podem ser muito grandes. O ideal é reduzir ao máximo as opções disponíveis. Quando isso não é viável, pode-se inserir ou criar algoritmos de recomendação que aprendem o gosto do usuário. Dessa forma, as recomendações irão ser cada vez mais assertivas e facilitar a sua escolha nas próximas vezes.

Heurística de afeto

Nossas decisões não são racionais, mas influenciadas por emoções. As emoções funcionam como “atalho mental”, quando temos alguma restrição. Quando pressionados, temos poucas informações ou o julgamento for muito complexo, tendemos a confiar nas nossas emoções mais do que em informações concretas (mesmo que não percebamos).

Para projetar considerando a heurística de afeto, é importante entender as emoções do usuário, considerando seus sentimentos para criar produtos que os cativem. Para isso, pesquisas com usuários e análise de dados serão seus melhores amigos.

Para você que leu até aqui, meu muito obrigado!

Esse texto é um resumo do livro “Enviesados” do Rian Dutra.

“Dark design patterns” – padrões obscuros de design

Há diversos tipos de Padrões Obscuros. Citaremos alguns deles abaixo.

Sopa de palavrinhas (“Trick wording”): Ao preencher um formulário, você responde a uma pergunta que o leva a dar uma resposta que não pretendia. Lendo rápido, a pergunta lhe parece perguntar algo, mas ao ler de novo, o conteúdo da pergunta é outro;
Item surpresa (“Sneaking”): Você tenta comprar algo, mas em algum momento o site insere um item a mais em sua cesta;
Vendendo a alma (“Hard to cancel”): Você entra em uma situação com muita facilidade, mas descobre que é difícil sair dela (por exemplo, uma assinatura premium);
Privacidade Zuckering: Você é levado a compartilhar publicamente mais informações sobre si mesmo do que pretendia;
Difícil de comparar (“Comparision prevention”): A loja torna difícil para você comparar o preço de um item com outro, então acaba não conseguindo decidir a compra com mais informação;
Desvio de atenção (“Visual interference”): O design foca propositadamente sua atenção em algo para distraí-lo quanto a outro ponto;
Custos escondidos (Hidden costs): Você chega à última etapa e descobre algumas cobranças inesperadas (por exemplo, taxa de entrega);
Isca e troca: Você se propõe a fazer algo, mas um evento diferente e indesejável acontece (por exemplo, vê um anúncio tentador, mas quando tenta finalizar a compra, percebe que a opção não mais está disponível, momento em que a loja te oferece outras opções mais favoráveis no negócio);
Vergonha de confirmação (“Confirmshaming”): A opção de recusar é formulada de forma a envergonhar o usuário. Por exemplo, quando o site mostra uma oferta e apresenta dois botões: “eu quero perder o desconto” e “eu quero desconto!”;
Anúncios disfarçados (Disguised ads): Anúncios que são disfarçados como outros tipos de conteúdo ou navegação, para que você clique neles.
Continuidade forçada (Sneaking): Quando sua avaliação gratuita com um serviço chega ao fim e seu cartão de crédito começa a ser cobrado silenciosamente sem nenhum aviso.
Spam de amigos: O produto solicita permissões de e-mail ou mídia social sob o pretexto de que será usado para um resultado desejável, mas envia spam a todos os seus contatos em uma mensagem que afirma ser sua.

Referências:

Livro “Enviesados” – Rian Dutra.
https://www.deceptive.design/

7 boas práticas para levantamento de requisitos

Levantar requisitos de software é um trabalho contínuo: Apesar de ter um template, consultar múltiplas partes e revisar, é possível que haja uma ou outra brecha na especificação. Este post traz um checklist prático e dividido em etapas, para evitar omissões e mal entendidos nesta etapa.

Levantar requisitos de software é um trabalho contínuo: Apesar de ter um template, consultar múltiplas partes e revisar, é possível que haja uma ou outra brecha na especificação.

Para você que trabalha com levantamento de requisitos, aqui vai um checklist prático e dividido em etapas, para evitar omissões e mal entendidos na especificação.

Antes da especificação

1 – Identifique a Dor Principal: No início do projeto, trabalhe junto ao Product Owner e stakeholders para identificar qual é a maior dor a ser resolvida, e formalize esta identificação em um lugar acessível a todos. A dor principal que o projeto visa resolver será utilizada posteriormente para priorização dos requisitos, evoluções, e para manter o foco no valor de negócio durante todo o desenvolvimento.

2 – Estabeleça um template: Manter a consistência na documentação de um projeto é importante e transmite credibilidade. Além disso, um bom modelo de documento, que exija determinadas informações, previne que algum detalhe seja esquecido.

Recomenda-se que o seu template tenha as seguintes informações:

2.1 – Numeração de requisitos: Todos os requisitos devem ser numerados seguindo um padrão consistente (ex: 001, 002, etc). Esta numeração facilita a rastreabilidade e comunicação entre equipes.
2.2 – Critérios de aceite: Para cada requisito, defina claramente como será testado através de critérios de aceite específicos, mensuráveis e verificáveis, com exemplos práticos. Estes critérios servem como base para testes automatizados e validação de entrega. Exemplo: “Ao clicar em “Enter”, a próxima tela deverá ser carregada em até 3 segundos.
2.3 – Fluxos de exceção: Documente cenários de erro, falhas de sistema, dados inválidos e situações inesperadas (exemplo: Usuário tinha uma lista de vídeos para assistir, mas um dos vídeos está indisponível por falha do servidor ou porque o arquivo está corrompido. O que deve aparecer na tela? Deve pular automaticamente para outro vídeo e ignorar aquele? Essa ocorrência deve ser salva em algum log?). Para cada exceção, defina como o sistema deve reagir, que mensagens exibir ao usuário e se o problema deve ser registrado para análise posterior.
2.4 – Protótipos e diagramas: Inclua wireframes, mockups, diagramas de fluxo e modelos de dados para tornar os requisitos mais tangíveis. Os protótipos ajudam os desenvolvedores a entender a expectativa visual, e os fluxos ajudam a validar cenários complexos com múltiplas exceções e validações.
2.5 – Campos de dados: Para cada campo de entrada, especifique tamanho máximo, formato esperado, validações necessárias e comportamento em casos de erro. Por exemplo: “Campo CEP: 8 dígitos numéricos, formato XXXXX-XXX, validação via API dos Correios”. Além disso, especifique também o que deve ocorrer com campos muito grandes apresentados em tela (se serão apresentados pela metade, se ao clicar o usuário poderá ver mais, ou só de apontar o mouse o texto restante aparecerá em um tooltip, etc). Caso não seja especificado, é provável que os desenvolvedores utilizem um tamanho padrão para cada campo, mas é bom ser o mais completo possível.

Durante a especificação

3 – Requisitos não funcionais básicos: usabilidade, segurança e integração:

Usabilidade: Defina padrões de experiência do usuário, tempos de resposta esperados, acessibilidade e facilidade de aprendizado. Especifique métricas como “90% dos usuários devem completar a tarefa X em menos de 3 cliques”.
Integração: Como o sistema irá interagir com outros sistemas? incluindo APIs, formatos de dados, protocolos de comunicação e tratamento de indisponibilidades de serviços externos (este ponto se relaciona também com os fluxos de exceção).
Informações sensíveis: Estabeleça políticas claras para tratamento de informações sensíveis, incluindo: critérios de classificação de dados, métodos de criptografia, controles de acesso, logs de auditoria e conformidade com regulamentações (LGPD, GDPR). Defina quem tem acesso a quais dados e em que circunstâncias.

4 – Valide os requisitos com um ponto focal e um desenvolvedor: Esta etapa é extremamente negligenciada, muitas vezes por conta de prazos apertados. Entretanto, o ideal é que o documento de requisitos seja validado pelo menos uma vez por uma pessoa da área de negócio (que entende as necessidades do usuário) e um desenvolvedor (que compreende a viabilidade técnica e o esforço de desenvolvimento). Esta dupla validação identifica inconsistências, ambiguidades e problemas de implementação antes que se tornem custosos.

5 – Verifique requisitos conflitantes: Revise sistematicamente os fluxos e os requisitos para identificar contradições, sobreposições ou dependências problemáticas. Caso o projeto seja muito grande ou complexo, considere criar uma matriz de rastreabilidade.

Extra – Uso de IA: A inteligência artificial é uma grande aliada para revisar requisitos, identificar inconsistências, sugerir casos de teste e automatizar partes da documentação. Entretanto, aqui vai uma dica: Escreva primeiro uma versão sem IA, e só depois a utilize.

Este estudo testou a utilização de IA para a escrita, e os resultados mostram que a dependência completa de IA pode criar um débito cognitivo – diminuição da atividade cerebral em áreas como memória e criatividade. Portanto, os participantes que escreveram primeiro de forma livre e somente depois utilizaram a IA tiveram uma melhor performance.

Após a especificação

6 – Mantenha o documento vivo e versionado: Mantenha o documento sempre atualizado e use controle de versão rigoroso. Cada versão deve ter data, responsável pelas mudanças e resumo das alterações, usando ferramentas disponíveis como Git, SharePoint, dentre outras.

7 – Estabeleça um fluxo para mudanças de requisito: Um processo claro gera transparência para toda a equipe. Por isso, estabeleça critérios para alterações nos requisitos, incluindo: quem pode solicitar mudanças, impacto, quando as mudanças serão feitas e implementadas.

Mudanças não controladas são uma das principais causas de estouro de prazo e orçamento.
CHAOS REPORT, 2023.

Referências

Nataliya Kosmyna, Eugene Hauptmann, Ye Tong Yuan, Jessica Situ, Xian-Hao Liao, Ashly Vivian Beresnitzky, Iris Braunstein, Pattie Maes. 2025. Your brain on ChatGPT: Accumulation of cognitive debt when using an AI assistant for essay writing task [Preprint]. arXiv. Available from: https://doi.org/10.48550/arXiv.2506.08872
The standish group. CHAOS REPORT 2023. Available from: https://thestory.is/en/journal/chaos-report.

Composição mínima de imagens para geração de prompts

Neste post, mostramos um compilado de estilos visuais que podem auxiliar no momento em que escrevemos um prompt de geração de imagens.

Fonte: Autoria própria.

A geração de imagens para trabalhos artísticos, projetos, inspirações ou até mesmo hobbies perpassa a escolha de um ou mais estilos representativos. Muitas vezes, temos uma imagem específica em mente, mas não conseguimos saber como procurar esse estilo na internet ou como instruir o ChatGPT ou outra IA a gerar uma imagem nesse estilo.

Para isso, eu e o Luiz Carlos Branco elaboramos um compilado de estilos visuais que podem auxiliar no momento em que escrevemos um prompt de geração de imagens. Afinal, quanto mais específico, maior a chance de o resultado gerado ser parecido com o que tínhamos em mente.

Estilo	Descrição	Termos de pesquisa
Flat Design	Estilo minimalista, sem profundidade, cores sólidas.	flat illustration, flat design character, minimalist flat icon.
Line Art	Desenho só com linhas, muitas vezes monocromático.	line art, continuous line drawing, minimal line sketch.
Cartoon	Desenhos caricatos, expressivos.	cartoon style, toon character.
Comic	Desenhos com toque realista e iluminação marcada.	comic book illustration.
Vector	Imagens vetoriais, limpas e escaláveis. Não é exatamente um estilo, mas muito comum em pesquisas.	vector illustration, vector graphic, vector icon.
3D Render	Imagens renderizadas com profundidade realista ou estilizada.	3d render, 3d character, 3d scene.
Isometric	Vista em perspectiva 3D sem distorção, muito usado em infográficos.	isometric illustration, isometric infographic.
Cyberpunk	Futurista, ambientes urbanos iluminados por neon.	cyberpunk art, sci-fi illustration, futuristic city, neon art, dystopian art.
Pixel Art	Gráfico retrô de videogame, com blocos visíveis.	pixel art, 8-bit style, retro pixel illustration.
Rough Sketch	Rabiscos, rascunhos, traços soltos.	sketch style, pencil sketch, hand-drawn sketch.
Anime / Manga	Estilo japonês com olhos grandes, expressões fortes.	anime style, manga illustration, japanese anime art.
Low Poly	Estilo 3D com poucos polígonos, formas geométricas.	low poly art, low poly 3d, geometric style.
Infographic	Estilo informativo, usado para explicar conceitos.	infographic style, educational illustration, diagram drawing.
Hand-drawn (desenhado a mão)	Linhas irregulares, imperfeições intencionais e elementos que simulam rabiscos, esboços ou escrita manual.	hand-drawn illustration, hand-drawn doodle, sketch style illustration, handmade illustration.
Realist	Imagens que tentam simular a realidade.	realistic drawing, photorealistic render, realistic portrait.
Gothic / Horror / Dark Art	Elementos vitorianos, fantásticos ou de horror.	gothic horror art, dark illustration, macabre art, gothic fantasy.
Surrealism	Imagens ilógicas, irracionais ou abstratas. Associado à composição, ao invés de um objeto.	surreal illustration, abstract illustration, dreamlike art, conceptual illustration.
Pop Art	Incorpora imagens da cultura popular e de massa, utilizando cores vibrantes e/ou técnicas de impressão em série.	pop art illustration, pop art style, comic art, bright colors illustration.
Steampunk	Combinação de elementos de tecnologia distópica com ambientação de revolução industrial e era vitoriana.	vector illustration, vector graphic, vector icon.
Chibi	Personagens com olhos grandes, corpos pequenos e características fofas.	chibi character, chibi art, chibi style.
Collage	Composição de elementos sobrepostos, com aparência recortada.	collage art, mixed media collage, cutout illustration, photo montage art.
Caricature	Representações exageradas e humorísticas de pessoas / personagens.	caricature illustration, funny portrait, exaggerated features art.
Doodle / zentangle	Desenhos espontâneos, padrões repetitivos e linhas contínuas.	doodle art, zentangle pattern, hand-drawn sketch, abstract doodles.
Vaporwave	Estética nostálgica com tons neon, glitch art, anos 80 e 90.	vaporwave art, neon retro, glitch illustration, synthwave aesthetic.
Point / dot art	Técnica de criação de imagens por meio de pontos (pontilhismo).	pointillism, dot art, stippling art, dotwork illustration.
Fluffy (pelúcia)	Estilo fofo e macio, com foco em pelúcia, nuvens ou elementos reconfortantes.	fluffy art, soft character design, kawaii fluffy illustration, cozy art style.
Hard-edge painting	Uso de cores sólidas e limites nítidos, sem transições suaves — formas geométricas e contraste.	hard edge art, geometric abstraction, sharp color blocks, clean lines illustration.
Origami	Arte baseada em dobraduras, com formas com aparência de papel ou estruturas angulares.	origami art, paper fold illustration, geometric paper style, folded paper effect.
Skeuomorphism (realista para interfaces)	Imitação de objetos reais com aparência, texturas e sombras detalhadas.	skeuomorphic design, realistic UI, skeuomorphic interface.
Neomorphism	Estilo suave com botões que parecem “entalhados” ou “elevados” da interface, usando sombras difusas.	neomorphism UI, soft UI, neumorphic design.
Liquid Glass	Inspira-se em líquidos e vidro fluido, com transparência dinâmica, reflexos e luz suave.	liquid glass UI, fluid glass design, glass liquid effect.
Minimalist	Design limpo, simples, com foco no essencial e sem excessos visuais.	minimalist UI, clean interface, minimal design.
Glassmorphism (vidro)	Transparência fosca semelhante a vidro embaçado, com camadas translúcidas e desfoque.	glassmorphism UI, frosted glass effect, translucent UI.
Claymorphism (argila)	Elementos arredondados, 3D suave, cores vibrantes e textura plástica, lembrando massinha.	claymorphism UI, claymorphic design, soft 3D UI.
Negative Space	Uso criativo do espaço vazio para destacar elementos principais e guiar a atenção.	negative space UI, whitespace design, clean spacing UI.

Estilos visuais e suas palavras-chave.

Conheça também

Material de apoio para imagens digitais – Nvlan

Portal Despoluir: Modernização e Redesenho da Experiência

O programa Despoluir é o maior programa ambiental da iniciativa privada do Brasil, promovendo serviços gratuitos aos transportadores como avaliações de opacidade, avaliação da qualidade do diesel e serviço de orientação ao transportador.

Desafio

O portal anterior do programa Despoluir apresentava limitações significativas que comprometiam sua eficácia. O conteúdo estava desatualizado e organizado de forma excessivamente técnica, dificultando o acesso à informação pelos usuários finais.

A identidade visual era pouco atraente e não havia responsividade adequada para dispositivos móveis. Era necessário desenvolver um novo portal mais moderno, claro e estratégico para atender adequadamente aos três públicos principais: transportadores interessados nos serviços, representantes do governo e federações de transporte rodoviário.

Metodologia e processo de desenvolvimento

O projeto foi conduzido através de reuniões mensais com stakeholders para compreender os objetivos do programa e alinhar as prioridades de negócio. Além disso, fizemos coletivamente uma etapa de desk research para entender melhor o negócio. A partir dos dados de monitoramento do Google Analytics, pudemos traçar quais eram as páginas mais acessadas, e quais os gargalos os usuários possuíam ao encontrar uma informação.

Assim, pudemos traçar personas interessadas e utilizamos a matriz CSD para mapear hipóteses e necessidades dos públicos-alvo, direcionando tanto a estratégia de conteúdo quanto a arquitetura da informação.

Foi realizada uma curadoria criteriosa do conteúdo existente, removendo publicações obsoletas e reescrevendo textos com foco na clareza e na explicação dos produtos e serviços oferecidos.

Migração e preservação de conteúdo

A migração técnica do portal envolveu múltiplas etapas para garantir a continuidade do acesso aos conteúdos existentes. Para preservar a experiência do usuário e manter a autoridade de SEO do domínio, implementei um sistema de redirecionamento das URLs antigas para as novas páginas correspondentes, assegurando que links externos e bookmarks continuassem funcionais.

Inicialmente, realizei a migração do antigo SharePoint para SharePoint Online utilizando o SharePoint Migration Tool. Posteriormente, exportei o conteúdo através de ferramentas específicas do WordPress, com apoio de planilhas Excel para o mapeamento e organização dos dados e nova importação no WordPress.

Solução implementada

Propusemos uma nova linguagem visual baseada em publicações recentes do programa, incorporando cores mais vibrantes e linguagem mais acessível, além de reduzir blocos extensos de texto para favorecer a escaneabilidade.

A arquitetura da informação foi completamente redefinida, tornando a navegação mais intuitiva e alinhada aos fluxos reais dos usuários. Durante este processo, foi feito um processo educativo com as áreas envolvidas, pois haviam algumas dúvidas sobre a disposição das informações e serviços. Os componentes foram escolhidos e documentados com foco na padronização e escalabilidade do design, priorizando a performance em dispositivos móveis, que correspondem à maior parte do acesso.

A página de contato foi redesenhada para explicar claramente quais serviços estão disponíveis em cada federação, eliminando ambiguidades que antes só eram esclarecidas após o envio de solicitações. A disponibilidade regional de cada serviços também foi incluída na página individual de cada um, evitando uma possível frustração do usuário que poderia não ser atendido na região em que se encontrava.

Resultados obtidos

Os indicadores iniciais demonstram melhorias significativas na performance do portal: aumento no tempo médio de permanência, melhoria nas taxas de conversão (solicitações de atendimento) redução na taxa de rejeição e crescimento nos acessos via dispositivos móveis.

Os stakeholders reportaram feedback positivo sobre a clareza das informações e a melhoria da experiência de navegação, validando as decisões tomadas durante o processo de redesenho.

Gostaria de agradecer a todo o time envolvido neste processo, e a parceria durante todo o processo de trabalho e entrega. Foi um período de grande crescimento para mim ter feito parte desta equipe.

ITL: Migração de site para WordPress

Com a ajuda da equipe envolvida, conduzi a migração do site institucional do ITL (Instituto de Transporte e Logística) para WordPress, focando na modernização da arquitetura, implementação de responsividade e melhorias significativas de acessibilidade. O projeto envolveu a reconstrução completa da experiência digital, mantendo a identidade visual consolidada da instituição.

Análise da Estrutura Original

O site original apresentava uma estrutura bem definida para uma instituição educacional, com foco em três pilares principais:

Cursos Executivos: Preparação para desafios do setor
Especializações e MBAs: Formação de alta performance
Certificações Internacionais: Qualificação com instituições globais

Estratégia de Migração

1. Arquitetura de Templates Personalizados

Desenvolvi uma estrutura de templates modulares para garantir consistência e flexibilidade:

Hierarquia de modelos de página:

Cabeçalho responsivo com navegação adaptativa. Foram construídos 2 cabeçalhos para melhor divisão da informação.
Página inicial com apresentação dos cursos e notícias mais recentes;
Templates específicos para páginas de cursos, especializações e MBAs.
Páginas individuais de cursos com estrutura padronizada.
Página de resultados de busca otimizada.
Página de erro personalizada mantendo o branding.
Adaptações para responsividade em dispositivos móveis.

2. Implementação de Responsividade

Mobile-First Approach:

Redesenho completo da experiência mobile, priorizando conteúdo e navegação;
Cards de cursos empilháveis em dispositivos menores;
Menu hambúrguer com animações suaves.

3. Melhorias de Acessibilidade (WCAG 2.1)

Navegação por Teclado:

Implementação de skip links para conteúdo principal;
Focus indicators visíveis em todos os elementos interativos;
Ordem lógica de tabulação.

Legibilidade e Contraste:

Ajuste de contrastes para atender padrão AA;
Hierarquia tipográfica clara com tamanhos escaláveis;

4. Otimização de Performance

Implementação de cache avançado;
Minificação de CSS/JS;
Redirecionamento de URLs antigas (com as quais haviam conexões de outros sites e redes sociais).

5. Navegação Intuitiva

Apesar de manter a estrutura do site original, algumas adaptações para a experiência do usuário foram implementadas, como:

Aumento de contraste: A leitura de botões foi facilitada pelo aumento de contraste implementado.
Call-to-Actions Estratégicos: Posicionamento otimizado para conversão

6. Integração com Analytics para Monitoramento

Google Analytics 4 com eventos personalizados;
Monitoramento de Core Web Vitals;
Heatmaps para análise de comportamento;

Resultados Alcançados

Performance

Melhoria de 65% no tempo de carregamento mobile;
Score 80+ no PageSpeed Insights;
Redução de 10% na taxa de rejeição;

Entrega e Capacitação da Equipe

Após a conclusão da migração e testes finais, o sistema foi oficialmente entregue ao ITL. Realizei uma oficina prática com a equipe de comunicação e marketing da instituição, capacitando os usuários internos para o uso autônomo da plataforma WordPress para publicação de notícias. A oficina incluiu a criação de um manual de uso personalizado e estabelecimento de fluxos de trabalho para manutenção contínua do site.

E-AUDSUS: Modernizando a Transparência no SUS

Participei da concepção e desenvolvimento do E-AUDSUS, uma plataforma digital que revolucionou a forma como o Departamento Nacional de Auditoria do SUS (DENASUS) gerencia solicitações de informação e demandas de auditoria. O projeto nasceu da necessidade de criar um canal de comunicação eficiente entre o público e o órgão, seguindo os padrões de transparência do governo federal.

Descoberta e Levantamento de Requisitos

O trabalho de aprimoramento da experiência do usuário começou com um mergulho profundo nas necessidades dos clientes e no estudo dos processos existentes. Durante agosto de 2022, nossa equipe conduziu um levantamento extensivo que incluiu:

Análise documental;
Reuniões semanais de validação de requisitos;
Mapeamento de processos.

Arquitetura da Experiência

Desenvolvemos uma página inicial acolhedora que contextualiza o visitante sobre o propósito do E-AUDSUS. O design segue rigorosamente o padrão GOV.BR, garantindo consistência com outros serviços governamentais. A interface apresenta claramente as duas principais funcionalidades:

Pedidos de Informação: Para solicitações baseadas na Lei de Acesso à Informação;
Denúncias: Para situações que requerem investigação auditorial.

Fluxo de Peticionamento Externo

1. Solicitação Inicial

Criamos um formulário intuitivo onde o cidadão pode registrar sua demanda. As telas foram cuidadosamente estruturadas em abas para organizar os dados da solicitação, do solicitante, as informações relativas ao protocolo SEI, o detalhamento e anexos, caso existam.

As abas foram pensadas tanto para o solicitante quanto para a equipe interna que fará o preenchimento das etapas seguintes.

Análise Interna

3. Análise de Admissibilidade

Projetamos um sistema robusto para análise interna das demandas, incluindo:

Critérios de Admissibilidade: Interface estruturada para verificar atividades realizadas e planejadas
Análise Multicriterial: Seções dedicadas para Competência, Materialidade e Relevância
Jornada Transversal: Abas que representam todo o ciclo de vida da auditoria (solicitação → demanda → planejamento → execução → monitoramento → comunicações)

4. Fluxo de Decisão

O analista competente pode tomar algumas decisões para triar as demandas que chegarem, sendo elas. O fluxo foi pensado para que não houvessem muitos cliques ao realizar as seguintes ações:

Justificar adequadamente decisões de não admissão da demanda;
Encaminhar demandas aprovadas para a esfera competente, quando não forem relativas ao órgão de auditoria;
Manter rastreabilidade completa do processo.

Sistema de Gestão

5. Dashboard de Auditorias

Para suportar a visão gerencial durante o processo de triagem de demandas, também foi elaborada uma interface de relatórios, contendo:

Métricas Visuais: Cards coloridos mostrando auditorias planejadas, não recebidas e em andamento
Gestão de Pessoas: Interface para acompanhar a distribuição de trabalho entre auditores
Histórico Completo: Sistema de busca e filtros para localizar informações específicas

Adequação Organizacional

Adaptamos toda a nomenclatura e estrutura dos protótipos para refletir a nova organização do AudSUS, demonstrando flexibilidade e atenção aos detalhes organizacionais Foram feitas entrevistas com várias das áreas envolvidas, afim de manter coesão entre as ações do sistema e evitar redundâncias.

Padrões GOV.BR

Implementamos rigorosamente os padrões visuais e de usabilidade do Design System do governo federal, garantindo familiaridade e acessibilidade para os usuários.

Referências

Design system do Governo: https://www.gov.br/ds/home

FF HACK: Gerenciamento de documentos diversos de seguradoras

Durante a primeira edição do hackathon da FF Seguros (FF HACKA) – foram apresentados 3 desafios das seguradoras: # Eco Parking, Leitura de Documentos de Seguros (OCR) e Verificação do Estado de Conservação de itens Segurados). O grupo escolheu o desafio 2 – Leitura de documentos de seguros – para se debruçar.

Projeto T-EASY: Revolucionando a Análise de Seguradoras

O projeto T-EASY nasceu da identificação de um problema crítico no setor: o tempo excessivo gasto por profissionais na busca e análise de informações dispersas sobre empresas de médio e grande porte.

A Problemática Identificada

Durante a fase de pesquisa e descoberta, identificamos três principais desafios enfrentados pelos profissionais do setor:

Documentos grandes e não padronizados que dificultam a análise
Muito tempo gasto em análises manuais
Informações e fontes dispersas sobre empresas clientes

Para empresas de grande porte, o cenário é ainda mais complexo, exigindo busca por notícias, histórico de sinistros, processos e quadro societário, onde o risco de deixar alguma informação passar é considerável.

Solução

A plataforma integrada foi criada com três funcionalidades principais:

Extração de Informações: Sistema automatizado que processa documentos diversos de forma padronizada.
Gerenciamento de Informações: Centralização de dados para facilitar o acesso e organização.
Dashboard de Riscos: Interface visual intuitiva para análise de riscos empresariais.

Personas

O T-EASY foi estruturado para atender diferentes perfis profissionais:

Corretores: Respostas mais rápidas das seguradoras e acesso direto ao perfil dos clientes
Analistas: Análises mais ágeis, acesso a informações antes indisponíveis, maior conhecimento da carteira de apólices e menor margem de erro.
Gerentes/FF Seguros: Aumento significativo de produtividade, acesso completo à plataforma e histórico detalhado de cotações.

Benchmarking – Análise de mercado

Ao realizar uma análise comparativa com concorrentes como FF ORBI e I4PRO ECM, identificamos que o T-EASY se destaca por oferecer:

Preenchimento automatizado de apólices;
Extração inteligente de informações de documentos;
Auxílio na tomada de decisões para analistas;
Base de dados completa com perfil dos clientes.

O T-EASY representa a contribuição da equipe para modernizar um setor tradicional, oferecendo uma solução que combina tecnologia avançada com praticidade, porque “não é porque é seguro que tem que ser difícil”. Gostaria de agradecer à FF Seguros pela oportunidade.

Minha aula: Facilitando a criação e gestão de planos de aula para professores

Landing page INPI: Como agregar informações densas em uma página amigável

Quantas pessoas você conhece que possuem o próprio negócio? E, dessas pessoas, quantas delas possuem sua marca ou software registrados no INPI e protegidos?

INPI

O INPI (Instituto Nacional da Propriedade Industrial) é o instituto responsável por proteger as invenções em território brasileiro, mas não é muito utilizado.

O cidadão muitas vezes não sabe da necessidade de proteger sua invenção, marca ou o software que desenvolveu por uma série de razões econômicas, culturais e históricas. Dessa forma, fica sujeito à cópia por terceiros. No Brasil, apenas 42% das startups usam os sistemas de PI.

O problema

Estudando o site do INPI, entendemos o porquê: a experiência poderia ser melhor. Havia muitas informações e pouco direcionamento prático. Assim, nosso time planejou uma landing page fácil e informativa, e segue nosso case detalhado abaixo.

Persona

Baseado em relatórios do INPI sobre startups e em pesquisa da equipe, criamos uma persona.

O Pedro Rocha tem 25 anos e é CEO de startup. Tem uma personalidade idealista, e pretende tornar sua startup em unicórnio, por meio da expansão. Também entende que a proteção das suas ideias e invenções é importante para a segurança e crescimento da empresa. Entretanto, ele é muito ocupado e não tem tempo para buscar as informações necessárias, não entende muito bem a linguagem jurídica e não consegue pagar as taxas de depósito e ainda pagar um escritório de patentes para fazer todo o acompanhamento. Como Pedro não sente clareza o suficiente nas informações dispersas pela internet, resolve deixar esse processo para outro momento.

Sendo o Pedro CEO de startup, ele possui alguns ganhos quando registra seus ativos, como diferencial competitivo, segurança jurídica, respaldo legal contra pirataria e pode usar o registro como publicidade benéfica. Pedro tem consciência de que registros de propriedade intelectual contam pontos para fontes de financiamento, crescimento a médio e longo prazo e inserção nas cadeias de valor. Porém, tem baixa familiaridade com o sistema de PI. Mas será que essas tarefas estão efetivamente claras nos meios de comunicação oficiais? Para responder a essa pergunta, fizemos a jornada do usuário.

Jornada do usuário

A Jornada do Usuário é uma representação gráfica das etapas de relacionamento do cliente com um produto ou serviço, que descreve os passos percorridos antes, durante e depois da compra e utilização. A jornada do nosso usuário foi dividida em etapas: Procura de como se faz o registro, descoberta das informações, tomada de decisão ao se inscrever e realizar pagamento, e a utilização durante o período de espera.

Entendendo a jornada, pudemos mapear com maiores detalhes a experiência que gostaríamos de oferecer ao usuário. Com isso, reunimos todas as ideias em um Canvas da proposta de valor.

Canvas da proposta de valor

O Canvas Proposta de Valor é uma ferramenta que surgiu para auxiliar na criação e posicionamento de produtos ou serviços em torno do que o cliente deseja e precisa.

A partir do canvas da proposta de valor, tínhamos clareza da sequência de tarefas que eram necessárias para que o usuário conseguisse registrar um ativo por conta própria, sendo elas:

Consultar ativos já registrados;

Pagar as taxas;

Descrever seu ativo;

Acompanhar a RPI.

Partindo do princípio de Pareto (80% do resultado com 20% do esforço), decidimos que a melhor forma de atingir nossos objetivos para um produto minimamente viável (MVP) — em apenas 3 dias, pois estávamos em um hackathon — seria uma landing page.

Por quê?

Atualmente (maio de 2021) o site do INPI se encontra como na figura acima. É possível ver que existem várias abas com informes sobre os diferentes tipos de ativos protegidos pelo INPI, bem como um menu repleto de opções. Entretanto, para um usuário que não está acostumado ao sistema e à propriedade intelectual, as inúmeras opções trazem mais confusão do que clareza.

O site também possui um chatbot que melhora a experiência e nos ajuda a caminhar pelas áreas de acordo com nossas dúvidas. Entretanto, o “Felinpi” (apelido do chatbot) apresenta alguns pontos de melhoria, por exemplo: Ao falar com ele que você quer uma registrar uma marca, ele te manda o link do guia de marcas. Só que o guia é enorme, e dificilmente uma pessoa atarefada vai ler esse material. Assim, uma landing page com resumos bem feitos da informação, botões que direcionem especificamente para uma ação e apresentação de conteúdos de forma leve poderia reverter essa desistência enfrentada pelos usuários do site.

Landing page

Como a landing page foi proposta para uma autarquia federal brasileira, o design system utilizado foi o governamental. Os textos foram escritos de forma a conterem de 7 a 10 palavras por linha, e no máximo 4 linhas por bloco, de forma a facilitar a leitura do usuário.

A arquitetura da informação foi pensada de forma a explicar sucintamente ao usuário o que é propriedade intelectual, a importância de proteger a sua ideia, o que pode ser protegido, como registrar e acompanhar o pedido, e, em caso de dúvidas, uma lista com os NITs (Núcleos de inovação tecnológica) de cada região para que o usuário possa entrar em contato.

Front-end

Nossa landing page era tecnicamente simples de ser feita, então só utilizamos linguagem front-end em sua concepção, sendo elas: HTML5, CSS e Javascript.

Mesmo assim, ela resolvia uma dor. Por isso, nossa equipe conseguiu ficar em décimo lugar (de 56 equipes) no desafio, nos garantindo uma vaga no programa de pré-aceleração do SEBRAE.

Gostaria de agradecer imensamente ao INPI pela incrível oportunidade, e ao meu grupo — Mariana e Diemerson — por não terem desistido do desafio e estarem dispostos a sair de sua zona de conforto em todas as etapas.