IngFAQ

O redesign do IngFAQ surgiu da necessidade de reestruturar e documentar padrões, módulos e tokens da plataforma, com o objetivo de implementar e consolidar o design system da Ingenium Systems.

Escopo do trabalho

Design System, Web App

Status

Em atuação

IngFAQ
IngFAQ
IngFAQ

IngFAQ com o Design System integrado.

Como começou?

Quando entrei na Ingenium Systems, percebi que o IngFAQ, principal aplicação de suporte da empresa, enfrentava desafios de usabilidade e consistência visual. A ferramenta, que deveria centralizar informações e facilitar a rotina de gestores e funcionários, acabava se tornando um ponto de frustração: as interfaces eram desenvolvidas de forma isolada, havia falta de alinhamento entre design e desenvolvimento, e os usuários frequentemente relatavam dificuldades em encontrar e utilizar recursos básicos.

Esses problemas impactavam diretamente a eficiência da equipe e a experiência dos clientes. Diante desse cenário, conduzi o redesign completo do IngFAQ, com foco em tornar a aplicação mais intuitiva, escalável e alinhada às reais necessidades dos usuários. Durante o processo, aproveitei a oportunidade para estruturar e documentar padrões visuais e funcionais, integrando o projeto ao início de um Design System que hoje serve como base para futuros produtos da empresa.

Página de artigo
Página de artigo
Página de artigo

Versão antiga da página de edição de artigo.

Identificando o problema

O IngFAQ foi desenvolvido para centralizar conteúdos de suporte e permitir que clientes criem, organizem e publiquem artigos de forma simples. No entanto, ao analisar a aplicação, percebi que sua estrutura apresentava barreiras que comprometiam tanto a experiência do usuário quanto a eficiência da ferramenta.

Para mapear esses pontos, realizei uma análise heurística da interface e da navegação, que revelou os seguintes problemas:

  1. Inconsistência na hierarquia de títulos e seções – a utilização aleatória de H1, H2 e H3 dificultava a leitura e a escaneabilidade dos artigos.

  2. Busca interna pouco eficiente – ao digitar palavras-chave, o sistema retornava resultados incompletos ou irrelevantes, tornando difícil encontrar conteúdos específicos.

  3. Feedback limitado ao publicar conteúdo – não havia mensagens claras sobre status de publicação, erros ou sucesso, gerando insegurança nos usuários durante a criação e edição.

  4. Gestão de links e mídias confusa – sem visualização prévia ou confirmação de formatação, aumentava o risco de artigos com imagens ou links quebrados.

  5. Dificuldades de navegação entre categorias – a ausência de uma hierarquia clara obrigava os usuários a abrir múltiplos menus ou pesquisar manualmente para localizar conteúdos relacionados.

Versão antiga do IngFAQ
Versão antiga do IngFAQ
Versão antiga do IngFAQ

Versão antiga da página "Central de ajuda".

Abordagem e processos contra o tempo

A ausência de operações de design na equipe fazia com que os sistemas fossem desenvolvidos sem documentação clara, o que resultava em inconsistências de interface e falhas recorrentes. Além disso, não havia um time dedicado de DesignOps, e as demandas de design eram tratadas conforme a urgência do momento.

Para avançar com o redesign do IngFAQ, precisei estruturar um processo ágil e objetivo, dividido em quatro frentes principais:

  • Pesquisa e diagnóstico – conduzi um inventário da interface existente, mapeando elementos repetidos ou conflitantes, além de entrevistas rápidas com colaboradores para identificar as principais dores no uso da ferramenta.

  • Fundamentos visuais – defini padrões de cor, tipografia, espaçamento, ícones e estados de interação, garantindo maior consistência visual e usabilidade dentro da aplicação.

  • Construção de componentes – organizei a interface no Figma e criei versões revisadas dos elementos da aplicação, já com variantes de uso. Antes da implementação, testei a usabilidade internamente para validar fluxos de navegação e interações.

  • Documentação funcional – para manter a agilidade, toda a organização foi estruturada no próprio Figma, evitando a curva de aprendizado de novas ferramentas. Esse arquivo centralizado serviu como referência imediata para o time de desenvolvimento durante a implementação do redesign.

Variáveis
Variáveis
Variáveis

Organização de tokens utilizando as variáveis do Figma.

Qual foi o impacto?

Mesmo com o projeto ainda em andamento, os primeiros resultados do redesign do IngFAQ apareceram já no primeiro mês. As interfaces se tornaram mais consistentes e alinhadas à identidade da empresa, o que trouxe ganhos para diferentes frentes:

  • Para o design – ficou mais simples criar, replicar e evoluir recursos sem retrabalho.

  • Para os desenvolvedores – a implementação passou a acontecer de forma fluida, sem divergências em relação aos protótipos.

  • Para o suporte e os clientes – a navegação se tornou mais clara, facilitando o acesso às informações. O retorno foi tão positivo que alguns clientes solicitaram que as melhorias também fossem aplicadas em outras plataformas contratadas.

Imagem-01
Imagem-01
Imagem-01
Imagem-02
Imagem-02
Imagem-02
Imagem-03
Imagem-03
Imagem-03
Imagem-04
Imagem-04
Imagem-04
Imagem-05
Imagem-05
Imagem-05

© Criado com carinho (e Framer) por mim. Todos os direitos reservados.

© Criado com carinho (e Framer) por mim. Todos os direitos reservados.

© Criado com carinho (e Framer) por mim. Todos os direitos reservados.

© Criado com carinho (e Framer) por mim. Todos os direitos reservados.