Forças Motrizes do Design – Um Estudo de Caso de Redesign de Site

Qual é o momento mais apropriado para fazer um redesign do site?

Quem nunca se deparou com um site que parece desatualizado e abandonado? Como a carcaça de um caminhão quebrado deixado no deserto, claramente intocado por muitos anos.

Os sites são renovados por todos os tipos de razões. Lamentavelmente, muitas empresas não percebem que seu site precisa de uma reformulação e ficam para trás quando os rivais ganham uma vantagem competitiva melhorando o seu, aumentando suas conversões como resultado.

Um erro frequente que as empresas cometem é não considerar antecipadamente o que pode acontecer se as necessidades de seu site se tornarem mais complexas e, como consequência, se encontrarem em uma situação difícil e potencialmente cara quando precisarem expandi-lo. Além disso, fatores importantes como otimização de mecanismos de pesquisa (SEO), SSL (que afeta a classificação e a segurança) e a compatibilidade com dispositivos móveis (que afeta a classificação e a conversão) podem acabar sendo negligenciados.

Novos designs de sites geralmente acontecem por causa de uma mudança de liderança no topo, onde uma nova direção de marca é instituída e novas pessoas de marketing de marca entram a bordo. Avaliando o site da empresa, eles ficam horrorizados ao saber que tem uma UX horrível e descobrem que uma quantidade considerável de conteúdo desejável está faltando. Chegando à conclusão de que é simplesmente um “site de brochura” mal montado que não entrega a “voz da marca” ou as conversões que a empresa está procurando, o consenso é que está pronto para a mudança. É hora de uma reformulação do site.

Uma reformulação do site para uma empresa automotiva

É importante mencionar que este estudo de caso de redesenho de site automotivo não é um redesenho oficial e comissionado. Não tenho informações privilegiadas sobre a empresa, sua estratégia digital ou a indústria automotiva como um todo. Estou simplesmente usando a indústria automotiva como um caso de teste para um estudo de caso de redesenho de site.

Neste estudo de caso, percorremos o processo de redesenho do site da marca automotiva croata Rimac Automobili. A Rimac é uma marca que começou com um conceito de carro simples e desde então se expandiu para uma grande empresa de fabricação de componentes. Como muitas startups, a empresa começou com uma ideia que acabou evoluindo para algo diferente; essa expansão afetou a estrutura do site e todo o foco do usuário mudou. A demanda do mercado levou a empresa para outra direção, então o foco do site também precisava mudar.

Existem muitos aspectos e ângulos diferentes a serem considerados para obter uma ótima solução de design de site. Apesar do fato de que o web designer anterior pode não ter tido os recursos, ou tempo suficiente para pesquisa de UX, wireframing, prototipagem e testes de usuário, quando se trata da qualidade geral de um design, mesmo as menores decisões iniciais de design podem ter um impacto significativo. repercussões negativas e uma qualidade de site abaixo da ideal acabará levando a um redesenho do site em dois ou três anos. O resultado disso é que, a longo prazo, os clientes estão pagando mais por um site do que imaginam. Uma estratégia de conteúdo e arquitetura de informação bem definida é crucial quando se trata de um novo design de site.

Ao projetar grandes sites corporativos, portais de notícias e outros sites com conteúdo pesado, sou um grande fã de design atômico, um sistema de design flexível que trata da criação de todos os componentes de interface do usuário que funcionarão para várias telas e situações imprevistas no início de um projeto. Mesmo que este estudo de caso em particular não seja para um grande portal de notícias, ele tornará o processo muito mais fácil se uma biblioteca de design de elementos de design atômico (um conjunto de componentes de design cuidadosamente considerados e bem definidos) for configurada para trabalhar com mais tarde.

Somente depois que o site tiver a estratégia de conteúdo e a arquitetura de informações apropriadas, o foco deve mudar para a experiência do usuário. Sem a estrutura adequada do site, o design da experiência do usuário não tem potência. Talvez à primeira vista o site pareça bom e funcione bem, mas se não houver flexibilidade suficiente, é inevitável que em algum momento a empresa precise considerar um redesenho do site.

Por que redesenhar o site desta empresa automotiva?

A Rimac Automobili está em expansão e, de acordo com as publicações oficiais, um novo carro conceito chamado “Concept_One” já está em produção. Na época dessa reformulação do site não comissionado, o site exibia apenas um carro, o “C_Two”. Não havia variedade visual - o site foi criado a partir de dois modelos, de modo que cada página parecia muito semelhante. O design foi focado em imagens grandes e atraentes do carro sem muito mais para ilustrar a qualidade do carro C_Two – informações essenciais necessárias para orientar os visitantes do site a uma decisão de comprar o carro.

