Principles and best practices of Product Design
•
3 gostaram•240 visualizações
O documento resume uma palestra sobre os Princípios de Design de Produto da empresa Passei Direto. O resumo é: 1) A empresa passou por vários estágios de desenvolvimento do design de produto, desde times independentes até a criação de um sistema de design unificado. 2) Em 2018, a empresa definiu quatro Princípios de Design - Intuitivo, Simples, Consistente e Experiência Focada - para guiar decisões de design e evitar problemas do passado. 3) Os princípios ajudaram a empresa
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Principles and best practices of Product Design
Semelhante a Principles and best practices of Product Design (20)
Mais de Product School
Mais de Product School (20)
Último
Último (8)
Principles and best practices of Product Design
- 1. www.productschool.com Principles and best practices of Product Design
- 2. Join 40,000+ Product Managers on Free Resources Discover great job opportunities Job Portal prdct.school/PSJobPortalprdct.school/events-slack
- 3. CERTIFICATES Your Product Management Certificate Path Product Leadership Certificate™ Full Stack Product Management Certificate™ Product Management Certificate™ 20 HOURS40 HOURS40 HOURS
- 4. Corporate Training Level up your team’s Product Management skills
- 5. Carla Vitorino T O N I G H T ’ S S P E A K E R
- 6. Design Principles Passei Direto • Product School
- 7. Sobre o que vamos falar: • História do time de design do Passei Direto • Porque Design Principles • Como criamos nossos Design Principles
- 8. 2014
- 10. Site Mobile Jobs
- 11. • Times eram independentes • As soluções ficavam dentro do squads • Não existia um processo entre os designers
- 15. 2015 - 2016
- 16. Site Mobile Jobs
- 17. Site Mobile Jobs
- 19. • A situação incomodava • O produto estava cada vez mais complexo • Nasciam novas features sem pensar no todo
- 20. • Definimos nossos padrões básicos (cor, font, ícone…) • Mas não decidimos processos básicos entre a gente
- 23. Site Mobile Jobs
- 24. Site Mobile Jobs
- 25. 1 designer
- 26. Modelo agência
- 27. • As soluções ficavam centralizadas em uma pessoa • Nasceram alguns processos como Design Review e Design Planning
- 28. 2 designers
- 29. Podia voltar a quebras em squads, mas existia o medo do passado
- 30. Modelo agência
- 32. Mesmo com 2 e no modelo agência pode ter desalinhamento
- 33. 2018
- 34. Momento de refactoring • PD estava expandindo para novos níveis • Site iria ser reescrito • Apps nativos iriam morrer e passariam a ser um único código
- 35. Momento de arrumar a casa
- 36. • Todo legado de antigos layouts iria morrer • Mobile poderia ficar finalmente todos alinhado com o site
- 38. Mesmo com 2 e no modelo agência pode ter desalinhamento
- 39. 3 designers e 2 ux researchers
- 40. Dava para voltar a quebrar em squads?
- 41. Não existia um padrão estabelecido Tínhamos alguns padrões definidos
- 42. Não existia um padrão estabelecido Tínhamos até uma lib no sketch
- 43. Mas não existiam padrões micro e um guia deles
- 44. Não ter padrões leva a inconsistência
- 45. Site Mobile Lab
- 46. Modelo agência
- 48. • A gente precisava de mais escalabilidade • A gente precisava focar mais em soluções e menos em pixels
- 51. Dos tokens nasceram componentes .pd-heading-lg { font-family: $font-family-base; font-size: $font-size-md; font-weight: $font-weight-md; line-height: $font-line-height-md; } Heading Lg
- 52. Dos tokens nasceram componentes .pd-heading-lg { font-family: $font-family-base; font-size: $font-size-md; font-weight: $font-weight-md; line-height: $font-line-height-md; } Heading Lg
- 53. Design System
- 55. Site Mobile Lab
- 56. Site Mobile Lab
- 58. Você pode ter padrão, mas o padrão não guia decisões.
- 59. Pode existir inconsistência mesmo com padrão
- 61. Começamos um Design System sem o básico
- 62. Começamos um Design System sem o básico Design Principles
- 63. "Design Doesn’t Scale." Stanley Wood • Head Design Spotify
- 65. "Design Doesn’t Scale." Stanley Wood • Head Design Spotify It was during a weekly design critique that it became clear we had nothing to align on. Our feedback was nothing more than personal opinions based on some new design fad.
- 68. "Redesigning Pinterest, block by block" Andreas Pihlström • Pinterest Creative Director A number of new features had also been added without a clear vision to how they fit into the overall design, so the interface had begun to feel cluttered and hard to understand. As it turns out, it’s damn hard to design consistent and beautiful things at scale.
- 69. 1. Lucid It’s intuitive, not learned. It makes the user feel powerful. It makes the content taste better. 2. Animated It’s colorful. It’s visually responsive. It’s unexpected. 3. Unbreakable It’s built for exploration. It’s impossible to mis-tap. It’s reversible.
- 71. Precisávamos ter pontos de vista compartilhados dentro do time de produto
- 72. PM's, Designers e Researchers precisavam ter uma visão compartilhada do que seria um bom produto
- 73. Precisávamos criar nossos Product Design Principles
- 74. Julie Zhuo Principles that feel too broad or obvious might as well be meaningless. They don’t help shed any light on downstream design decisions. They don’t help get people on the same page around what’s important.
- 75. • Precisavam ser construídos com base na nossa vivência e no nosso produto • Não podia ser criado pelo time de Design
- 77. Começamos pelos nossos erros. Listamos tudo aquilo que incomodava
- 78. ● Fizemos um onboarding (tour) cheio de tooltips que o usuário no final ficava só dando skip ● Todo lugar do site abria um tooltip novo explicando como funciona. No final o produto todo precisava de um "manual de instrução." ● tooltip para falar sobre anotações, tooltip para falar sobre imprimir ● Criamos cards na página de disciplina sem ter um hover para o usuário entender que está naquele elemento específico ● Números mostrando a quantidade de seguidor na página de disciplina não tendo o pontinho na casa de milhares ● No card do dashboard que mostra as disciplinas que sigo, está sem casa de milhares ● Na pop de limite de materiais tivemos vários retrabalhos porque as coisas que estavam sendo escritas não casavam com o momento do usuário ou produto ● Filtro da busca complexo e poucos usuários usando e se perdendo ● Seções do perfil confusa para o usuário ● Criação de soluções sem considerar o modelo mental e os padrões que os usuários já conhecem e usam
- 79. ● Pelo visualizador ser o local de mais acesso há o desejo de sempre colocar muita comunicações e leads dentro dele. Hoje ele é a principal tela e existem muitas ações dentro dele, sem uma avaliação constante da eficiência ● Pop CR - na pop de cr tivemos queríamos explicar tudo numa pop e as primeiras versões saíram com textos longos ● "Não há seguidores", "0 comentários", "Você ajudou 208 estudantes nos últimos meses.". Se fizer um pouco de benchmark da pra ver que muitas vezes você não precisa ser tão descritivo e literal nas mensangens. Se não acaba ficando mt texto. ● Novas Features - foram colocadas na tela sem termos repensarmos no todo. Fez com o que o PD ficasse muito poluído ● Tags - achamos que tag era importante e incluímos essa informação nos cards da home. Acabamos tendo o design mais poluído ● Requisições Time de cliente - pediram para destacarmos mais o "Central de Ajuda" porque os usuários não estavam vendo entre outras coisas. ● Foram adicionadas muitas seções sem saber exatamente o que a gente queria com elas e sem saber qual está sendo o impacto disso no nível quali,
- 80. ● Foram adicionadas muitas seções sem saber exatamente o que a gente queria com elas e sem saber qual está sendo o impacto disso no nível quali, se o usuário realmente entende tantas variações ● Comunicação visual - visualizador no mobile com recomendações no final com cor diferente da web e da própria lista no mobile. ● Se não existe um motivo mt claro e grande pra fazer diferente, gastar mais a cabeça pra padronizar as coisas ● Criar um novo padrão de card porque aquele não "combina com a seção" ● Background-color da section da home de salvar saindo do padrão apenas por gosto ● Versão inicial do featured producers com muitas opções na tela(dps ficou mais suave) ● Variações de cards fora do padrão para ficar mais bonito naquela situação ● Empty state sem ação ● Lista vazia sem mostrar como adicionar ● No passado, criamos tantas pop que tivemos situações que apareciam uma pop em cima da outra.
- 81. ● Páginas com hierarquia mal definida ● Flash sales infinitas (resetando toda semana) ● Forçar a barra em email e/ou push notification mandando mil promoções. ● Quando o mouse vai sair da tela abrir uma pop dando uma promoção. ● Textos sem o contexto de produto ou momento do usuário ● Features muito complexas que precisam ensinar ao usuário ● Criação de soluções sem considerar o modelo mental e os padrões que os usuários já conhecem e usam ● Usuário está no PD pelo conteúdo, a interface não deve ofuscar o conteúdo e nem atrapalhar a experiência de estudo ● Textos extensos ● Cada dia que passa a gente bota mais coisa na tela, e nunca para pra tirar. Resultado disso é um produto visualmente poluido/complexo, com muitas opções pro usuário ● Hoje a gente quer cobrir todos os segmentos possíveis de usuários e acabamos deixando telas muito complexas e com muitas ações pq não sabem qual o segmento que queremos focar com aquele projeto ● Padronização - coisas diferentes em diferentes lugares/produtos
- 82. Passamos a pensar em princípios que ajudariam a gente a não errar errar menos
- 83. Começamos a agrupar os problemas
- 85. Intuitivo A interface deve inspirar confiança, o usuário não pode ter medo de interagir com o produto e nem necessitar ter curva de aprendizado para isto, é imprescindível o uso de modelos mentais já existentes, de interações comuns aos outros sites/plataformas que os usuários costumam navegar, não precisamos reinventar a roda. Devemos conhecer nossos usuários e criar soluções focadas em seu uso.
- 86. Intuitivo DO's Evitar ao máximo a necessidade do uso de pops e tooltips, prefira que a feature seja clara se baseando em modelos mentais pré existentes Usar técnicas de chunking para compreensão rápida do usuário Se algo tem clique, o elemento deve parecer clicável DONT's Diversas pop e tooltips para explicar/apresentar coisas para o usuário Números que parecem códigos (sem casas decimais). Elementos clicáveis sem hover onde não fica claro para o usuário o clique Exemplos
- 87. Simples Quando a interface é complexa, ela pode interferir na experiência do usuário. Para que isso não aconteça, ela precisa ser limpa e focada. O usuário tende a ficar confuso com muitas opções de uma só vez, além de ter dificuldade de tomar uma decisão. Lembre que cada palavra ou elemento visual adicionado à tela é um peso a mais na percepção do todo. Assim, apresente o mínimo e no momento certo. A comunicação deve ser clara, sem jargões tecnológicos, direta e fácil de ser entendida.
- 88. Simples DO's Textos curtos e direto ao ponto Antes de incluir uma feature/elemento novo na tela, avalie a hierarquização do todo e se tudo é necessário Oferecer uma ação principal para o usuário seguir DONT's Textos longos que acabam não sendo lidos Incluir elementos na tela sem reavaliar se ela está acumulando muitas ações para o usuário Apresentar várias opções com o mesmo peso, sem um objetivo Exemplos
- 89. Consistente As interfaces devem seguir padrões para que exista sempre coerência visual e entendimento rápido. Usuários devem conseguir navegar entre nossos produtos e plataformas de forma fluída, sem precisar reaprender ou entender uma nova comunicação. Se há uma solução que necessite criar um novo modelo, pare e re- analise a solução padrão, talvez haja como remodelar o padrão existente para atingir maior diversidade. Reuso sempre antes de re-design.
- 90. Consistente DO's Sempre que uma coisa nova está sendo feita, verificar se está coerente com o restante do produto. Destaques para elementos devem ser dados seguindo padrões que já temos. DONT's Criar coisas novas sem entender a padronização geral do site Colocar backgrounds, cores, elementos que não conversam com o todo. Exemplos
- 91. Experiência focada A interface deve direcionar o usuário, ele deve entender facilmente o contexto que se encontra e qual seria o próximo passo. A navegação precisa ser clara, bem hierarquizada e orientada. Para isso, as páginas precisam ser objetivas, suas interações não podem ser bloqueadas por pop-ups, dead-ends e alertas, as informações precisam ser mostradas no tempo certo, de forma lógica e previsível. Sempre prefira dar ao usuário uma só ação core por página.
- 92. Experiência focada DO's Se atentar ao fluxo e momento do usuário no desenvolvimento de novas atividades Oferecer uma ação principal para o usuário seguir DONT's Desenvolver atividades sem entender o momento e fluxo que fez o usuário chegar ali Apresentar várias opções com o mesmo peso, sem mostrar para o usuário qual o melhor caminho Bloquear o fluxo do usuário com pop-ups, tooltips e páginas sem ações (dead-ends) Exemplos
- 94. 4 designers e 2 ux researchers
- 95. Dava para voltar a quebrar em squads?
- 96. • Padrão criado • Processos nasceram (Planning, Review, Design weekly) • Começamos a ter uma visão compartilhada do produto - Design Principles
- 97. Modelo agência
- 98. Modelo agência
- 100. Obrigada!
- 101. Bernard De Lua T O N I G H T ’ S S P E A K E R
- 102. NSM BernardDeLuna
- 104. A cada 15 dias, eu posso invadir a sua vida de uma forma única listadeluna.substack.co @BernardDeLu na
- 106. “O homem é sempre vítima de suas verdades. Depois de admitir, ele não pode mais se Albert Camus BernardDeLuna
- 107. NSM A North-Star Metric é uma medição do principal valor que seu produto oferece aos clientes. BernardDeLuna
- 111. BernardDeLuna Mede a propost a de valor Represent a a estratégia de Indica um resultad o Sandhya Hegde
- 112. OMTM Uma métrica que importa (“One Metric That Metters”) é uma das bases teóricas que sustentam a BernardDeLuna
- 113. BernardDeLuna
- 115. BernardDeLuna Noites reservadasPor quantos usuários? Em quanto tempo? Por usuários novos ou recorrentes?
- 117. BernardDeLuna Pedidos entreguesEm quanto tempo? Para usuários novos ou antigos? Com avaliação positiva ou negativa?
- 119. BernardDeLuna Tempo no feedEm que isso impacta em nosso crescimento como rede social? Como estamos aumentando nossa proposta de valor de relacionamento com essa métrica?
- 121. BernardDeLuna # usuários que adicionara m 7 amigos Nos primeiros 10 dias
- 122. # episódios que viciam o usuário na série BernardDeLuna
- 123. BernardDeLuna # episódios que viciam o usuário na série # 2 # 5 # 8
- 124. Proportion Above Threshold True Positive Ratios - PPV and Sensitivity True Negative Ratios - NPV and Specificity https://help.amplitude.com/hc/en-us/articles/115001526027-How-to-Use-Compass-to-Find-Your- Company-s-Inflection-Metrics BernardDeLuna
- 125. NSM e Growth BernardDeLuna Seu North Star Metric é uma parte crítica do alinhamento de sua equipe para impulsionar um crescimento rápido e sustentável
- 126. NSM e Growth BernardDeLuna Seu North Star Metric é uma parte crítica do alinhamento de sua equipe para impulsionar um crescimento rápido e sustentável
- 127. “Métricas de qualificação geralmente adicionam um nível de controle de qualidade à estatística bruta." Kerry Jones BernardDeLuna
- 129. BernardDeLuna ShowU s Jogo da atenção Tempo gasto assistindo vídeos Velocidade de upload Ações Premiar canais Ações
- 131. BernardDeLuna NSM Outco me KPI KPI KPI Inp ut Estratég ia
- 132. BernardDeLuna NSM Outco me Inp ut Estratég ia KPI OKR OKR OKR KPI OKR OKR OKR KPI OKR OKR OKR Inp ut
- 133. BernardDeLuna NSM Outco me Inp ut Estratég ia KPI OKR OKR OKR KPI OKR OKR OKR KPI OKR OKR OKR Inp ut Iniciativa s Iniciativa s Iniciativa s Açã o Tátic a
- 134. BernardDeLuna NSM Outco me Inp ut Estratég ia KPI OKR OKR OKR KPI OKR OKR OKR KPI OKR OKR OKR Inp ut Iniciativa s Iniciativa s Iniciativa s Açã o Tátic a Métrica s Métrica s Métrica s Inp ut
- 135. BernardDeLuna
- 136. NSM BernardDeLuna O que queremos atingir esse ano? Qual o sucesso mensurável que
- 137. KPI BernardDeLuna Como pretendemos chegar lá? Quais os indicadores principais que nos
- 138. OKR e Iniciativas BernardDeLuna ●Quais os resultados necessários a curto prazo para percorrermos o caminho definido? ●Que experimentos
- 139. Quer ir além? BernardDeLuna Procure sobre dimensões Estude o jogo que você joga Pense em NSM para cada etapa do funil (ativação, retenção e monetização)
- 141. www.productschool.com Part-time Product Management Training Courses and Corporate Training