Como o site da Tonik Redesign Voucherify?

Crescer rápido é uma maldição e uma bênção para toda startup de rápido crescimento. Quando novos recursos são lançados regularmente e o mercado-alvo muda, um site lançado apenas no ano anterior pode já estar desatualizado.

É um ótimo sinal, mas é igualmente irritante quando seus visitantes não podem ver o que você está fazendo. Se você não atualizar seu site, eles o julgarão com base no argumento desatualizado.

No início de 2021, a Voucherify estava lidando com problemas semelhantes. O site não explicava bem o produto, as animações eram muito abstratas e não relacionadas ao produto e o estilo e a marca não atraíam o tipo de cliente empresarial e experiente em tecnologia que eles estavam tentando alcançar. As cores pastel, as ilustrações abstratas e o personagem caricatural de um mineiro não foram suficientes para fazer as pessoas de terno rirem.

Em segundo lugar, o site parecia hackeado em vez de cuidadosamente construído. Pequenas inconsistências, interações questionáveis ​​e falta de fluxo geral não pareceram grande coisa quando examinados separadamente – mas juntos, eles causaram uma primeira impressão ruim.

O desafio

A Voucherify entrou em contato conosco para ajudá-los a redesenhar seu site – para que ele fale com o grupo-alvo – e criar um sistema de design, para permitir que a equipe lance mais páginas de destino. Mas espere, quem somos nós ?

Somos a tonik, um estúdio de design digital. Na maioria das vezes, trabalhamos com startups em estágio inicial para ajudá-las a lançar seus MVPs, mas isso não significa que não colaboramos com empresas mais estabelecidas. Clientes como Segment, Auth0 ou Chronosphere confirmam nossa capacidade de integrar uma equipe existente.

Para este projeto, unimos as forças de dois designers – Mikolaj Biernat & Mikolaj Szymkowiak – e Aga Kaczmarek, que gerenciou o trabalho como Gerente de Projeto. Com uma afeição saudável pelo ágil de ambas as equipes, não estabelecemos prazos rígidos, mas queríamos encerrar o projeto em alguns meses. Então, por onde começamos?

O processo de projeto

Antes de colocar a mão na massa, descrevemos o processo de design para definir quais métodos de design usaremos para atingir o objetivo. Também nos ajudou a estimar o cronograma do projeto, o número de iterações e a quantidade de feedback que precisaremos do cliente em cada etapa. Aqui está o que nós criamos.

Criando a arquitetura da informação

Começamos com a criação de uma arquitetura de informação (IA). É um diagrama que mostra o relacionamento entre todas as subpáginas (e às vezes seus conteúdos também), o que facilita a visualização da navegação. Quando trabalhamos no redesenho de um site, usamos IA para entender seu conteúdo e visualizar o escopo de um projeto.

Definir o humor certo

Os clientes geralmente têm uma visão de como desejam que seu novo site seja. O momento perfeito para colocá-lo para fora é quando criamos o moodboard do projeto. É uma coleção de referências visuais que usamos para alinhar a aparência que estamos procurando. A melhor coisa é que não perdemos tempo procurando os adjetivos certos – capturas de tela de benchmarks funcionam milhares de vezes melhor.

O projeto

Além do redesenho puramente visual, a equipe do Voucherify queria atualizar o conteúdo das páginas principais. O que você diz em seu site é muito mais importante do que a forma como é apresentado. É por isso que trabalhamos primeiro com wireframes para encontrar o layout certo para o conteúdo. Você pode considerá-los o modelo do site. Eles não usam cores, gráficos ou outros efeitos visuais, por isso é mais fácil se concentrar no básico.

Um show paralelo rápido – atualizando o logotipo

Quando começamos a iterar nos wireframes com as cores e fontes certas, vimos uma oportunidade de ganhar rapidamente o Voucherify como marca. Seu logotipo – sua tipografia, para ser mais preciso – parecia desequilibrado. Ajustamos um pouco para melhorar a legibilidade sem reinventar toda a marca.

