Auxílio Visual para Desenvolvimento de Produto: Design

Esta é a segunda parte de uma série de quatro partes sobre desenvolvimento de produtos físicos. Caso você tenha perdido Часть 1: Formação de uma ideia, não deixe de ler. Em breve você poderá passar para a Parte 3: Design e Parte 4: Validação. Autor: Ben Einstein. Original Tradução feita pelas equipes do fablab FABINKA e projeto Mãos.

Parte 2: Projeto

Cada etapa da fase de design - pesquisa do cliente, wireframing, mais em russo), um protótipo visual – necessário para testar hipóteses sobre a aparência do produto e como os usuários irão interagir com ele.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.1 Estágios de Design do Produto

Desenvolvimento e feedback do cliente

As empresas que se concentram no feedback dos clientes terão muito mais sucesso do que aquelas que ficam sentadas no workshop e se desenvolvendo indefinidamente. Isso afeta com mais frequência empresas que produzem produtos materiais. E embora a comunicação com os clientes seja sempre útil, é extremamente importante nos estágios iniciais de desenvolvimento.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.2. Desenvolvimento e feedback do cliente

Para DipJarGenericName Sempre foi muito importante testar e confirmar suas hipóteses nos clientes. Depois de criar um protótipo de prova de conceito (PoC), os bancos foram lançados no mundo real.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.3. Fotos reais de clientes tiradas durante os primeiros testes

Um de meus mentores disse certa vez: “Você sabe como saber se o design do seu produto é ruim? Veja como as pessoas usam isso." A equipe DipJar continuava vendo o mesmo problema (seta vermelha na foto): os usuários tentavam inserir o cartão incorretamente. Ficou claro que esta era uma grande limitação do projeto.

Recomendações para comunicação com os clientes nesta fase (em oposição à fase de pesquisa do problema):

  • Prepare um roteiro de conversa detalhado e cumpra-o;
  • Registre detalhadamente o que você ouve por escrito ou em um gravador de voz;
  • Se possível, acompanhe o índice de fidelidade do cliente (NPS, muitas empresas preferem fazer isso mais tarde, e tudo bem);
  • Permita que os usuários experimentem o produto (quando estiver pronto) sem qualquer explicação ou configuração prévia
  • Não pergunte aos clientes o que eles mudariam no produto: em vez disso, observe como eles o utilizam;
  • Não preste muita atenção aos detalhes; por exemplo, cor e tamanho são uma questão de gosto.

Modelagem de wireframe

Após feedback detalhado sobre o protótipo de prova de conceito, é hora de iterar o design do produto.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.4. Estágio de modelagem de wireframe

O processo de wireframing começa com a criação de esboços de alto nível que descrevem completamente a experiência de uso do produto. Chamamos esse processo de storyboards.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.5. Roteiro

Um storyboard ajuda os fundadores da empresa a refletir sobre toda a jornada do produto. É usado para descrever:

  • Embalagem: como será? Como você descreve um produto (tamanho médio da embalagem) em nove palavras ou menos em uma embalagem? Qual será o tamanho da caixa? Onde ele irá na loja/na prateleira?
  • Vendas: Onde o produto será vendido e como as pessoas irão interagir com ele antes de comprar? As exibições interativas ajudarão? Os clientes precisam saber muito sobre o produto ou será uma compra por impulso?
  • Unboxing: Como será a experiência de unboxing? Deve ser simples, compreensível e exigir um esforço mínimo.
  • Configuração: quais etapas os clientes devem seguir antes que o produto esteja pronto para o primeiro uso? O que você precisará além dos acessórios incluídos? O que acontece se o produto não funcionar (não há conexão wi-fi ou o aplicativo não está instalado no smartphone)?
  • Experiência de primeiro uso: como o produto deve ser projetado para que os usuários possam começar a usá-lo rapidamente? Como um produto deve ser projetado para garantir que os usuários retornem com uma experiência positiva?
  • Reutilização ou uso especial: como garantir que os usuários continuem a usar e desfrutar do produto? O que acontece em casos de uso especiais: perda de conexão/serviço, atualização de firmware, falta de acessório, etc.?
  • Suporte ao usuário: o que os usuários fazem quando têm problemas? Se lhes for enviado um produto de substituição, como isso acontecerá?
  • Vida útil: a maioria dos produtos expira após 18 ou 24 meses. Como essas estatísticas se relacionam com a jornada do cliente? Você espera que os usuários comprem outro produto? Como eles passarão de um produto para outro?

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.6. Trabalhando com um futuro usuário de um aplicativo ou interface web

A modelagem wireframe também é útil se o seu produto tiver uma interface digital (interface incorporada, interface web, aplicativo para smartphone). Geralmente são desenhos simples em preto e branco, embora também possam ser usadas ferramentas digitais. Na foto acima (2.6) você pode ver o fundador da empresa (à direita). Ele entrevista o cliente em potencial (à esquerda) e faz anotações enquanto usa o aplicativo na “tela” de papel de um smartphone. E embora este tipo de teste de fluxos de trabalho digitais possa parecer bastante primitivo, é muito eficaz.

Ao final do wireframing, você deverá ter uma compreensão detalhada de como os usuários interagirão com cada parte do seu produto.

Protótipo visual.

Um protótipo visual é um modelo que representa o produto final, mas não funcional. Tal como acontece com outras etapas, a criação de tal modelo (e wireframes associados) envolve interação iterativa com os usuários.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.7. Estágio de protótipo visual

Comece com uma ampla gama de ideias e trabalhe para selecionar alguns conceitos que melhor atendam aos critérios de seus usuários.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.8 Esboço

