Marketplace de freelancers do audiovisual — produto e sistema de componentes
Boa parte de um marketplace de dois lados, e o sistema de componentes que sustentou o resto.
Um marketplace de dois lados para o audiovisual — encontrar um freelancer para um projeto e depois tocar contratos e pagamentos dentro da plataforma. Desenhei a maior parte do produto e criei o sistema de componentes a partir do qual o restante foi montado, além do site institucional. Entreguei também um recorte do design por release, filtrado só para as telas que o time de dev ia subir naquela entrega. Foi quase todo meu, não todo: outro designer reutilizou os componentes em algumas telas.
- Função
- Mostly sole designer, and author of the component system
- Período
- mai. de 2024 – nov. de 2024
- Stack
- Figma
- Evidência
- No ar
- Arquivo de design
Marketplace de dois lados para o setor audiovisual conectando produtoras de vídeo e cinema (Produtoras) a técnicos e artistas freelancers (Freelancers), com retaguarda operacional completa (Admin). 447 frames na página principal de Design contemplando busca geográfica por mapa interativo, organização de favoritos em pastas, ciclo de negociação bilateral com contraproposta e chat dedicado, contratos e pagamento por cartão dentro da plataforma com tratamento de erros, além de arquivo específico de recorte para MVP (Priorização Desenvolvimento).
Atuação como designer contratado pela agência Sagitta; o relacionamento comercial com o cliente pertencia à agência. Atuei como designer de produto quase integral e autor único do sistema de componentes do projeto e do site institucional; meu colega João Chagas colaborou reutilizando meus componentes em telas pontuais. Trabalho documentado desde o discovery em maio de 2024 até revisões em novembro de 2024.
Um marketplace transacional para a produção audiovisual
- 447
- frames na página principal de Design
- 3
- perfis de acesso (Produtora, Freelancer, Admin)
- ~130
- frames de estado, popups e confirmações
- 2
- arquivos Figma entregues (Suíte completa + MVP)
A contratação no audiovisual possui dinâmicas que plataformas tradicionais de freelancers não atendem. Diárias de filmagem não admitem atraso, locações exigem proximidade geográfica, equipamentos demandam especificações exatas e acordos comerciais precisam de segurança jurídica imediata. Um catálogo simples com botão de contato não atende produtoras que precisam fechar equipes inteiras em prazos exíguos.
Busca por mapa, pastas de favoritos e ciclo de contraproposta
O CineMafia supera diretórios genéricos integrando a negociação comercial à experiência de busca:
- Busca Geográfica em Mapa — Localização de profissionais em mapa interativo (home/verMapa) combinada a filtros avançados de função, diária e equipamentos, permitindo contratar técnicos próximos ao set.
- Favoritos Estruturados em Pastas — Criação de pastas personalizadas pelo usuário (favoritos/editarPastas, criar pasta), viabilizando organizar equipes por projeto, departamento ou diária em vez de acumular listas soltas.
- Mecanismo Bilateral de Contraproposta — Ciclo completo de negociação (fazerproposta, fazerContra-proposta, minhasPropostas/verContraproposta) articulado a um chat de mensagens da proposta (mensagensProposta/chat), resolvendo valores e termos contratuais na própria plataforma.
- Avaliações e Reputação Pós-Diária — Sistema de nota com componente dedicado de estrelas (886:44152) e fluxo de recusa fundamentada de serviço (popupWarning/recusarServiço2).
Contratos na plataforma, pagamentos e caminhos de falha desenhados
O sistema fecha o compromisso financeiro dentro da plataforma (contratos x6, meiosdePagamento x2, pagamentoCartão x2). Mais importante: o design contempla as falhas do mundo real. Em vez de prever apenas o fluxo perfeito de sucesso, foram desenhados estados explícitos de erro de processamento (popupError/pagamento) e recuperação de pagamento. Cerca de 130 frames de modais e avisos (popupSucess x87, popupWarning x23, popupAsk x4) garantem resposta inequívoca do sistema para qualquer ação do usuário.
Gestão de escopo como entrega: Priorização Desenvolvimento
Diante da densidade de um sistema com 447 frames, produzi um segundo arquivo autônomo no Figma: CineMafia (Priorização Desenvolvimento). Em vez de obrigar o time de engenharia a navegar por marcações confusas no arquivo geral, entreguei uma versão filtrada estritamente com as telas que deveriam subir na primeira entrega funcional. A gestão de escopo foi tratada como um entregável formal de design.
O descompasso do no-code e o catalisador para o código
O CineMafia foi publicado e opera em cinemafia.com.br, provando que o fluxo de produto foi colocado na mão de usuários reais. Entretanto, o desenvolvedor Bubble da agência não respeitou os princípios fundamentais do layout: contêineres sem clip-content gerando vazamento visual, paddings alterados arbitrariamente e quebras responsivas desordenadas.
Ver telas milimetricamente planejadas serem desfiguradas em um construtor visual foi o divisor de águas na minha trajetória profissional. Ficou evidente que entregar protótipos impecáveis no Figma não basta se a execução técnica degradar o trabalho. Essa constatação me motivou a dominar TypeScript, React, Next.js e Tailwind — tornando-me um design engineer capaz de programar e assegurar a fidelidade de tudo o que desenho.
Assistir a uma implementação no-code destruir espaçamentos e contêineres responsivos foi o ponto de virada. Percebi que, para proteger o padrão de design, eu precisava aprender a construir o código do front-end com minhas próprias mãos.
Evidência
Publicado e em operação em estágio Beta em cinemafia.com.br, confirmando a mecânica de produto desenhada no Figma. Contudo, o desenvolvedor Bubble da agência entregou o build com falhas visuais graves — espaçamentos incorretos, quebras de alinhamento e falta de clip-content em contêineres responsivos. Por essa razão, a URL pública serve exclusivamente como comprovação de lançamento, enquanto o arquivo no Figma é a evidência real de refinamento visual. Esse descompasso foi o catalisador para minha transição definitiva para o front-end.