A imagem completa – os designs finais

Finalmente, graças a todas as avaliações que fizemos anteriormente, tudo se encaixou. O site do Voucherify foi redesenhado com a nova linguagem visual. Vale a pena mencionar que, em vez de trabalhar nos designs finais atrás de uma porta fechada, colaboramos de perto com o desenvolvedor do Webflow do Voucherify, Piotr, que entregava cada subpágina de forma iterativa, à medida que finalizamos seu design. Dessa forma, poderíamos reagir a qualquer problema que surgisse ao longo do caminho e lançar o projeto mais rapidamente, em comparação com o trabalho em um silo.

Construindo os LEGOs – preparando um sistema de design

Paralelamente ao redesenho, estávamos trabalhando no sistema de design que alimenta o site. A entrega continha um conjunto de blocos de construção e diretrizes sobre como usá-los para que qualquer pessoa da equipe de marketing do Voucherify pudesse projetar (criar a partir de componentes prontos) uma página de destino. Em uma realidade de start-up, as coisas se movem rapidamente e você precisa de ferramentas para executar seus planos com rapidez e eficiência – o sistema de design teve que acompanhar isso.

Cada elemento de design – desde tokens humildes contendo informações sobre cores, fontes e sombras, até seções inteiras – é cuidadosamente projetado para ser escalável a uma variedade de conteúdo. Graças ao poder do Figma – nossa ferramenta de design favorita (pelo menos no momento da redação), todos os elementos estão disponíveis com um simples arrastar e soltar.

As entregas do projeto

Com o que acabamos?

Site com tecnologia Webflow

Claro que não desenvolvemos o site nós mesmos – foi feito por Piotr Gacek, desenvolvedor front-end do Voucherify (ótimo trabalho!) – mas não seria justo listar um arquivo de design como fruto de nossa colaboração. Afinal, um site é uma peça interativa na Internet – não uma imagem estática. Graças ao Webflow, a equipe do Voucherify pôde construí-lo rapidamente.

Sistema de design

O sistema de design que criamos não é apenas uma biblioteca de design que usamos para acelerar o processo de ideação. Para garantir a consistência entre as equipes, a Piotr replicou os componentes no Webflow. Dessa forma, o Voucherify pode facilitar a criação de mais páginas de destino no futuro. ‍

Ativos de marketing

Colocamos ênfase extra nos visuais, como ilustrações ou ícones, para que possam funcionar em diferentes contextos. Dessa forma, a nova linguagem visual não vive exclusivamente no site. Outros ativos de marketing, como e-books, extraem os principais elementos da mesma biblioteca de design.

"Eu era o gerente de projeto do lado Voucherify para este redesenho. Gostei muito de trabalhar com a tonik como nossa agência de design. Eles trabalharam de maneira ágil e iterativa, onde pudemos participar em todas as etapas do design, aumentando a eficiência de nossa colaboração. Eles sempre estiveram abertos a críticas e prepararam novas versões do design quantas vezes nós pedimos. Eles geralmente eram acessíveis e respondiam rápido. Reuniões semanais e resumos diários enviados pelo Slack, bem como um gráfico de rastreamento me deram uma visão muito clara do andamento do trabalho e dos cronogramas previstos do projeto. Eu realmente aprecio a transparência, clareza e abertura de sua equipe. Estamos muito felizes com o design final do site. O sistema de design já ajudou nós montamos algumas novas páginas de destino e criamos quase uma centena de modelos promocionais. É realmente fácil de usar, mesmo para não desenvolvedores." – Katarzyna Banasik, gerente de marketing de produtos da Voucherify.

Qual é o próximo?

Um lançamento de sucesso depois, iniciamos uma parceria com a Voucherify para ajudar eles e seus clientes com tudo de design digital, com foco em produtos e branding. Leia o comunicado completo para saber mais.