Landing page Nike + Social Commerce

Tempo

5 dias corridos até a entrega do site desenvolvido

Papel

Product Designer

Público alvo

Influenciadores que produzem conteúdo sobre esporte e produtos esportivos 

O problema

Criadores Nike usam o Social Commerce para parametrizar links de produtos, criar cupons, e receber comissões para cada venda realizada. Naquele momento a Nike ia atrás dos criadores para entrarem no programa, mas até então não existia um caminho por onde eles pudessem manifestar interesse em fazer parte. A função da landing page é ser esse espaço onde o criador pode conhecer melhor o programa e pedir para fazer parte. Para isso precisávamos destacar:

 

Conteúdo

A estratégia para conteúdo, no caso desse projeto, foi começar por ele, seguindo a abordagem Content First. Eu costumo aplicar ela sempre que possível, pois escrever o conteúdo e ter um entendimento completo dele antes de começar a desenhar os wireframes me ajuda a tomar decisões de Design melhores e também traz agilidade para a construção das telas.

A primeira coisa foi aguardar até que a Nike nos enviasse um rascunho do que seria o conteúdo escrito da Landing Page. Quando a recebi, os tópicos estavam um pouco grandes e formais demais, não combinavam com o tom de voz da marca e nem caberiam na interface. 

Então refinei ela com o time de Content Design, pensando em construir textos que informassem ao usuário do que se trata o programa, e que também fossem instrucionais com relação ao processo de cadastro, mas que carregassem a expressão autêntica da Nike.

Juntos chegamos em um modelo que fazia mais sentido para a Landing Page e validamos ele com o time interno da Nike.

Wireframing

Era a minha primeira Landing Page, então essa parte de coleta de referências foi muito importante para me dar segurança em começar. Olhei para muitas Landing Pages no Dribble e também exemplos mais gerais nos vários sites que a Nike tem, para me apropriar melhor da linguagem visual da marca. Organizei todos esses exemplos no Figma, em uma página só de referências dentro do arquivo, e comecei a desenhar alguns rascunhos do que seriam os wireframes.

Referências visuais do projeto

Design <> Programming

Como tínhamos apenas 4 dias para entregar, do total de 5 dias do projeto, foi muito importante que eu e o desenvolvedor que estava tocando o projeto estivéssemos em muita sintonia, e foi assim que aconteceu. Algumas das coisas que fizemos que nos fizeram a ganhar agilidade foram:

Product Designer

Houve muita colaboração entre nós dois e eu considero que esse foi o meu principal aprendizado no projeto, que fez com que o meu diálogo com desenvolvedores se tornasse melhor em todos os trabalhos que realizei a partir daí. Contamos com o Design System da Nike, mas os componentes dele eram mais direcionados para o e-commerce, então precisei explorar outras Landing Pages da Nike para entender como eles estavam trabalhando espaçamento e tamanhos de fonte, por exemplo. Eu já sabia mais ou menos como funcionava a ferramenta “inspecionar” do navegador funcionava, mas o desenvolvedor me ensinou como usar ela para o propósito que eu precisava, e isso me trouxe muita autonomia. Além disso, o conhecimento que eu já tinha em HTML e CSS nos ajudou bastante aqui.

Interaja com os protótipos desktop e mobile da Landing page Social Commerce + Nike