Anteriormente conhecido como "Portal RP Movies", o conteúdo do blog consistia de novidades, críticas e notícias do mundo do cinema mundial. Defasado pelo tempo, a necessidade eminente pela oxigenação passou a ser sentida através dos únicos sinais de que dispunham (a queda dos social signals de suas redes).

Atendendo ao requisito de um desenvolvimento projetual enxuto, com o objetivo de atribuir uma identidade moderna, simples e eficiente ao blog, tracei um cronograma simples e objetivo, certificando-me de não negligenciar a fase de research, procedimento comum em lean projects. Além disso, incluí no escopo projetual todos fundamentos necessários para o desenvolvimento posterior de uma estratégia sólida em marketing digital.

Para dar início a fase de research, analisei o antigo portal, e constatei o mesmo que um simples olhar às screenshots abaixo devem lhe revelar: tratava-se de um site fortemente defasado. 

Seu perfil de comunicação era rígido, sério e pouco dinâmico. Sua identidade não possuía se quer uma paleta cromática ou o mais simples dos logotipos. Qualquer apreço pela qualidade do Visual Design e da Usabilidade eram desconhecidos, e o sentimento geral era de que o mesmo havia sido desenvolvido no início do milênio e não teve qualquer atualização além das renovações anuais de hospedagem desde então.

Sua estrutura era datada, não-responsiva e com excesso de elementos redundantes (como a repetição desnecessária da seção "tópicos recentes"), enquanto contrastava com a falta de outros recursos essenciais (como ferramentas analíticas, sistemas de capturas de emails e funis de marketing).

Até mesmo na não tradução de elementos do site, era visível a falta de atenção com o branding e com a Experiência do Usuário. As matérias redigidas no blog (2ª screenshot) eram densas, rígidas, sem hierarquia visual funcional e permeadas de um design visual nada atraente, que pouco agregava em termos  de entusiasmo à leitura.

Para evitar um desenvolvimento projetual baseado em nada além de "achismos e preferismos", dei início a um processo de lean research, com o objetivo único de identificar necessidades latentes e reais dos usuários leitores do blog. Contatando leitores (e ex-leitores) do portal, conduzi algumas entrevistas, e dos resultados consolidados desta fase, destaco os principais de maneira sucinta, abaixo:

Além das informações demográficas básicas, apontadas acima, que identificam claramente uma audiência baseada em um público jovem (20 aos 34 anos), em sua maioria feminina, conseguimos apurar algumas características mais específicas:

A pesquisa com o público e o briefing realizado convergiram de maneira fluída a um ponto em que ficou claro a identidade visual que um portal de entusiasmo à sétima arte deveria ter: moderno, agradável e cativante. Os conceitos do design, em termos menos abstratos, constam na seção à seguir.

O novo blog (agora chamado "Fila da Pipoca") foi projetado com interface minimalista, atraente e funcional:

Minimalista (clean) por ser moderno, objetivo (principalmente na densidade de sua redação), livre de poluição e com grande impacto visual através da forma de expor conteúdo e se comunicar com seu público jovem. De proporções justas e livre de redundâncias.

Atraente ao evitar grandes (e maçantes) blocos de texto sem vividez, dinamismo ou capacidade de engajar e entreter. Ao retratar e expor conteúdo multimídia sobre um assunto tão visual e colorido, evitei a falta de vida antes expressada pelo layout abusado através de uma paleta cinza nula, de pouca (ou nenhuma) hierarquia visual e sem qualquer capacidade persuasiva (em termos de entusiasmo, mesmo). As proporções, transições, paletas tonais, hierarquia tipográfica, visual design e arquitetura de informação também foram pensadas de forma à agregar coerência a esta identidade, oferecendo, acima de tudo, uma experiência agradável e prazerosa ao usuário.

Funcional ao ser completamente responsivo e otimizado estruturalmente para obter os melhores resultados em termos de conexão, velocidade e demais pontos técnicos. Ao estar preparado para atrair novos acessos (até mesmo via SEO), de converter esses acessos em compartilhamentos sociais e engajamento, e ao final do processo, ao permitir a análise desses dados com precisão e eficiência. Ao contar com AI pensada na melhor experiência para o usuário (e em seu próprio idioma), com todos os recursos esperados pelo público (e sem redundâncias).

Pensando na eficiência persuasiva do novo site, projetei uma seção above-the-fold capaz de impactar visualmente e também de se apresentar brevemente (C), a novos leitores. A nova identidade do website, moderna, jovem e vívida pode ser percebida desde o primeiro contato com o novo site.

Além disso, o banner full-width (B) presente no topo da seção permite a apresentação regular de temas de destaque, como críticas de blockbusters ou coberturas de grandes eventos internacionais, tornando a homepage do site dinâmica e impactante, além de funcional. A sempre presente CTA direciona o usuário diretamente à página de destaque do momento, proporcionando persuasão ao guiar a ação do usuário.

A sutil exibição dos posts (D), na parte mais inferior da seção, é proposital: afirma ao usuário a existência de um conteúdo imediato que, ao gerar sensação de continuidade e não revelar-se completamente, desperta curiosidade. A intenção desta estratégia é a de diminuir as taxas de rejeição da homepage.

