Mobile first é uma ova! Design de marca e produto first
Antes de adotar cegamente o “mobile first” e sair prototipando páginas web, faça uma análise profunda das necessidades do seu negócio, do público e do posicionamento da sua marca.
Índice
- O que é “design de marca e produto first” no meu ponto de vista?
- O mito do “mobile first”
- Como criar diretrizes fortes para aplicação da marca na web?
- Case: Essencial Aparelhos Auditivos
- O que fizemos antes de prototipar as telas do novo site?
No mundo do design e desenvolvimento web, é comum ouvir a frase clichê: “Mobile first”. Desde que a adoção de dispositivos móveis explodiu, essa abordagem tem sido promovida como a solução definitiva para criar experiências digitais relevantes. Mas, na realidade, está na hora de repensar essa ideia.
Antes de mergulhar no conceito de “mobile first”, é essencial entender o produto, criar diretrizes claras para a aplicação da marca e desenvolver soluções que realmente ressoem com as necessidades específicas de cada negócio.
Por isso: Mobile First é uma OVA!
Existem diversas empresas que querem ir para o ambiente digital, mas ainda não possuem referência visual de aplicação da marca nem para o mundo físico, imagina para a web, ou seja, precisam criar, e isso vem muito antes de um ptotótipo de página do site.
Estudo marketing desde 2004 e já participei de centenas de projetos que nasceram no físico e foram para o digital, ou mesmo projetos que nasceram no digital de “qualquer forma”, e depois se lascaram para se remodelar: tiveram que repensar branding para “atualizar” suas interfaces.
Mobile first é uma ova! Antes de pensar em fazer um site, ou mesmo refatorar o antigo, as empresas precisam repensar suas estratégias de branding e produto, já que em muitos casos, não possuem diretrizes claras sobre o que fazem e onde querem chegar…. se o site vai ser de uma forma ou de outra, é o menor dos problemas.
Césinha, Brain behind Pink and Brain
O que é “design de marca e produto first” no meu ponto de vista?
Antes de sair criando um site novo, ou mesmo refatorando o atual, precisamos estabelecer uma base sólida que passa pela estratégia de branding, posicionamento de produto, ter um ótimo guia visual de aplicação da marca, tom e maneira de interagir com os usuários e planejamento estratégico para os próximos ciclos (anos, etc…): onde quero chegar!
Trata-se de priorizar a compreensão profunda do produto, da marca e das regras de negócio antes de pensar em estar em qualquer dispositivo ou plataforma. Não adianta também construir uma experiência ótima para dispositivos móveis se ela não respeita os valores da marca, não resolve os desafios centrais do negócio com consistência, de forma a ser lembrado como “WOW que produto top”.
Se a empresa não possui um plano de negócios, brand book, design system, enfim, nenhum material que norteie a criação dos protótipos web, como as pessoas entendem que podem criar algo substancial seja no mobile ou no desktop?
Essa abordagem começa com perguntas fundamentais:
- Como está meu plano de negócios? meus desejos enquanto empresa?
- Possuo um brand book? ele é completo? Contempla aplicações web?
- Quem é o público alvo ou persona que quero atingir ao criar um site?
- Quais são as metas de negócio a serem alcançadas?
- Como a identidade visual da marca será traduzida para o digital?
- Quais são as particularidades do segmento em que a empresa atua?
- Como se comporta meu concorrente que já está na web?
- O que quero evidenciar e o que quero dar menos destaque?
- Para onde posso crescer? (para já contemplar esse crescimento e não precisar refazer templates no futuro novamente)
- Etc..
Responder a essas questões certamente ajudará a criar uma estratégia robusta de aplicação da marca, passando pelos protótipos das páginas, com aplicações visuais concisas, tom de comunicação e elementos chave para páginas consistentes.
O mito do “mobile first”
Não é que o conceito de “mobile first” seja irrelevante. De fato, vivemos em um mundo onde a maior parte do tráfego na internet vem de dispositivos móveis. No entanto, essa abordagem não é universalmente aplicável.
Muitas empresas ainda não estão na intenet, não possuem clareza de aplicação da marca seja no mundo físico ou digital, ou, se já estão na internet, podem depender significativamente do tráfego desktop, especialmente em setores como B2B, educação e tecnologia, jurídicos, governamental, onde os profissionais preferem acessar informações detalhadas em telas maiores.
Ao focar exclusivamente no “mobile first”, você corre o risco de criar soluções que:
- Ignoram as necessidades do usuário desktop: uma experiência ruim no desktop pode afastar clientes valiosos.
- Sacrificam a identidade visual da marca: um design excessivamente simplificado para caber no móvel pode comprometer a comunicação da marca.
- Desconsideram o contexto do uso: nem todo produto ou serviço é consumido da mesma forma em dispositivos diferentes.
Como criar diretrizes fortes para aplicação da marca na web?
Para que o design de marca e produto seja realmente eficaz, é preciso pensar além do layout. Aqui estão alguns passos cruciais para desenvolver diretrizes consistentes:
- Definir a essência da marca: quais são os valores centrais? Quais cores, fontes e elementos visuais representam melhor a identidade da empresa?
- Estabelecer a hierarquia da informação: pense em como os usuários interagem com o conteúdo no desktop e no mobile. Ajuste conforme necessário, sem sacrificar o design.
- Criar protótipos responsivos: prototipagem é mais do que ajustar tamanhos de tela. É sobre garantir que cada versão ofereça uma experiência consistente e impactante.
- Integrar as regras de negócio: se o produto tem particularidades, como integrações ou funções específicas, elas devem ser priorizadas no design.
- Testar com usuários reais: avalie como diferentes perfis de público interagem com a aplicação da marca e os elementos do produto em dispositivos variados.
Se você não tem um guide de marca e nem sabe onde quer chegar, você precisa voltar alguns passos e organizar as ideias. Meu conselho de amigo: não gaste dinheiro e tempo fazendo um site ou refatorando o atual sem ter diretrizes claras de marca e produto. Você pode até cirar algo legal para ser lançado, mas em muito breve irá precisar alterar, atualizar e muitas vezes, fazer novamente. Cansei de ver casos assim.
Gaste seu tempo e dinheiro com branding e produto. Você vai economizar muito dinheiro para o futuro, que poderão pagar o desenvolvimento de 20 sites ou mais.
Césinha
Case: Essencial Aparelhos Auditivos
A Essencial Aparelhos Auditivos chegou até nós em outubro de 2023 com um site feito em Wix, gastando em média 10 mil reais por mês em campanhas de Google Ads, que levavam o tráfego diretamente para uma landing page “horrível”. O primeiro contato das pessoas eram com essa prateleira toda desorganizada, feia, mal montada e sem storytelling nenhum.
O que fizemos antes de prototipar as telas do novo site?
- Convecemos os gestores a recriar a marca para aplicação na web, pois a agência que tinha feito no passado não havia contemplado o futuro da empresa;
- Vetorizamos o logo, criamos ícones e elementos de grafismo diversos do absoluto zero com a cara da empresa;
- Criamos referências visuais próprias de aplicação dos aparelhos auditivos, inclusive com modelagem 3D;
- Criamos um projeto de hierarquia da informação, onde pudessemos ter clareza na prototipação e da navegação do site no futuro;
- Criamos referências sólidas dos profissionais que trabalham na empresa, visando tornar a marca mais próxima das pessoas, ao invés de só vender aparelhos auditivos
- Estudamos dezenas de concorrentes pelo Brasil e pelo mundo (e digo que vimos 90% dos players com os problemas citados acima: sem força de marca, sites horrosos, comunicação falha, etc…)
- SEO foi o epicentro da contrução dos componentes do site, além de trazer uma frente editorial forte onde a aquisição orgânica estivesse baseada no apoio aos deficientes auditivos, e não somente em pautas de bico de funil (venda).
Só depois de tudo isso estar bem esclarecido é que iniciamos a prototipagem das telas. E sim, começamos pelo mobile, mas sempre com o desktop em mente. Afinal, o desktop oferece maior clareza para exibir, destacar e comparar modelos. Além disso, 90% dos usuários alternam entre dispositivos antes de realizar uma compra, especialmente quando se trata de produtos com valores acima de 10 mil reais, pois essa decisão exige maior análise e consideração.
O site foi lançado em dezembro de 2023 e desde então vem batendo recordes atrás de recordes, e se tornou a referência nacional em assuntos relacionados a saúde auditiva. O movimento criado em 2023 trouxe frutos carnudos para a empresa.
A estratégia de colocar o SEO no centro das ações transformou a Essencial em uma referência no Google, fortalecendo sua marca e autoridade. Basta visitar os sites dos concorrentes para entender do que estou falando: nenhum deles investiu no trabalho prévio de design de marca e produto. Como resultado, possuem sites desenvolvidos por agências que não capturam e entregam o valor necessário para se destacar.
Se você digitar “Aparelhos auditivos“, “Aparelho Auditivo”, a empresa já é a top 1 no Google, mas se digitar também “RG PCD“, “CNH para surdo“, e milhares de outros temas, eles dominam, e são lembrados p´ro ativamente pelos usuários web.
Uma informação relevante: eles costumavam vende de 3 a 5 aparelhos por semana e atualmente já estão vendendo mais de 50 unidades/mês, e projetam vender mais de 100 unidades já no primeiro semestre de 2025.
Por que o desktop ainda importa?
Embora o mundo esteja cada vez mais “mobile-centric”, ignorar o desktop pode ser um erro caro. Aqui estão alguns motivos:
- Setores específicos dependem do desktop: negócios que vendem soluções complexas ou oferecem muito conteúdo técnico geralmente veem maior engajamento no desktop.
- Maior potencial de conversão: compras de alto valor ou decisões empresariais são frequentemente feitas em desktops, onde os usuários têm mais espaço para analisar informações.
- Melhor utilização de dados: interfaces de desktop permitem exibir relatórios, dashboards e outras visualizações detalhadas que são mais difíceis de consumir no móvel.
Não seja mais um “tolo” que replica o jargão “mobile first”: é hora de repensar prioridades
Antes de adotar cegamente o “mobile first”, faça uma análise profunda das necessidades do seu negócio, do público e da marca. Um “design de marca e produto first” cria a base para experiências digitais verdadeiramente impactantes, que respeitam a identidade da empresa e atendem às expectativas dos usuários, independentemente do dispositivo que utilizam.
No final das contas, o que importa é como sua marca se comunica e como o produto resolve problemas reais. O dispositivo é apenas um canal – e não o ponto de partida.
Se você precisa de mentes diferenciadas no seu projeto, entre em contato conosco e venha tomar um café digital.
Somos ratos quando o assunto é desenvolvimento web e marketing digital.