Pular para o conteúdo
← Portfólio
Redesign e desenvolvimento webProdução audiovisual · Miami, Estados Unidos

The Mavo Group: o site de uma produtora tinha que parecer uma produção

Catorze páginas, vídeo em cada seção e duas marcas convivendo no mesmo domínio, para uma produtora de Miami que trabalha com artistas e com marcas.

Página inicial de themavogroup.com: vídeo em tela cheia com o título «Creative Ecosystem Built for Growth» e a barra de navegação da Mavo

Resumo do projeto

A The Mavo Group é uma produtora audiovisual com sede em Miami que atua em duas frentes: artistas de música e marcas. Fizemos o redesign e o desenvolvimento do site completo, em inglês e para o público dos Estados Unidos: catorze páginas ligadas pela navegação, vídeo em quase todas as seções e uma submarca —Creators by Mavo— que vive dentro do mesmo domínio com identidade própria.

O desafio

O site de uma produtora tem um problema que os outros não têm: o produto do cliente é o vídeo, e o vídeo é justamente o que mais pesa numa página.

Tudo tinha que se mexer e, mesmo assim, carregar. Página inicial, serviços, processo e submarca se apoiam em imagens em movimento. Cada uma é um arquivo que precisa ser recortado, comprimido e servido pelo próprio domínio, sem depender de um player de terceiros que, além disso, colocaria cookies de terceiros.

Dois públicos que não compram da mesma forma. Um artista procura videoclipe e capa; uma marca procura comercial e conteúdo. Colocar os dois na mesma página de serviços teria deixado ambos pela metade.

E uma terceira linha de negócio com marca própria. Creators by Mavo tem outro produto, outro logotipo, outro e-mail e outras redes. Podia ser um site à parte —caro de manter— ou mais uma seção, o que a teria diluído.

Objetivos

Que o site parecesse uma peça da MAVO, e não um template com as cores dela. Que um artista e uma marca encontrassem cada um o seu caminho sem ler a página do outro. Que o Creators by Mavo tivesse personalidade própria sem duplicar a operação. E que o cliente pudesse trocar o reel sozinho, sem nos ligar toda vez que lança uma peça.

A solução, seção por seção

Carrossel de trabalhos do site da The Mavo Group, com a peça «Save Me» de Stringz EMB em tela larga e uma grade de conteúdo de criadores abaixo

O trabalho antes do discurso

Uma produtora é contratada pelo que já filmou. A página inicial abre com o reel, e não com um parágrafo: seis peças em um carrossel, cada uma com seu título e o artista ou a marca que a assina, e abaixo a grade de conteúdo vertical. Quem chega vê trabalho nos primeiros segundos.

Seção «Our simplified process» do site da The Mavo Group, com três cartões verticais intitulados We ideate, We produce e We launch sobre um fundo vermelho

Três passos, não um organograma

Ideate, produce, launch. O processo da casa é contado em três cartões verticais, na proporção de um celular, sobre o fundo vermelho da marca. O formato não é capricho: quase tudo o que a MAVO produz termina na vertical.

Seção «For music» do site da The Mavo Group, com os cinco serviços para artistas listados sobre um frame de um artista diante de um microfone

Dois públicos, duas entradas

A MAVO vende para artistas e para marcas, e eles não compram da mesma forma. A seção «For music» lista os cinco serviços para artistas —videoclipe, conteúdo, formato curto, fotografia de capa e pós-produção—, cada um com sua própria página.

Seção «For brands» do site da The Mavo Group, com os serviços para marcas sobre um frame de três pessoas rindo em uma sala de estar

A mesma estrutura para as marcas

«For brands» repete o padrão com comerciais, conteúdo de marca, formato curto, fotografia e pós-produção. Nove páginas de serviço no total, cada uma com seu próprio material, para que cada busca caia onde deve cair, e não em uma listagem genérica.

Página inicial do Creators by Mavo, com o título «Mobile first content production» sobre um degradê vermelho e quatro cartões verticais de criadores

Creators by Mavo: uma marca dentro da marca

A linha de conteúdo feito com celular não cabia como mais uma seção: tem outro produto, outro preço e outro público. Vive dentro do mesmo site com identidade própria —degradê vermelho, cartões verticais, verde de destaque— e um seletor «I’m a…» que muda a mensagem conforme a pessoa seja artista, marca ou criador.