O header (A), enquanto na seção above-the-fold, é projetado de maneira única: assume fundo transparente, o que passa sensação de integração e singularidade, sem quebrar com a experiência visual do usuário em relação ao conteúdo do banner principal, oferecendo experiência de navegação prazerosa e sutil.

A seção blog é full-width e apresenta os artigos, em ordem de publicação, de maneira visual e objetiva. Não há sidebars poluindo a experiência visual do usuário, excertos ou qualquer outro tipo de distração. Ao invés disso, a própria navegação global do site (header fixo) é composta das categorias do blog, proporcionando uma arquitetura simples, rápida e objetiva. A página inicial exibe um número limitado de postagens, por motivo de otimização de desempenho. Por isso, é possível navegar pelas diferentes páginas através dos botões de navegação inferiores. 

O rodapé do site, por sua vez, reafirma as categorias do blog, informações básicas de contato, breve disclaimer e também as postagens mais recentes, de qualquer página que o usuário se encontre.

Optei pela classificação em estrelas por ser uma clássica affordance, facilmente reconhecível. Para facilitar a compreensão da nota atribuída ao filme, destrinchei a classificação em diferentes parâmetros.

Por motivos de UX, a classificação encabeça as críticas: de acordo com as pesquisas iniciais, o usuário que consome críticas irá, quase sempre, procurar a nota final antes de decidir se irá ou não ler a crítica na íntegra.

O corpo do conteúdo foi projetado para ser dinâmico, atraente e facilmente digerível. A hierarquia tipográfica foi trabalhada em conjunto à estrutura SEO, utilizando as principais tags HTML. O menu lateral de compartilhamento fica visível após certo ponto de rolagem da página, acompanhando o usuário em sua leitura enquanto impede que o menu se sobreponha a itens como banner e rodapé.

Logo após o conteúdo, o convite ao compartilhamento é novamente realizado, e o usuário consegue atribuir sua própria classificação ao filme (em sistema próprio para notas de usuários). O layout é fácil e intuitivo: o usuário rapidamente encontra informações sobre o autor e sobre o post, além da área de comentários e um banner full-width direcionando-o para a postagem em sequência.

O ícone da lupa, sempre presente no menu superior, oferece a possibilidade de pesquisar por termos específicos. A janela semitransparente abre em full-screen através de transição fluída e suave, mantendo a consistência da identidade enquanto agrega foco e objetividade a ação do usuário.

Na imagem à direita, uma lista contendo os melhores filmes, de acordo com as classificações (pelos críticos e também pelos usuários). Acessível através do menu superior, conta com links internos diretamente para suas respectivas críticas

Apesar de desenvolvido em CMS Wordpress, o layout final exigiu personalização avançada, através das quase 300 linhas de CSS, além de pequenas alterações ao PHP original do tema. Tais alterações conferem originalidade, autenticidade e singularidade ao layout do blog, além de otimizações estruturais quanto à responsividade do site (também via CSS).

Dos antigos usuários do site, 64% reportaram acessar a internet principalmente através do mobile. Por isso, atenção especial foi dada para a versão responsiva do blog. Diversos parâmetros foram modificados através de CSS para melhor a experiência do usuário em dispositivos mobile.

Nota-se que a página principal do blog assume exibição vertical, com apenas 1 post por linha, privilegiando a visibilidade e legibilidade. Além disso, todos botões foram dimensionados de acordo, permitindo o clique sem aborrecimentos. Banners permanecem em full-screen, embora as informações de autor tenham sido retiradas, evitando poluição visual em telas menores. 

Em nenhum momento a utilização do antigo (e abominável) "zoom pinça" é necessário, pois todo conteúdo se ajusta em função do tamanho da tela do dispositivo. E por último, o menu superior não é fixo, afim de evitar ocupar precioso espaço na tela do usuário. Além disso, é permanentemente branco, otimizado para um melhor desempenho em dispositivos de menor poder de processamento, como smartphones.

Os ajustes e otimizações se traduzem em uma experiência de navegação satisfatória para o usuário, como corroborado pelas métricas apontadas a seguir.

Quem não é visto, não é lembrado. Um site, além de oferecer uma experiência memorável e prazerosa, deve estar preparado para ser descoberto. E essa descoberta vai muito além do rodapé dos cartões de visita.

Por isso conduzi uma seção de otimização estrutural no site, certificando-me de que o mesmo estaria apto ao mais alto patamar, em termos de desempenho, ao ser avaliado pela ferramenta de Insights da Google, principal referência global e indicadora de fatores de rankeamento orgânico (SEO).

Além da otimização de imagens, outros aspectos foram levados em conta, como: a correta utilização de cache; o minifying de arquivos JavaScript, HTML e CSS e a correta utilização e gerenciamento destes arquivos; a compressão gzip; a minimização de requests ao servidor; a diminuição do tempo de conexão, first-byte e tempo total de carregamento, entre outros. Com isso, o site conquistou os seguintes e satisfatórios resultados:

Além dos dados mencionados acima, a administração do site reportou maior facilidade e menor gasto de tempo em gerenciar o blog, graças às eficientes integrações do novo painel administrativo, além das ferramentas analíticas embutidas.