Abandone os MVPs, adote protótipos mínimos viáveis ​​(MVPr)

A busca da perfeição é uma armadilha sutil que muitas vezes leva os designers a um ciclo interminável de iteração e revisão. Isso é especialmente verdade no mundo dos produtos digitais, onde cada interação e elemento gráfico pode se tornar um objeto de obsessão do design.

Mas, quando recuamos e observamos a natureza interdisciplinar do design de produtos digitais, é fácil ver como os designers caem na armadilha da perfeição.

Pense em todas as pessoas e funções envolvidas no design de um único produto digital:

• Pesquisadores de design
• Designers de IU
• Arquitetos da Informação
• Designers de experiência do usuário
• Designers de produtos
• Gerentes de produto
• Estrategistas de conteúdo
• Especialistas em marcas
• Copiadores de UX
• etc.

De uma forma ou de outra, cada um deles se cruza. Por exemplo, a interface do usuário de um produto não pode ser bem-sucedida se a experiência do usuário não for considerada. Com a interconectividade vem a pressão para entender como as decisões de design impactam umas às outras: “Se fizermos X, como isso afetará Y e Z?”

Esse tipo de previsão estratégica pode ser valioso, mas também pode fazer com que o processo de design fique estagnado e fique preso no temido loop de perfeição: “Temos que acertar X antes de podermos executar Y e Z”.

Então, qual é a alternativa? Existe uma maneira de criar, lançar, testar e melhorar rapidamente produtos digitais com base em métricas e insights do mundo real obtidos de pessoas reais?

Neste guia, abordaremos essas questões através da lente de protótipos mínimos viáveis ​​e equiparemos os designers com um processo incrivelmente simples para construir, testar e refinar produtos digitais.

Simule o lançamento com um protótipo mínimo viável

Ninguém sabe de nada... Nenhuma pessoa em todo o campo do cinema sabe com certeza o que vai funcionar. Cada vez é um palpite e, se você tiver sorte, um palpite. – William Goldman, roteirista vencedor do Oscar

As primeiras decisões do processo de design de produto digital são, na melhor das hipóteses, baseadas em suposições. Até que um produto esteja nas mãos de usuários reais, tudo é teórico. Por outro lado, lançar um produto antes de estar pronto pode prejudicar sua reputação (um erro caro).

E se houvesse uma maneira de simular o lançamento e determinar a viabilidade de um produto bem antes do início de qualquer grande esforço de design?

Este é o valor do protótipo mínimo viável (MVPr), uma abordagem de design de produto que requer substancialmente menos tempo e dinheiro do que o mais conhecido “produto mínimo viável”.

Aqui está uma visão geral do processo de design de protótipo mínimo viável (MVPr):

1. Descoberta
2. Pesquisa
3. Arquitetura de informação
4. Design visual
5. Lançar
6. Teste

Esperar! Não é esse o processo que todos usam?

Sim, e veremos que, contando com o essencial das etapas acima, podemos…

• Simular a funcionalidade de um produto real;
• Imite o lançamento de um produto real; e
• Descubra se vale a pena construir um produto real.

Passo a passo: Como construir um MVPr

1. Descoberta: Comece a tomar decisões

Uma ótima maneira de iniciar o processo de descoberta é pesquisar sites, blogs e aplicativos semelhantes à sua ideia. Aprenda sobre suas histórias, seus mercados-alvo, como eles operam, etc. Se você achar que nenhum dos concorrentes relevantes faz o que seu protótipo faz, continue avançando.

Esta etapa não requer nenhuma experiência. O segredo é fazer — avançar da intenção à ação.

Preste atenção especial aos pontos fortes e fracos de seus concorrentes. Como você pode usar o que eles já conseguiram (ou não conseguiram) para tornar seu protótipo mais forte?

Após 1-2 horas de pesquisa, você deve ser capaz de identificar seus concorrentes mais importantes e aprender os principais aspectos de cada um.

2. Pesquisa: defina seus usuários

Quem é seu usuário-alvo e por que eles deveriam se preocupar com seu produto? Compreender isso é crucial, mas devemos começar com suposições calculadas. É melhor começar com uma visão fortemente opinativa. Não tente adivinhar ou tentar fazer “algo para todos”. Não queremos design diluído.