Como diz o ditado: “Você nunca tem uma segunda chance de causar uma primeira impressão”. É fundamental usar o impacto de um ótimo design para persuadir efetivamente os visitantes (que, neste caso, seriam principalmente entusiastas de carros de alto desempenho) a comprar um carro que custa perto de um milhão (USD). Esses sites sofisticados precisam atender a um padrão incrivelmente alto. Eles devem projetar um senso de qualidade e carisma e oferecer um alto nível de habilidade de vendas, bem como um estilo atraente.

Um ótimo design de site deve se destacar em um mar de sites semelhantes

Um grande problema na indústria automotiva é que a maioria dos sites nesse espaço tendem a ter a mesma aparência. Além de diferentes esquemas de cores e imagens de heróis, quase parece que eles estão usando o mesmo modelo de site.

Existem muitos fatores por trás das decisões de design do site de uma empresa automotiva, mas uma distinção clara precisa ser feita entre um carro de US$ 1 milhão e um carro de US$ 25.000 e na forma como eles são apresentados.

No espaço automotivo de ponta, Ferrari, Lamborghini e Aston Martin têm sites excessivamente simples, tipicamente corporativos que (na minha opinião) não oferecem uma ótima experiência ao usuário.

A faixa de consumidor médio (Volkswagen, Toyota, Peugeot e assim por diante) tem uma estrutura de conteúdo de site muito semelhante aos exemplos mais sofisticados mencionados acima. A maior diferença entre as marcas de carros de consumo high-end e mid-range é o preço – então seria de se esperar que a Rimac com seus carros high-end tivesse um site excelente para refletir essa diferença e mostrar sua marca cara.

As expectativas dos clientes são altas ao visitar esses sites de marcas de carros ultracaros; é um grande compromisso financeiro e, naturalmente, eles querem ter certeza de que estão adquirindo o melhor carro que seu dinheiro pode comprar.

Por que um Rimac é melhor que um Toyota? Olhando para seus sites, não há muita diferenciação entre essas duas marcas muito diferentes. Isso não deveria ser evidente pela qualidade de seu site?

Segmentação de compradores de carros sofisticados com ótimo design de site

Qualquer site deve considerar seus usuários. Quem é o público-alvo desse tipo de carro? O que eles estão procurando?

Os carros da Rimac custam cerca de US$ 850.000, e apenas alguns serão fabricados, qualificando-os para um rótulo de “edição limitada”. Embora não possamos identificar com precisão o tipo de cliente que estaria interessado em comprar esses carros, podemos supor que a maioria dos clientes será da elite rica. O site da Rimac está segmentando esses clientes de forma eficaz?

Analisando a Arquitetura da Informação

Em nosso site de exemplo, pudemos ver que o primeiro item de navegação era “Concept_One” (na época, era o único produto da empresa). O site real já foi atualizado. O segundo item de navegação é a evolução da empresa, como o carro foi produzido, enquanto o terceiro item são os produtos e serviços da empresa. O quarto item de navegação é outro produto da empresa (bicicletas elétricas Greyp). Os dois últimos itens são “imprensa”, contendo press releases, e o “blog”, nenhum dos quais é particularmente útil, pois a maioria de suas notícias foi publicada nas redes sociais.

Outra questão era que o vínculo com a carreira estava escondido como um item de navegação secundário, menos importante e, dada a grande expansão da empresa, representava uma questão importante. Se considerarmos o usuário como o foco das preocupações corporativas, veremos que na maioria dos sites de empresas (exceções típicas são sites corporativos/extremamente grandes) é muito importante ter um link de “carreiras” ou CTA proeminente.

O processo de redesenho do site

Homepage Hero Image Antes e Depois

Originalmente, a intenção era criar uma versão mais escura e poderosa do carro. Encontrei algumas imagens do carro Concept_One online e com alguma “magia do Photoshop”, criei a primeira imagem de herói para a página inicial. A próxima ideia era uma animação para revelar lentamente o carro, primeiro o plano de fundo, depois um contorno do carro, seguido por uma imagem totalmente renderizada.

O design da página inicial

Para a página inicial, o conceito foi definir duas áreas visuais principais: a navegação superior e a imagem do carro herói. É isso. A fim de torná-lo minimalista, mas impressionante, qualquer coisa desnecessária foi removida. Num relance rápido, todas as coisas importantes ficam visíveis — todo o resto foi movido para subpáginas dentro do site.

Estratégia e design de conteúdo

