Audiovisual Production Agency — Portfolio & Merch Commerce

A media-first portfolio joined to a complete merchandise purchase funnel.

Portfolio and merchandise commerce design for an audiovisual production agencyPortfolio and merchandise commerce design for an audiovisual production agency

A creative production company's digital presence, combining a project showcase portfolio, studio narrative and editorial blog with a full merchandise e-commerce flow. I designed thirteen desktop and mobile layouts — home, about, contact, projects, blog listing and article, plus the complete purchase funnel of products, purchase, cart and payment — establishing the media-first visual hierarchy and the portfolio patterns. A design credit only: no production URL was recovered for this build.

Role
Sole website UI designer
Timeframe
Mar 2023 – Apr 2023
Stack
Figma
Evidence
  • Design file

Open the design file

Sole Website UI Designer for Macedo e Macedo Produções, a media, entertainment, and audiovisual production agency. Designed 13 high-fidelity responsive screens on the primary Design page across desktop and mobile devices (Início - Desktop, About, Contact, Projetos, Blog, Produtos, Compra, Carrinho, Pagamento, and mobile views) combining an audiovisual portfolio showcase with an editorial blog and an integrated merchandise e-commerce purchasing funnel, supported by a 30-node Style Guide in Figma (file key RTrRC2hyqINdbTN93zhCbN).

Agency employment at Sagitta delivering from March 2023 to April 2023. Juan served as sole website UI designer within the agency team: Kelvin Bezerra created the brand identity and logo, Juan designed the complete agency portfolio, projects library, editorial blog, and e-commerce merchandise checkout in Figma, and an external no-code developer was tasked with WordPress implementation. Scoped by Ramon.

Hybrid agency architecture: audiovisual portfolio and commerce

13
high-fidelity desktop and mobile layouts designed
30
style guide tokens, social icons, and UI components
3-in-1
integrated system (Agency Portfolio + Blog + Merchandise Shop)
Figma
audited 5-page design artifact evidencing complete delivery

Creative and audiovisual production agencies face a unique positioning challenge: their website must serve as an immersive showcase of cinematic work while simultaneously operating as a commercial hub for client inquiries and studio merchandise. Macedo e Macedo Produções required an architecture that balanced media-first portfolio galleries with an integrated commerce funnel for production assets.

Content hierarchy across 13 responsive layouts

On the primary Design page (node 4:7), I designed an integrated 3-part digital presence:

  • Audiovisual Project Showcase (Projetos & Início) — Full-bleed video thumbnail grids with category tagging (commercials, music videos, documentaries), director notes, and client attribution credits.
  • Studio Identity & Inquiries (About & Contact) — Narrative storytelling outlining production equipment capabilities, post-production suites, and direct RFP quote inquiry forms.
  • Editorial Insights (Blog - Desktop & Blog #14) — Clean editorial blog templates for behind-the-scenes filmmaking breakdowns, technical equipment reviews, and industry insights.
  • Merchandise & Asset Commerce (Produtos, Compra, Carrinho, Pagamento) — Complete e-commerce checkout flow enabling the studio to sell branded apparel, presets, and digital assets with bag and payment states.
Never say this one shipped, and never attach a URL to this record. No production URL was recovered and the original domain is dead. A same-surname domain was checked on 2026-08-21 and positively ruled out as an unrelated business. What is backed is the audited 5-page Figma design artifact.

Style guide and cinematic visual tokens

The 30-node Style Guide page (node 4:8) defined Kelvin Bezerra's brand assets: dark-mode canvas contrast rules optimized for video playback, custom social media iconography, video carousel navigation arrows, and structured typography hierarchies.

What this project is and is not

  • Not brand identity or logo design. Kelvin Bezerra created the Macedo e Macedo Produções logo and visual assets.
  • Not WordPress implementation. Development was assigned to an external no-code developer.
  • Not video production or cinematography. I designed the web interface and portfolio layouts, not the films.
  • Not a live or verified public website. The agency ceased operations and the domain is dead; this is a design artifact credit.
  • Not supported by commercial metrics. No client lead volumes or merchandise sales figures exist in the portfolio record.

The power of media-centric digital portfolios

Macedo e Macedo Produções demonstrates how creative studios can unify disparate services—video showcases, editorial articles, and commercial merchandise—under a cohesive visual identity. Across 13 detailed screens, the design delivered an expressive, cinematic web presence.

Evidence

The media production agency subsequently shut down its commercial business and halted operations. The project domain is dead, and no record of the live production site survives. Never attach a live URL to this record (a same-surname domain was investigated and confirmed to be an unrelated business). No metrics exist. This case study documents creative agency portfolio design, media showcase grids, and hybrid portfolio-commerce architecture.