Como a Lynksen deu vida ao site de uma plataforma B2B complexa com o Spline

A Elecctro cria sistemas de software para serviços sem atendimento — como máquinas de venda automática, carregadores de veículos elétricos e automação de lavagem de automóveis. A sua oferta vai do hardware ao software e situa-se num canto do mercado que, historicamente, comunica com os compradores B2B através de fichas técnicas densas e diagramas técnicos. A sua missão é modernizar os serviços sem atendimento através de soluções inteligentes e conectadas.

A Elecctro precisava de um site. Mas não de um site qualquer. De um que prendesse a atenção do comprador tempo suficiente para explicar realmente o que fazem, que os diferenciasse visualmente de dezenas de empresas semelhantes e que levasse os visitantes rapidamente a uma decisão.

"Precisavam de transmitir muita informação", diz Tania, gestora de projeto na Lynksen, a agência de design digital chamada para reconstruir a experiência do site. "Mas também queriam destacar-se num nicho muito técnico."

A resposta não era mais conteúdo. Era um tipo de interface interativa completamente diferente.

Uma página inicial para explorar, não só para ler

A ideia central da Lynksen era enganadoramente simples: deixar os utilizadores explorar o sistema, em vez de o explicar só com palavras.

A página inicial tornou-se uma cena 3D interativa. Uma visão espacial de toda a família de produtos da Elecctro, em que os utilizadores podiam passar o cursor, clicar e navegar ao seu ritmo. Cada elemento da cena está ligado a uma página de produto dedicada. O caminho de "o que é este produto?" até "estou pronto para falar" ficou reduzido a poucos cliques.

Os utilizadores podem ir à página inicial, ver tudo, clicar uma vez e já estão a avançar para dar à Elecctro a informação de que ela precisa.

Foi uma mudança significativa. A maioria dos sites B2B trata a página inicial como um índice. A Lynksen construiu a da Elecctro como um ambiente, algo que se percorre em vez de se ler de cima a baixo.

Porquê o Spline?

A visão era clara, mas como dar-lhe vida?

As ferramentas 3D tradicionais estavam fora de questão. Só a curva de aprendizagem teria consumido o projeto. Mais importante ainda, a equipa da Elecctro precisava de conseguir manter o site após o lançamento. Isso significava nada de pipelines opacos, nada de dependência de artistas especializados, nada de ferramentas que exigissem meses de formação só para alterar um recurso.

A Lynksen avaliou o Spline e viu outro caminho:

• Criar e iterar num único ambiente.
• Prototipar interações diretamente na ferramenta.
• Entregar recursos prontos para produção sem uma cadeia de passagens complexa.

Passámos de quase nenhuma experiência a entregar um projeto completo à primeira.

O que tornou isso possível não foram só as ferramentas. Foi a comunidade. Antes de escrever uma única linha de código, a equipa da Lynksen passou tempo na biblioteca da comunidade do Spline: a explorar remixes, a perceber como outros designers abordavam as interações e a identificar técnicas que podiam adaptar para este projeto.

Ter um sítio como a comunidade do Spline, com projetos diferentes e a possibilidade de fazer remix para ver como as pessoas abordaram diferentes interações, foi mesmo útil para nós do ponto de vista da aprendizagem.

Para a Elecctro, havia outro fator: a longevidade.

Queriam uma solução que a sua equipa pudesse realmente assumir após o lançamento.

Não precisas de ser muito técnico para acrescentar um objeto, criar uma interação diferente e manter o projeto depois de o entregarmos. Foi uma vantagem mesmo essencial para nós.

Construir a experiência

O processo da Lynksen começou sem qualquer movimento.

Wireframes estáticos. Layouts de interface planos. Uma hierarquia de informação clara, definida antes de se introduzir uma única animação. Só quando a estrutura estava sólida é que a equipa começou a acrescentar camadas.

"Começamos sempre pelo estático e depois acrescentamos animação camada a camada", diz Tania. "Definimos os estados principais em wireframes e esboços e, durante a implementação, afinamos os movimentos de câmara, brincamos com as animações e garantimos que tudo se encaixa como esperado."

Esta disciplina impediu que o projeto ruísse sob o peso da sua própria ambição. A equipa manteve um princípio de design simples: o movimento serve a narrativa.

Na prática, isto significou:

• Estados subtis ao passar o cursor e microinterações nos elementos 3D
• Revelações ao fazer scroll que guiavam a atenção sem a exigir
• Transições de câmara que orientavam os utilizadores em vez de os deslumbrar
• Criatividade expressiva reservada para momentos secundários (o rodapé, a página 404), onde pequenas surpresas são um prazer e não uma distração

A página 404 tornou-se uma das preferidas da equipa. Construída inteiramente no Spline, permite aos utilizadores clicar para revelar elementos 3D escondidos. Um pequeno easter egg que a maioria dos visitantes nunca vai encontrar, mas que a equipa da Lynksen claramente adorou criar.

"É giro esconder um pequeno easter egg", diz Ross. "Se alguém o encontrar, como designers vamos ficar super contentes."

Detalhe dos ícones 3D usados em todo o menu de navegação do site.

Os resultados

O site redesenhado foi lançado e os números mexeram de imediato.

Os utilizadores ativos cresceram 524% e o projeto recebeu 5 prémios.

O site somou 20 000 novas visualizações e a comunidade de design reparou.

Estes resultados refletiam algo que a equipa tinha construído deliberadamente: não apenas um site bonito, mas um site verdadeiramente eficaz. Que funcionava para compradores que precisavam de clareza e para uma equipa do cliente que precisava de o manter sem um programador a tempo inteiro.

Para equipas que estão a pensar em 3D

Para equipas que pensam usar 3D na web pela primeira vez, o conselho de Tania é simples: não comecem pelas ferramentas tradicionais.

Com o Spline, a curva de aprendizagem é gerível. Em poucos dias, alguém com competências de design consegue lá entrar. A nossa equipa produziu um MVP sólido na primeira semana de utilização.

Ross vê nisto uma mudança mais ampla na forma como as equipas podem abordar o 3D: em vez de juntarem várias ferramentas e fluxos de trabalho complexos, as equipas podem desenhar, iterar e lançar num único ambiente — o que torna o 3D interativo muito mais acessível desde o início.

Se queres trabalhar num único ambiente, sem conhecimentos muito técnicos, e conseguir lançar o que vês, escolhe o Spline.

Para as agências de design que propõem experiências web interativas aos clientes, o projeto é uma prova convincente: com a ferramenta certa, é possível passar de nenhuma experiência a um site premiado num único projeto.

Começa a usar o Spline

Tal como a Lynksen, as agências podem tirar partido do Spline para ajudar os clientes a comunicar produtos complexos através de experiências interativas mais fáceis de compreender, mais fáceis de manter e mais memoráveis.

Para a Elecctro, isso significou transformar uma plataforma B2B técnica num site interativo que clarificou o produto, acelerou a tomada de decisões e ajudou a marca a destacar-se num mercado saturado.

Quer sejas uma agência a trabalhar para um cliente ou uma equipa interna, o Spline ajuda-te a passar da ideia à produção mais depressa — sem um pipeline 3D complexo nem competências técnicas especializadas.

Falar com a equipa comercial