Em vez disso, dê uma olhada nos sites concorrentes encontrados durante a fase de descoberta e permita que o bom senso pinte um retrato de seus usuários em potencial.

Aqui estão algumas áreas práticas de investigação que são facilmente acessíveis na web:

• Visite sites de avaliação e veja o que as pessoas estão dizendo sobre suas experiências com seus concorrentes.
• Siga influenciadores do setor do seu produto nas mídias sociais e observe como eles engajam seu público.
• Pesquise artigos de notícias respeitáveis ​​que forneçam uma visão detalhada de como seus concorrentes operam.
• Confira as interações de seus concorrentes com seus usuários nas mídias sociais.
• Veja se você pode encontrar algum fórum onde os problemas ou questões de seus concorrentes estão sendo discutidos.

Insights valiosos podem ser obtidos de cada uma dessas avenidas sem investimento financeiro significativo. Isso é especialmente importante para pequenas equipes de design que trabalham com orçamentos apertados. Grandes marcas gastam dinheiro significativo em pesquisa, mas pequenas equipes e freelancers individuais precisam encontrar maneiras de serem mais engenhosos.

3. Arquitetura da Informação: Estruture seu protótipo

Como o protótipo funcionará e quais são as informações mais importantes para focar?

A maneira mais fácil de começar a responder a isso é analisar sites de primeira linha que sejam semelhantes ao protótipo que você está construindo. A aparência geral e a experiência do site que você escolher para referência devem ser excelentes.

Comece quebrando o site em pedaços. Quais são todas as páginas relevantes e como elas são estruturadas visualmente? Não tenha medo de reverter o wireframe do site e recriá-lo com suas próprias informações, cores, imagens etc.

Por que proceder desta forma? Seu site provavelmente funcionará de maneira semelhante aos sites concorrentes - você só tem objetivos diferentes em mente. Não há necessidade de inventar um sistema complexo se os usuários responderem bem a uma experiência estabelecida.

*Dica profissional: Ao estudar a arquitetura de informações de um site, uma técnica útil é fazer capturas de tela e torná-las em escala de cinza para que você não se distraia com o impacto da cor (que pode ser bastante persuasivo).

Depois disso, aproveite os recursos online que permitem que os designers passem rapidamente do zero ao protótipo interativo. Existem vários kits de interface do usuário, modelos HTML, temas WordPress e assim por diante. Não tenha medo de modificá-los para se adequar ao seu protótipo e não se preocupe com a perfeição de pixel ou código bonito. Nesta fase, ninguém se importa. Eles se importam se o seu produto é útil ou não.

Veja como isso funciona usando um kit de interface do usuário gratuito:

O que conseguimos na imagem acima?

• Removemos todas as cores e imagens.
• A barra de navegação ficou intocada.
• A funcionalidade do sistema de filtragem permaneceu a mesma, mas a redação foi alterada.
• Passamos de duas colunas para uma para mostrar melhor as imagens que planejamos usar.

Em menos de uma hora, temos uma base visual para desenvolver ainda mais nosso protótipo.

4. Design Visual: Reutilize recursos de interface do usuário gratuitos

A aparência visual do seu protótipo não pode ser separada da forma como ele funciona. Não se trata apenas de gráficos. O design visual impactante conta uma história e fornece uma experiência com valor real.

Aqui, a consistência visual é fundamental porque ajuda os usuários a se familiarizarem com um produto e navegarem com mais eficiência. Para alcançar esse tipo de consistência no início do desenvolvimento do seu protótipo, é inteligente redirecionar os recursos de interface do usuário gratuitos.

Trabalhando desta forma, você não terá que gastar horas desenvolvendo um sistema de design coeso. Tipografia, estilos de botão, iconografia e todos os outros componentes importantes da interface do usuário são atendidos.

5. Lançamento: codificar ou não codificar?

É hora de compartilhar seu protótipo com o mundo. Felizmente, é mais fácil do que nunca transformar maquetes em protótipos dinâmicos. Graças a uma série de ferramentas intuitivas, você nem precisa saber codificar, mas deve aprender?

O MVPr sem código

Quando terminar o design visual, incorpore o protótipo em uma página de destino para que os visitantes possam interagir com ele e fornecer feedback geral sobre sua ideia. Neste ponto do processo de design do MVPr, existem várias maneiras de criar um protótipo sem código. Aqui estão suas opções:

