Design Principles: o que são e como os implementamos na HeroSpark
Antes de começarmos, o que é a HeroSpark?
A HeroSpark nasceu da fusão de duas empresas concorrentes: a EADBOX e a Edools. Ambas nasceram e cresceram como EdTechs, ou seja, fornecendo tecnologia para que empreendedores e empresas de educação construíssem suas escolas online de forma fácil e rápida.
Isso porque a missão da HeroSpark é ajudar clientes, que possuem conhecimentos e ideias, a chegarem ao seu objetivo de transformar suas habilidade em produtos digitais para vendê-los no mercado.
A plataforma da HeroSpark permite que produtores de conteúdo hospedem seus cursos onlines, e-books e provas de forma simples e prática.
Nela você encontra o espaço ideal para seus produtos e, ainda, conta com ferramentas de captura de leads, de criação de landing pages e de disparo de e-mails. Assim como checkout próprio e um ambiente virtual para seus alunos. Tudo que você precisa para ensinar de forma remota e criar um negócio online lucrativo.
O que são os Design Principles?
Os Design Principles são um conjunto de regras, diretrizes e considerações de design que formam a base de qualquer bom produto.
Eles definem e comunicam características chave de um produto para os Stakeholders e para os usuários. E servem como ponto de partida para a criação de novos projetos, para o processo de tomada de decisões e para o direcionamento de times de design em crescimento.
Os Principles são mutáveis, ou seja, podem ser revisitados e alterados caso no futuro não façam mais sentido no contexto da empresa ou, ainda, caso já tenham sido totalmente absorvidos pelo time. Isso porque eles estão diretamente ligados à maturidade do time de Design e de Produto das empresas.
Por que resolvemos desenvolver nossos Design Principles?
Aqui na HeroSpark viu-se a necessidade de criar os Design Principles, pois nosso time estava dobrando, ou mais precisamente, triplicando de tamanho em um curto espaço de tempo.
Os princípios nos ajudariam a ter um norte para o time, algo que criasse uma visão clara do que realmente importa para podermos tomar decisões de design. Além disso, ajudaria a ter argumentos mais sólidos e lógicos na hora de dar feedback para um colega.
Assim como servir de base para definir o que é sucesso para nosso time e, claro, nos ajudar a alinhar nossas funções com os valores da empresa.
O Processo de criação
Pesquisas de referências
Antes de começarmos a colocar a mão na massa e criarmos nosso principles, fomos atrás de artigos e mais informações sobre Design Principles, como exemplos de dinâmicas de criação e também princípios de design de outras empresas e seus significados.
Abaixo coloquei os links dos principais artigos que usamos para isso, espero que eles sejam tão úteis para você quanto foi para nós:
Aqui você encontra diversos artigos e uma imensa lista de princípios de outras empresas: https://principles.design/
Esse foi o artigo base para a execução da nossa própria dinâmica: https://uxdesign.cc/the-design-principles-workshop-2fe4e6637b35
Esse nos deu uma visão mais clara do que eram e não eram Design Principles, além de uma lista dos principles de grandes empresas: https://medium.muz.li/design-principles-behind-great-products-6ef13cd74ccf
Exemplo de como foi o processo de criação do Spotify: https://spotify.design/article/introducing-spotifys-new-design-principles
Mais exemplos e passo a passo de criação da Gusto: https://modus.medium.com/how-to-create-design-principles-that-people-actually-use-11b534bf2425
Aqui vimos técnicas que podem incrementar a dinâmica de criação: https://uxdesign.cc/why-design-principles-shape-stronger-products-ae677bdd831b#.jaw5hhj26
Análise da visão dos clientes internos e externos sobre a HeroSpark
Após a pesquisa de referências, vimos também a necessidade de nos aprofundar sobre o entendimento do nosso produto por parte dos funcionários e dos clientes. Já que precisávamos compreender um pouco mais sobre quais características e sentimentos a Hero provocava em nossos usuários.
Dessa forma, poderíamos coletar dados positivos e negativos para usar como referência e como um ponto de partida no Brainstorm de criação das palavras que se tornariam nossos princípios.
Para as entrevistas internas com os Heroes, nós focamos nos objetivos da companhia e nas características que achávamos que já transmitimos para nossos clientes, tanto positivas como negativas e, por fim, no que gostaríamos de transmitir.
Para os clientes entrevistados focamos nos seus objetivos, no que queriam alcançar e esperavam da HeroSpark. Também perguntamos o que a empresa transmite para eles e o que eles gostariam de transmitir para seus clientes e alunos.
Para ambos fizemos uma atividade de navegação entre as páginas de nossas principais funcionalidades. Assim foi possível coletar os feedbacks das interações e dos sentimentos que as telas e tarefas passavam para eles.
Em seguida, juntamos e analisamos essas informações e, a partir disso, foi possível montar diversas nuvens de palavras e um card sorting de post-its com os termos e características mais usados, conforme disposto na imagem, a seguir.
A Dinâmica de criação dos Principles
Para realizar a criação dos Design Principles, vimos a necessidade de envolver não só o time de design, mas também os PMs e o CPO, para assim termos certeza de que estávamos indo para o caminho certo em relação à empresa e ao time de produto.
Antes da dinâmica de criação em si, nós marcamos uma reunião rápida com os participantes para apresentar os resultados da pesquisa e contextualizá-los melhor sobre o que eram os Principles. Dessa forma, todos estariam prontos para a dinâmica no dia seguinte.
Nesse momento, também aproveitamos para esclarecer o que eram considerados Design Principles bons e ruins com base nos estudos e nas pesquisas feitas anteriormente.
Princípios que parecem muito amplos ou óbvios não fazem sentido. Eles não ajudam a esclarecer ou guiar decisões de design e não ajudam a colocar o time na mesma página sobre o que é importante para os projetos.
Um exemplo de um bom Principles seria escolher entre Padronização ou Adaptabilidade, pois mostra de forma clara quais as escolhas que devem ser feitas ou o caminho que o time seguirá. Tendo isso claro em mente, iniciamos a dinâmica de criação.
1# BrainStorm de palavras
Primeiramente, selecionamos os termos e as características chaves citadas pelos clientes e os colocamos na caixa de inspiração do Brainstorm.
Aqui os participantes teriam 10 minutos para escrever ideias e sugestões de quais seriam nossos Design Principles. Depois disso, teríamos 15 minutos para apresentar e agrupar os termos parecidos.
Depois, demos mais 2 minutos para eles refletirem sobre quais palavras representavam melhor o momento da empresa e do time de design.
Por último, eles tiveram 3 minutos para a votação, onde cada um dos participantes teriam 5 votos. Os 5 princípios mais votados seriam levados para a fase seguinte da dinâmica.
2# Criação das frases
A segunda parte da dinâmica consistia em alinhar nosso entendimento sobre o que aqueles Principles significaram.
Eles teriam 10 minutos para criarem frases explicativas para cada uma das 5 palavras escolhidas. Novamente, tivemos 15 minutos para lermos e entender o que cada um escreveu e então seria feita a votação na qual cada participante teria 10 votos e as 5 frases mais votadas de cada princípio seriam levada para a próxima etapa.
3# Criação do significado
Aqui todas as frases selecionadas foram listadas ao lado dos Principles. Os participantes foram separados em duplas e cada uma ficou responsável de montar um ou dois parágrafos usando como base as 5 frases escolhidas anteriormente para aquele princípio, eles teriam 10 minutos para isso.
Uma vez com o texto montado seria a hora de apresentar, receber feedbacks e sugestões de melhorias e, por fim, passar a limpo a versão final do texto de significado do Principle.
4# Exercício de como aplicar
Esse exercício foi realizado em um segundo momento somente com o time de design. Nesse momento, foi proposto ao time que procurassem por exemplos de possíveis aplicações dos nossos princípios dentro da plataforma ou dentro de pesquisas e dinâmicas que realizamos.
Eles deveriam tirar os Prints destas páginas ou telas e abaixo explicar como e por que o Principles se aplicava a aquele exemplo. Então cada um apresentaria suas descobertas para vermos se todos concordavam que aquilo pertencia mesmo a aquele Principle ou se também se encaixava em outro. Ao final desta dinâmica encontramos 28 formas que nossos Design Principles poderiam contribuir para melhorias na plataforma.
5# Criação de objetivos e definição de sucesso
Por último, fizemos uma dinâmica para tentar definir como medir e o que seria considerado sucesso para cada Principle. Nessa atividade tentamos responder às seguintes perguntas:
- O que? (O que queríamos avaliar e descobrir);
- Quais as fontes? (De onde viriam aquelas informações)
- Quais os indicadores de sucesso? (Quais seriam os números e critérios que consideramos sucesso).
E dessa atividade saíram iniciativas e objetivos que nosso time planeja alcançar, como a criação de um playbook de boas práticas de UXW, acessibilidade, de padronização e criação de novos componentes e outros. E também algumas sugestões de KPIs importantes relacionados aos Principles para analisarmos e acompanharmos nas entregas de projetos junto com os PMs.
Os Princípios
Quais são os Design Principles da HeroSpark?
Ladies and Gentlemans, eu lhes apresento, os Design Principles da HeroSpark:
Fluidez:
Nosso design deve conhecer profundamente o perfil da pessoa usuária e o que significa fluidez para ele, assim garantindo que não criaremos barreiras na sua experiência.
Humano:
Nosso design deve ser inclusivo, sempre se comunicando com nossos clientes de forma clara, objetiva, encorajadora e didática durante toda a sua jornada.
Enabler:
Nosso produto deve oferecer a estratégia e capacitar a pessoa usuária em qualquer nível de conhecimento e estágio da jornada. Para que ela não tenha dúvidas sobre quais ações precisam realizar e como deve realizá-las.
Performance:
Projetamos produtos ágeis e não negociamos performance.
Universal:
Temos a missão de transformar a vida de milhares de pessoas, todas elas com contexto próprio e objetivos diferentes. Por isso, nosso produto deve possibilitar o acesso para todos.
Uma vez com nossos Principles, aproveitamos para criar cards de apoio contendo dicas de como aplicá-los e também cards de Objetivos de mais longo prazo.
Como iremos aplicá-los no nosso dia a dia da empresa?
Certo, agora como fazer com que os Design Principles realmente sejam usados e não sejam ao pouco esquecidos pelo time?
Para isso, nós adicionamos nossos Principles no Playbook de onboarding de novos integrantes do time de design.
Criamos um checklist com to-dos relacionados aos Principles para usarmos como referência na hora de realizar pesquisas, iniciar a parte visual de um projeto e também para a cerimônia de revisão do time (take a look).
Também colocamos no Slack do Take a Look um lembrete de quais são nossos Principles e acesso ao drive onde estão as cartas.
Além disso, nosso time aproveitou para criar Posters, Wallpapers para os computadores e imagens de fundo para reuniões com a temática dos Principles.
Conclusão
Para mim, como UX Designer e entusiasta de Iniciativas de Design Ops, devo dizer que foi muito interessante ter participado da experiência de propor o formato e mediar a Dinâmica de Criação dos Design Principles da empresa. Por isso, quero agradecer ao João Victor Santos por ter me dado essa oportunidade e me ajudado a refinar as atividades.
Se você chegou até aqui, espero que tenha gostado do texto e, acima de tudo, espero que esse artigo tenha sido útil para você caso esteja, assim como eu quando comecei o projeto, procurando por artigos e dicas que lhe ajudem a desenvolver os Design Principles da sua empresa. Se ele conseguiu ser útil para você, meu trabalho aqui está feito :)
Caso tenha se interessado pela HeroSpark e quer saber mais sobre a empresa, acesse o nosso site.
Se você tem interesse em fazer parte do nosso time de produto? Então clique aqui e veja nossas vagas.