Rodapé do Creators by Mavo com seu logotipo próprio, seu e-mail de contato e suas contas de Instagram e TikTok

Com logo, e-mail e redes próprios

A submarca vai até o rodapé: logotipo «Creators by Mavo», e-mail próprio e as duas redes onde o seu público realmente está, Instagram e TikTok. Convive com a marca-mãe sem se confundir com ela, e sem duplicar o site.

Página Connect do site da The Mavo Group, com o formulário de contato e os campos de nome, e-mail e telefone

Um formulário que já classifica

Connect não pergunta «como podemos ajudar?». Pergunta quem é você e que tipo de projeto está trazendo, com as sete opções que a MAVO produz. A solicitação chega ao e-mail já classificada, e a primeira consulta é oferecida sem custo no próprio cabeçalho.

Página Thinking do site da The Mavo Group, com o título «We are Mavo» e o parágrafo sobre os dois fundadores latinos

Thinking: quem são, não há quantos anos existem

A página institucional não lista fundadores com foto de gravata. Conta que a MAVO nasceu de dois latinos em Miami e abre um espaço declarado para experimentar —documentário, curta, ilustração, imagem gerada—. É a parte do site que explica por que eles são contratados, e não só o que fazem.

Decisões do projeto

✓Vídeo servido pelo próprio domínio, sem player de terceiros
✓Fundos sem som e em loop, com o texto legível sobre qualquer frame
✓Uma página por serviço, nove no total
✓Submarca com identidade própria no mesmo domínio
✓Formulário que classifica a solicitação antes de ela chegar ao e-mail
✓Botão fixo de WhatsApp, que é como o público deles escreve
✓Reel editável pelo cliente, sem mexer em código
✓Site em inglês, para o público dos Estados Unidos

Tecnologias utilizadas

WordPressElementorFigmaVídeo H.264 próprioHTMLCSSJavaScriptGoogle Site Kit

O rodapé, e um esclarecimento

Rodapé do site da The Mavo Group com o menu, os dados de contato em Miami e o crédito de web design para a MTechnology

O site foi feito por nós, e o rodapé dá o crédito. As peças audiovisuais que aparecem nas capturas não são nossas: são produções da MAVO para os próprios clientes —UNSIN, MVSTERMIND, Stringz EMB, Amini’s, Julio Reyes Copello— e aparecem aqui porque fazem parte do site que construímos. Nem a produção nem os resultados dessas peças são uma conquista da MTechnology.

Capturas do site publicado · themavogroup.com

Galeria

As nove páginas de serviço, uma a uma

Cada serviço tem sua própria página, com seu próprio vídeo de fundo e sua própria seleção de trabalhos. Estas são oito delas; a nona, «Short form / Reels» para marcas, repete a estrutura da página de música.

Página «What we do» da The Mavo Group, com o título sobre um close em vídeo e as peças do portfólio começando abaixo
What we do/what-we-do
Página «Music videos» da The Mavo Group, com o título sobre um frame de um artista de óculos vermelhos sob luz vermelha
Music videos/music-videos
Página «Content» da The Mavo Group, com o título sobre um frame de um músico ao piano entre velas
Content/content
Página «Short form / Reels» da The Mavo Group, com três celulares em perspectiva reproduzindo conteúdo vertical
Short form / Reels/short-form-reels
Página de fotografia para música da The Mavo Group, com o título sobre o retrato de uma artista diante de um fundo floral vermelho
Photography / Cover/photography-cover-music
Página «Commercials» da The Mavo Group, com o título sobre uma cena familiar em uma cozinha durante uma videochamada
Commercials/commercials
Página de fotografia para marcas da The Mavo Group, com o título sobre uma atleta treinando com cordas em uma academia
Photography · marcas/photography-3
Página «Postproduction» da The Mavo Group, com o título sobre um frame de uma cena filmada em um quarto
Postproduction/postproduction

Capturas do site publicado · cada cartão abre a página real

← Conecta Región CaribeDropanas →

Seu projeto é o próximo?

Conte o que você precisa resolver e mostramos um case parecido com o seu.

Este projeto nasceu do nosso serviço de desenvolvimento web.

Agendar uma chamada
WhatsApp

Agendar chamada

Escolha o dia (horário de Bogotá, UTC−5)
Horário
Seus dados

A confirmação chega por WhatsApp e e-mail. Prefere escrever direto? [email protected]