Audiovisual Freelancer Marketplace — Product & Component System
Most of a two-sided marketplace, plus the component system the rest was built from.
A two-sided marketplace for the audiovisual industry — finding a freelancer for a project, then running contracts and payments inside the platform. I designed most of the product and authored the component system the remaining work was assembled from, plus the marketing site. Also delivered a release-scoped cut of the design filtered to only the screens the dev team was shipping that release. Mostly sole, not sole: another designer reused the components on some screens.
- Role
- Mostly sole designer, and author of the component system
- Timeframe
- May 2024 – Nov 2024
- Stack
- Figma
- Evidence
- Live
- Design file
Two-sided marketplace for the audiovisual production industry connecting producers (Produtoras) with freelance crew members (Freelancers), supported by a platform administration suite (Admin). 447 frames on the main Design canvas covering geographic crew discovery via interactive map view, folder-based candidate shortlisting, a bilateral negotiation loop with counter-proposals and chat threads, in-platform contracts and card payments with designed failure states, plus a release-scoped MVP handoff artifact (Priorização Desenvolvimento).
Agency employment at Sagitta; the commercial relationship belonged to the agency. I was the mostly sole product designer and sole author of the project's component system and marketing site; my colleague João Chagas assisted by reusing my components on select screens. Documented from discovery in May 2024 through revisions in November 2024.
A transactional marketplace for audiovisual production
- 447
- canvas frames on the primary Design page
- 3
- role surfaces (Producer, Freelancer, Admin)
- ~130
- designed state, popup, and confirmation frames
- 2
- deliverable Figma files (Full suite + MVP handoff)
Audiovisual hiring differs fundamentally from generic gig-economy marketplaces. Productions operate on immutable shooting schedules, precise geographic locations, specialized gear requirements, and union-adjacent contractual obligations. A simple directory with a contact button cannot support production companies who must assemble crews under strict budget and timeframe constraints.
Geographic discovery, folder shortlists, and bilateral negotiation
CineMafia moves beyond basic directories by embedding negotiations directly within the application:
- Interactive Map-Based Discovery — Geographic search (home/verMapa) and multi-parameter filtering (filtros avançados, range sliders) allowing producers to find technicians residing near specific shooting locations.
- Folder-Based Shortlisting — Custom user-created collections (favoritos/editarPastas, criar pasta) enabling producers to organize candidate pools by project, department, or shoot date rather than maintaining an unorganized favorites list.
- Two-Sided Counter-Proposal Engine — Complete negotiation loop (fazerproposta, fazerContra-proposta, minhasPropostas/verContraproposta) paired with in-context proposal messaging (mensagensProposta/chat), enabling rates, dates, and overtime terms to be settled on-platform.
- Peer Reviews and Production Ratings — Structured post-wrap evaluation system with a dedicated star-rating component (886:44152) and dispute rejection handling (popupWarning/recusarServiço2).
In-platform contracts, payments, and designed failure paths
The platform locks commercial commitment directly inside the workflow (contratos x6, meiosdePagamento x2, pagamentoCartão x2). Crucially, the design accounts for real-world transaction friction: rather than stubbing payment confirmations, the system models explicit failure paths (popupError/pagamento) and payment retry mechanisms. Over 130 state frames (popupSucess x87, popupWarning x23, popupAsk x4) ensure every user action yields an unambiguous system response.
Release scoping as a deliverable: Priorização Desenvolvimento
Recognizing the risk of scope creep on a 447-frame system, I delivered a second, dedicated Figma file: CineMafia (Priorização Desenvolvimento). Rather than expecting developers to interpret abstract priority tags across hundreds of artboards, this artifact presented an exact, release-scoped slice containing only the screens required for the first shippable release. This established scope control as an explicit design deliverable.
The no-code gap and the catalyst for code
CineMafia launched to production at cinemafia.com.br, confirming that the client acquired real users and deployed the workflow. However, the agency's Bubble developer failed to maintain layout integrity: containers lacked clip-content, padding was altered arbitrarily, and responsive breakpoints exhibited awkward element collisions.
Watching my detailed designs degrade in a no-code visual builder was the pivotal moment in my career. It proved that handing off clean Figma artboards is insufficient if developers cannot preserve the craft. That realization drove me to master TypeScript, React, Next.js, and Tailwind — transforming my practice into design engineering so I could implement and safeguard the software I design.
Watching a no-code build ruin component padding and responsive containers was the turning point. It made me realize that to protect the design craft, I had to learn to write the front-end code myself.
Evidence
Shipped to production and operating in Beta at cinemafia.com.br, confirming the platform mechanics designed in Figma. However, the agency's no-code Bubble developer shipped the build with severe visual defects — incorrect padding, broken grid gaps, and absent clip-content rules. Therefore, the live URL serves exclusively as proof of shipping, while the Figma file is the definitive proof of craft. This exact breakdown became the catalyst for my transition into front-end engineering.