Goalcast

Visão geral

A Goalcast é uma das principais plataformas de mídia inspiracional e publica vídeos curtos, frases e artigos longos sobre crescimento pessoal, resiliência e motivação. O conteúdo dela chega a milhões de leitores e espectadores todo mês, no site, no YouTube e nas redes sociais.

O projeto foi o redesign editorial completo do site da Goalcast, entregue quando eu estava no time de design da RebelMouse. O objetivo era modernizar a marca, deixar a descoberta de conteúdo mais rápida e dar a cada formato editorial (artigos, frases e vídeos) um layout próprio, feito para engajar e ser compartilhado.

Papel: Design UX/UI e atualização da marca
Escopo: Redesign do site editorial para artigos, frases e vídeos, desktop e mobile
Ferramentas: Figma
Setor: Mídia
Empresa: RebelMouse (opens in a new tab)

Meu Papel

Fui o designer UX/UI do projeto da Goalcast na RebelMouse. Fiquei responsável pela linguagem visual, pelo novo sistema de marca, pelos layouts responsivos de cada formato editorial e pelo modelo de interação da navegação, da busca e da descoberta de conteúdo.

Trabalhei direto com o time de engenharia da RebelMouse para cada tela sair limpa, rápida e pronta para o CMS, e com o time editorial da Goalcast para ajustar os layouts ao jeito como eles publicam de verdade.

Resultados

No ar. O novo design substituiu o site antigo no computador e no celular.
Menos rolagem. A home do celular ficou 41% mais curta.
Um formulário de newsletter na home. A home antiga não tinha nenhum.

Decisões de design

Arraste a barra em cada quadro para comparar a home antes do redesign, à esquerda, com a nova, à direita.

A primeira tela abre com uma matéria.

A home antiga abria com uma foto pequena entre duas colunas de títulos, sob um menu fino com o logo no canto. A nova dá à matéria principal uma foto grande com categoria, autor e data, põe o logo no centro do menu e acrescenta as abas Latest e Videos ao lado dela. Quem lê vê primeiro a matéria do dia e chega aos vídeos sem sair do topo.

Top of the Goalcast home, desktop, after — Computador

Top of the Goalcast home, desktop, before — Computador

Top of the Goalcast home, phone, after — Celular

Top of the Goalcast home, phone, before — Celular

Toda seção segue um padrão só.

Cada seção antiga tinha o próprio estilo de título e a própria grade. Na home nova, toda seção tem o mesmo título com a marca amarela, os mesmos cartões com categoria, autor e data, e um botão para ver mais. Quem lê aprende o padrão uma vez, e a redação preenche qualquer seção do mesmo jeito.

A story section of the Goalcast home, desktop, after — Computador

A story section of the Goalcast home, desktop, before — Computador

A story section of the Goalcast home, phone, after — Celular

A story section of the Goalcast home, phone, before — Celular

Fotos e títulos ficam juntos.

A seção Inspiring Celebrities era um xadrez, com cada título numa caixa ao lado da foto, alternando os lados. Agora é uma fileira de cartões com o título embaixo de cada foto. O olho segue uma linha só, e a seção ocupa menos da metade da altura.

Inspiring Celebrities section of the Goalcast home, desktop, after — Computador

Inspiring Celebrities section of the Goalcast home, desktop, before — Computador

Principais Contribuições

Renovação da marca. Modernizei a identidade da Goalcast com uma paleta de preto forte, amarelo sol e verde-azulado profundo. O resultado passa otimismo e confiança sem perder a credibilidade editorial que a marca tinha construído.
Layouts editoriais. Desenhei layouts próprios para os três formatos que movem a Goalcast: artigos, artigos de frases e artigos em vídeo. Cada um foi pensado para o jeito como aquele formato é lido e compartilhado.
Home e páginas de seção. Refiz a home e as páginas de seção com um grid modular de conteúdo, para os editores destacarem matérias, publicações recentes e vídeos de sucesso sem mexer em código.
Experiência de descoberta. Redesenhei a página de busca, o menu e as páginas de autor, para o leitor passar de tema, formato e autor em um ou dois cliques.
Central de vídeos. Criei uma seção de vídeos e um layout de artigo em vídeo que tratam o vídeo como conteúdo principal, e não como um vídeo incorporado na lateral. Isso é essencial para uma marca que cresce com vídeos curtos.
Páginas de apoio. Incluí os detalhes que a maioria dos redesigns esquece: uma página 404 amigável e uma página de imprensa, as duas coerentes com o resto do sistema.
Responsivo desde o início. Cada layout foi desenhado primeiro para o celular, junto com a versão de desktop. Pelo tráfego da Goalcast, é no celular que a maioria dos leitores conhece a marca.
Entrega pronta para o CMS. Entreguei o design numa estrutura que a plataforma da RebelMouse conseguia implementar sem ajustes, e a publicação continuou rápida para o time editorial da Goalcast.