Apol
Todos os cases
Design & Produto · Agronegócio

Mosaic Direct.

9 pontos de usabilidade implementados nos protótipos do portal Mosaic.

Design system próprio e 9 melhorias de usabilidade no Mosaic Direct — portal de pedidos e agendamento — com Drawer lateral, tabela zebrada, cell stacking, barra fixa, filtros e mais.

O desafio

O Mosaic Direct precisava de consistência e padrões claros pra escalar: múltiplas colunas perdendo referência no scroll, agrupamentos visuais difíceis, tabelas densas sem respiro, modais centralizados onde drawers laterais resolveriam melhor.

A solução

9 pontos de usabilidade documentados e implementados: Drawer lateral no lugar de modal centralizado, tabela zebrada com nth-child para escaneabilidade, congelamento de coluna (sticky), cell stacking (flex-direction: column), barra fixa, hint pulse, indicador de status na borda, filtros e autocomplete. Design system com tokens e biblioteca de componentes.

O resultado

Mais de 20 protótipos navegáveis sobre a mesma régua de design, com cada decisão justificada e referências de componentes (Material Design, Google Sheets, Excel, Airtable).

Destaques técnicos

  • Drawer lateral (560px, slide-in): contexto preservado — o operador continua vendo o fundo enquanto interage.
  • Tabela zebrada (striped rows): nth-child com background #f7f9f8 — diferença perceptual sem poluição visual.
  • Congelamento de coluna (sticky column): position: sticky; left: 0 — identificador permanece visível no scroll.
  • Cell stacking (flex-direction: column): pares de campos relacionados de 4 colunas colapsam pra 2.
  • Indicador de status na borda: border-left 4px <cor-status> — scanning visual rápido sem ler o texto.
  • Autocomplete: hint pulse, direcionamento visual imediato sem tooltip — não irrita na primeira experiência.
  • UX/UI
  • Design System
  • Enterprise
  • Agro
  • Usabilidade
Ver usabilidade
Mosaic Direct — 9 pontos de usabilidade implementados
Mosaic Direct — Drawer lateral e tabela zebrada
Mosaic Direct — congelamento de coluna e cell stacking
Mosaic Direct — indicador de status na borda esquerda

Outros cases.

Ver todos
Sistema white-label

Alemão Auto Vidros.

O sistema inteiro de uma vidraçaria automotiva — com a marca dela.

OS, estoque, financeiro, nota fiscal e RH com ponto eletrônico (Portaria 671) num sistema só, rodando com o nome, as cores e o domínio do Alemão. Ninguém vê “Apol”.

  • Ordens de serviço
  • Estoque
  • Financeiro
  • NF-e
  • Ponto 671
Em produçãoVer case
SaaS · Autopeças usadas

PeçaFácil.

Transforma um desmanche bagunçado num negócio escalável.

Digita a placa da sucata e, em segundos, todas as peças do veículo são catalogadas, precificadas e prontas pra anunciar no Mercado Livre, na OLX ou no marketplace próprio. O que levava dias passa a levar minutos.

  • Cadastro por placa
  • Precificação
  • Marketplace
  • Multi-tenant
MVP em desenvolvimentoVer case
App · Social de tênis amador

Amatch.

O app que dá nota de tênis pra jogador amador.

Um número universal de habilidade (ATR), chat em tempo real entre adversários, rankings de clube e perfil de equipamento. Da ideia ao app instalável e pronto pra loja em três semanas — PWA + nativo iOS/Android.

  • Rating ATR
  • Tempo real
  • PWA → nativo
  • LGPD
  • Next.js 14
  • Supabase
Em produção (web) · pronto pra lojaVer case

Pronto pra começar?

Sua empresa
merece um sistema próprio.

Comece pelo diagnóstico: em 1 minuto a gente lê a sua operação e te mostra a cara do sistema que desenharia pra você — de graça.

Diagnóstico grátis · Sem compromisso · Você sai com um mapa do que dá pra resolver