Para esses projetos de reformulação de sites, é importante também projetar o conteúdo, não apenas a estrutura do site e a estética visual. Como este é um redesenho de site não comissionado, ele oferece mais liberdade para experimentar, bem como uma flexibilidade estética onde há toda a oportunidade de tomar nossas próprias decisões de design.

O processo é simples:

1. Prepare o corpo do texto que aparecerá no site.
2. Comunique alguns elementos de design – por exemplo, detalhes atraentes sobre aceleração, potência e velocidade máxima – por meio de ícones ou animações interativas.

Ao fazer isso, palavras auxiliares não são necessárias na interface do usuário e a atenção é direcionada para áreas que são mais importantes para os visitantes do site.

Redesenho da navegação do site

A estrutura de navegação do site agora é reorganizada com base em uma hierarquia de importância. Temos Veículos como o primeiro menu suspenso na navegação, o que dá flexibilidade ao design, pois permite que a empresa adicione mais modelos de carros no futuro.

Para fornecer acesso imediato à página secundária de Produtos a partir da página inicial, foi decidido que, por questões de eficiência, em vez de criar outra página de listas de produtos (em outra página da Web), os Produtos e suas subcategorias poderiam ser incorporados à página inicial como uma área suspensa e fazer parte de a navegação. O design abaixo mostra vários produtos renderizados como ícones na página inicial quando os visitantes clicam em Produtos na navegação. Para as renderizações de produtos 3D que significam os segundos níveis em Produtos , eu recomendaria Three.js, WebGL, Canvas e Greensock, pois são ferramentas padronizadas bem conhecidas.

Páginas secundárias no redesenho do site

Em contraste com a página inicial , as páginas secundárias, como as páginas Sobre e Serviço , usam uma grade diferente, mais com padrão Z. A intenção do layout de grade diferente é fornecer aos visitantes um ambiente mais interessante e dinâmico ao digitalizar essas páginas.

A ideia central ainda é o minimalismo visual com o mínimo de texto possível. As pessoas não acessam esses tipos de sites automotivos para ler muito texto, mas para obter informações de forma rápida e visual. Esse foi o pensamento por trás de fontes grandes e em negrito nos títulos das páginas e o emprego de diferentes estilos de fonte.

É importante observar que esse tipo de redesenho do site “folheto da empresa” é diferente de um redesenho de serviço. Um site de “folheto da empresa” é mais sobre produtos de marketing. Os redesenhos de sites orientados a serviços são mais voltados para a conversão de cliques em conversões e lucro eventual.

Conclusão

Existem vários outros artigos de blog de design recomendando por que é uma boa ideia que os designers se envolvam em projetos de design não comissionados ao lado. Se você quiser criar um projeto muito legal, escolha uma ideia – pode ser um site, um aplicativo, um produto SaaS corporativo – e resolva um problema de design para ele.

Dribbble está cheio de projetos de redesenho conceitual não solicitados, onde designers digitais têm a oportunidade de mostrar suas habilidades de design. Além de dar a você um design legal que apresenta uma solução criativa para o mundo, trabalhar em um problema de produto “real” mostrará às empresas e clientes em potencial como você pensa, seu processo e sua experiência.

No meu caso, foi um ótimo exercício abordar um site automotivo de alta qualidade porque é particularmente importante que o design de sites desse setor atenda a um padrão excepcionalmente alto.

No entanto, uma palavra de cautela: antes de mergulhar e começar a projetar, é uma boa ideia olhar para o futuro e considerar como qualquer site específico precisará ser daqui a três anos, não apenas do ponto de vista da estética do design, mas do conteúdo, função e estrutura. É crucial que a flexibilidade integrada seja uma consideração séria do projeto. É mais fácil, mais eficiente e muito menos doloroso fazer pequenos ajustes para atender às demandas futuras quando o site ou as subpáginas estiverem funcionando e escaláveis.

Às vezes, é muito difícil convencer um cliente em potencial a fazer uma reformulação do site. Muitas vezes, os clientes relutam em se comprometer devido à falta de recursos, fundos ou tempo. No entanto, um redesenho de site não solicitado é uma ótima maneira de mostrar o processo de redesenho do seu site para o mundo. E quem sabe? É bem possível que o redesenho do seu site possa impressionar um cliente relutante o suficiente para que ele dê luz verde para um projeto “real”, onde, como um bônus adicional, o designer é pago!

• • •

Leia mais no Blog Toptal Design:

• Os Fundamentos do Redesign de Site - Um Estudo de Caso
• O verdadeiro ROI do UX: estudos de caso de redesenho B2B
• Tirando a IKEA da caixa e redesenhando-a para 1,6 bilhão de usuários
• Vamos redesenhar o Facebook: 10 inspirações para você começar
• Como o CrunchBase deve ser projetado