O design visual do protótipo quase sempre começa com esboços de alto nível do próprio produto (em oposição a um storyboard, que descreve a experiência de uso do produto). A maioria dos designers industriais primeiro faz uma busca preliminar por formatos e produtos semelhantes. O designer da DipJar estudou muitos outros produtos e fez esboços com base em seus formatos.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.9. Seleção de forma

Depois de selecionar alguns conceitos básicos, você precisará testar como eles ficarão no mundo real. Na foto você pode ver formas aproximadas de DipJar feitas de base de espuma e tubo. Cada um leva alguns minutos para ser criado e, como resultado, você pode ter uma ideia de como a forma será percebida no mundo real. Fiz esses modelos com tudo, desde argila e Legos até espuma e palitos de dente. Existe uma regra importante: fabricar modelos de forma rápida e barata.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.10. Seleção de tamanho

Depois de escolher a forma básica, você precisa trabalhar no tamanho do modelo e na escala das peças individuais. Geralmente existem dois ou três parâmetros que são importantes para a “sensação correta” de um produto. No caso do DipJar, essa era a altura da própria lata, o diâmetro da parte frontal e a geometria da ranhura para os dedos. Para tanto, são feitos modelos mais precisos e com pequenas diferenças de parâmetros (de papelão e espuma de poliestireno).

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.11. Compreendendo a experiência do usuário

Paralelamente ao desenvolvimento do formulário, muitas vezes fica aparente que alguns recursos de experiência do usuário (UX) precisam ser explicados. A equipe do DipJar descobriu que a probabilidade de generosidade aumenta quando a pessoa que está à frente na fila deixa uma gorjeta. Descobrimos que os sinais sonoros e luminosos são uma forma muito eficaz de atrair pessoas na fila e, assim, aumentar a frequência e o tamanho das gorjetas. Como resultado, fizemos muito para escolher o melhor posicionamento dos LEDs e projetar comunicações usando luz.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.12. Linguagem de design

Cada produto possui uma “linguagem de design” por meio da qual se comunica visual ou experiencialmente com o usuário. Para o DipJar, era importante transmitir rapidamente ao usuário como inserir um cartão. A equipe passou muito tempo otimizando o logotipo do cartão (foto à esquerda) para que os usuários pudessem entender claramente como inserir o cartão corretamente.

A equipe DipJar também trabalhou na otimização dos padrões de retroiluminação LED. Uma seta vermelha aponta para os LEDs ao redor da borda do rosto, que sinalizam de forma divertida um ato de generosidade. A seta azul indica o resultado de longas discussões da equipe - a capacidade dos donos dos bancos de alterar os valores arrecadados. Um display LED digital personalizado permite que o proprietário do DipJar altere facilmente o tamanho da ponta.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.13. Cores, materiais, acabamentos

Para determinar rapidamente a aparência final do produto, os designers selecionam cores, materiais e acabamentos (CMF). Isso geralmente é feito digitalmente (como mostrado acima) e depois traduzido em amostras e modelos físicos. A DipJar testou uma variedade de estilos de caixas de metal, acabamentos e cores de plástico.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.14. Renderizações finais

O resultado da seleção inicial do CMF é um modelo de produto digital de alta qualidade. Geralmente inclui todos os elementos das etapas anteriores: forma, tamanho, símbolos, experiência do usuário (UX), iluminação (LED), cores, texturas e materiais. Essas visualizações e renderizações de alta qualidade também são a base para quase todos os materiais de marketing (até mesmo os deuses do marketing da Apple usam renderizações para tudo).

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.15. Design de aplicativos da web

Se o seu produto possui interface digital, criar mockups mais precisos será extremamente útil para definir a experiência do usuário do seu produto. O principal ativo digital da DipJar é um painel de controle baseado na web para lojistas e instituições de caridade. Também há planos de lançar um aplicativo mobile para funcionários e pessoas que deixam gorjetas.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.16. Seleção de configuração de embalagem

Uma etapa importante que é facilmente esquecida na fase de design é a embalagem. Mesmo um produto relativamente simples como o DipJar passou por iterações no desenvolvimento de embalagens. Na foto à esquerda você confere a primeira versão da embalagem; na foto à direita está uma embalagem mais impressionante e elegante da segunda geração. A otimização do design é uma parte importante da criação de uma experiência de usuário positiva e da especificação de materiais.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.17. Não se esqueça da iteração!

Uma vez produzidos os protótipos visuais de alta fidelidade, eles são devolvidos aos clientes para testar muitas das hipóteses levantadas durante o desenvolvimento. Basta fazer 2 a 3 iterações para obter um ótimo protótipo visual.

Auxílio Visual para Desenvolvimento de Produto: Design
Figura 2.18. O protótipo final visualmente próximo do produto

Assim que o processo de design for concluído, você terá um belo modelo que mostra a intenção do design, mas ainda sem funcionalidade. Clientes e investidores devem ser capazes de compreender rapidamente o seu produto interagindo com este modelo. Mas não esqueçamos da importância de tornar o produto funcional. Para fazer isso, mergulhe na Parte 3: Construção.

Você leu a segunda parte de uma série de quatro partes sobre desenvolvimento de produtos físicos. Não deixe de ler Часть 1: Formação de ideias. Em breve você poderá passar para a Parte 3: Design e Parte 4: Validação. Autor: Ben Einstein. Original Tradução feita pelas equipes do fablab FABINKA e projeto Mãos.

Fonte: habr.com

Adicionar um comentário