Protótipos Básicos

• O InVision tem todos os recursos necessários para construir e testar um protótipo básico e oferece uma experiência indolor e sem complicações.

Protótipos Rich Media

• Para interações, transições e animações sofisticadas, o Principle é bastante útil.

Protótipos 100% realistas

• O Framer permite que os designers simulem qualquer experiência de produto digital imaginável. É a opção perfeita quando o protótipo precisa parecer real em termos de animação nativa e codificação baseada em lógica (Ex: Se isso, faça aquilo).
• O Webflow fornece o poder de projetar, construir com código e lançar sites responsivos em uma tela 100% o que você vê é o que você obtém.

Clique para ver a imagem em tamanho real.

O MVPr codificado

O código pode ser um aliado incrível. Sem dúvida, é a melhor maneira de construir o seu produto. A principal desvantagem é que você precisa saber como escrever código para experimentar os benefícios da personalização avançada. Sem uma base de conhecimento adequada, optar por experimentar o código o atrasará.

Existem muitos kits iniciais de código para ajudar a dar o pontapé inicial. Por exemplo, o kit de interface do usuário que apresentamos acima tem sua própria versão HTML disponível para download:

6. Teste: aproveite os insights de anúncios

O segredo para testar seu protótipo está nas ferramentas que permitem que você obtenha o máximo de insights com o mínimo de esforço, enquanto ainda fornece valor. Tudo que você precisa é de alguns dólares e alguma solução de problemas paciente.

Um primeiro passo prático para medir o interesse em seu produto é criar um anúncio e segmentar as pessoas encontradas durante a fase de pesquisa. Dependendo do seu público e do tipo de produto que você está projetando, você pode veicular anúncios no Google, LinkedIn, Instagram ou Twitter. Para produtos business-to-consumer, o Facebook é recomendado.

*Dica profissional: o AdEspresso é um local conveniente para executar centenas de versões de seus anúncios sociais ao mesmo tempo, enquanto coleta análises comparativas úteis.

Execute anúncios e você aprenderá duas coisas:

1. O número de pessoas que visualizaram seu anúncio
2. O número de pessoas que clicaram no seu anúncio

Depois de confirmar que seu público-alvo está interessado em interagir com seus anúncios, você precisará criar valor para seus primeiros usuários. Veja como:

• Adicione um formulário de “assinatura” e peça aos usuários que forneçam seus endereços de e-mail.
• Acompanhe para que eles saibam quando você está lançando.
• Certifique-se de ter seus canais de mídia social funcionando para que você possa criar botões sociais, permitindo que os usuários divulguem seu produto.

Use esta estratégia e você ganhará:

• Uma lista de endereços de e-mail que podem ser usados ​​para os primeiros esforços de marketing
• Pessoas que recomendam seu produto para suas redes pessoais e profissionais
• Uma compreensão mais clara se alguém está ou não entusiasmado com o seu produto

A primeira vez que você recebe um feedback real, seu produto está ativo. Por meio desse ciclo de entrega de valor, análise de comportamento e soluções iterativas, você aprenderá o que está funcionando e o que não está, e se aproximará de um produto que as pessoas realmente desejam usar.

Lançar e aprender com ousadia

O objetivo final do protótipo mínimo viável é o seguinte: passar de suposições de design educadas para feedback real e acionável com velocidade e confiança.

Este é um processo que abraça a incerteza e os erros como oportunidades de melhoria. Acima de tudo, recompensa a ação. Um bom design requer uma tomada de decisão ousada e uma vontade de avançar diante da imperfeição.

Portanto, não se prenda à busca da perfeição e tente não se comparar com megamarcas e seus enormes recursos. Continue dando passos à frente e em breve você se encontrará com um produto significativamente polido que as pessoas ficarão entusiasmadas em usar.

• • •

Leia mais no Blog Toptal Design:

1. Protótipo com facilidade – um tutorial do InVision Studio
2. Como conduzir um design sprint eficaz
3. Quem sabia que o Adobe CC poderia fazer wireframe?
4. Teste de UX para as massas: mantenha-o simples e econômico
5. Mapas da jornada do cliente – o que são e como construir um