Design Review: a cerimônia que otimiza o trabalho de designers ágeis

Descubra como designers do Bridge compartilham conhecimentos trabalhando dentro de equipes ágeis

Conteúdo produzido por Aline Effting Guedes, André Luiz Gomes, Bruna Sudoski, Júlia Pedrosa, Marina Soares e Ysadora Plegge

A metodologia ágil possui diversas vantagens tanto para os designers quanto para os outros membros das equipes de desenvolvimento! Além de poder trabalhar em contato com diversos profissionais com diferentes conhecimentos, é possível comparar o próprio trabalho com o de outras equipes da mesma organização e melhorar os resultados.

Para isso, aqui no Bridge temos a cerimônia de Design Review, uma reunião semanal para encontro entre nós, designers do Bridge em equipes ágeis.

Quer descobrir mais sobre o que fazem os designers e como as reuniões auxiliam na nossa rotina de trabalho? Então continua com a gente.

• Como trabalham os designers no Bridge?
• As diferenças da metodologia ágil
• Cerimônia de Design Review

Como trabalham os designers no Bridge?

O dia a dia dos designers UX/UI no Bridge é dinâmico e cercado de atividades multidisciplinares. Atuamos no desenvolvimento e na evolução contínua dos nossos produtos, participando ativamente da concepção e execução por meio de práticas como:

• Pesquisa com usuários;
• Análise e levantamento de requisitos;
• Prototipação e testes de interface;
• Acompanhamento do desenvolvimento do produto.

Isso é possível porque utilizamos metodologias ágeis! Nossa rotina de trabalho se dá com profissionais de desenvolvimento e análise acompanhando todo o processo, incluindo ideação, entrega e manutenção.

As diferenças da metodologia ágil

Diferentemente de outros tipos de metodologias, aqui no Bridge os designers não trabalham em uma mesma equipe! Na verdade, cada time é composto por profissionais com diferentes formações e responsabilidades.

Por exemplo, o time X, que é responsável pelo desenvolvimento do produto Y, é composto por desenvolvedores web, um designer, analistas de QA e por aí vai. Nesse modelo, cada designer está inserido em uma ou duas equipes distintas, sem trabalhar diretamente com outros designers. 

Por conta dessa distância organizacional, cada designer tem uma posição de responsabilidade dentro das equipes. Por isso entendemos a importância de um momento de revisão do que está sendo feito por todos os designers do Laboratório.

Sabe quando você olha tanto para um problema que não consegue ter novas ideias e encontrar soluções? Foi para resolver situações assim que surgiu a cerimônia de Design Review, nosso momento dedicado à troca de conhecimentos e experiências entre designers!

Com inspiração nas cerimônias características das metodologias ágeis, como dailys e sprints, sentimos a necessidade de um momento dedicado ao design, onde aconteceria a avaliação das interfaces e produtos pela perspectiva e conhecimento dos profissionais da área.Assim, garantimos o bom funcionamento dos produtos, consistência visual e o padrão de qualidade Bridge. 

Cerimônia de Design Review

Nessa reunião, que tem duração aproximada de uma hora e meia, cada profissional traz suas dúvidas que surgiram durante a semana e atualizações de suas tarefas e outros assuntos relacionados ao Design. Essas podem ser das mais diversas! 

• Como aplicar e adaptar os elementos das interfaces, como cores, fontes, espaçamentos, botões, etc.;
• Auxílio para selecionar qual a melhor solução para um problema entre as alternativas;
• Como adaptar as soluções conforme mudanças nos requisitos ou outros impedimentos técnicos;
• Troca de experiências sobre entrevistas com usuários;
• Compartilhamento de dinâmicas e ferramentas utilizadas com as equipes ágeis.

Contamos com o conhecimento dos colegas para nos ajudar a esclarecer dúvidas, ter novas ideias e soluções para aqueles problemas. A sabedoria da equipe é bastante variada, contemplando a parte mobile, web, pesquisa, design systems, entre outros. 

Tudo isso nos permite ter uma visão mais completa dos problemas e chegar a decisões mais certeiras. A opinião de todos é importante e a troca de conhecimento é fundamental, especialmente para quem chegou recentemente no Laboratório. Por ainda estarem na curva de aprendizado, a Design Review permite aos novos bridgers  uma orientação direta com outros profissionais com mais experiência.

Além de ser um espaço para atualizações do laboratório e dos projetos, a reunião é o momento perfeito para compartilhar experiências como conteúdos de cursos, projetos desenvolvidos em sala de aula, tutoriais ou novas práticas, descobertas técnicas e teóricas. 

Tudo isso, em conjunto com os outros pontos já mencionados, promove momentos de reflexão para o desenvolvimento de nossos produtos e também uma constante evolução profissional dos nossos designers!

Mais do que isso, também é um lugar para o fortalecimento de laços.  Parte de se tornar um bom profissional é se relacionar bem com as outras pessoas e ter uma boa comunicação. A reunião cria esse ambiente de aproximação e motivação, onde os designers se incentivam a realizar novas atividades, aprender outras habilidades e sair um pouco da zona de conforto.

A Design Review é super útil para a evolução dos nossos times! E você, já sabia como podem se organizar os profissionais de diferentes equipes em uma metodologia ágil?

Dá uma olhada nos nossos outros artigos sobre Design e metodologia ágil aqui no Portal Bridge. 

• Confira “A Transformação Bridge de Cascata para Ágil“
• Leia “B_thinking: o modelo de processo de UX do Bridge, agora para todos!“

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post Design Review: a cerimônia que otimiza o trabalho de designers ágeis apareceu primeiro em Laboratório Bridge.

B_thinking: o modelo de processo de UX do Bridge, agora para todos!

Veja como o b_thinking foi desenvolvido e confira os princípios, etapas, métodos e ferramentas do modelo, disponíveis no site.

Conteúdo produzido por Gabriel Norde, Lais Eing, Ianka Cristina e Thaisa Lacerda.

No Bridge, Compartilhar dá + XP! E é por isso que resolvemos espalhar o conhecimento bridger para o mundo. O b_thinking, nosso modelo de processo de UX próprio, já possui site e pode ser acessado por qualquer pessoa!

Se você se interessa por Produto, Design, UX, UI, metodologias ágeis e ferramentas de melhoria de processo, dê uma olhada no b_thinking, que temos certeza que você vai gostar. 

No artigo “B_thinking: Por que decidimos construir um modelo de processo de UX próprio?” contamos o que é o b_thinking, como ele começou a ser criado e para que serve. Além disso, exploramos diversos motivos pelos quais o nosso modelo de processo de UX foi pensado especialmente para o desenvolvimento dos produtos do laboratório Bridge. 

Um deles é manter a nossa forma de trabalho mais transparente para as equipes, novos membros e para os clientes (e por que não futuros clientes? ). 

A construção do b_thinking ocorreu em várias etapas, envolvendo bridgers de diversas equipes e com diferentes formações. A diversidade desses papéis enriqueceu a discussão sobre as práticas e rotinas do laboratório e contribuiu com a construção de diversas orientações.

Uma das nossas maiores preocupações foi estruturar um modelo de processo de UX que estivesse alinhado com a nossa cultura organizacional e com o processo de desenvolvimento das equipes. Para isso, construímos o b_thinking de forma iterativa, realizando constantes entregas de MVP, avaliando e fazendo melhorias conforme necessário. Dá uma olhada:

Missão 1: levar a dinâmica do Bridge para a planilha

#1 –  Na primeira versão foram definidas as etapas, atividades e saídas do processo. Nessa fase, o conteúdo foi apresentado em uma planilha, com o intuito de favorecer a troca de conhecimento entre os bridgers e construir uma base comum de terminologia no laboratório. 

Nessa primeira versão, nosso modelo representava o esforço de diversos times para entender as etapas envolvidas na construção de diferentes produtos. As etapas estavam estruturadas em uma planilha, incorporando a ideia de uma sequência de passos que podiam ser seguidos para atingir um objetivo final. Neste momento, não havia  uma representação visual que facilitasse a compreensão das atividades dos processos de descoberta e de entrega.

De forma complementar, compilamos os princípios que traduzem a cultura do laboratório Bridge, das metodologias ágeis e do Lean UX. Estes princípios incluem conceitos que vão desde a ideia trabalhar com equipes multifuncionais, mas pequenas, até testar as hipóteses e soluções antes de escalá-las.

Os aprendizados e experiências de diversos bridgers estavam finalmente organizados em um único local.  Entendendo que as organizações são dinâmicas e vivas, a cada ciclo novos aprendizados continuaram sendo registrados (e continuarão, pois a melhoria é contínua!). Dessa forma foi possível construir uma base comum de informações facilitando a troca de conhecimento.

Missão 2: bora orientar a galera

#2 – A segunda versão teve como objetivo fornecer mais orientações sobre o nosso processo de trabalho. Para cada etapa, nós descrevemos um objetivo, sugestões de métodos/ferramentas que podem ser utilizados para realizá-la, templates/guias e uma seção com referências, para que os bridgers pudessem rapidamente acessar conteúdos mais detalhados.

Nesta versão, o material foi organizado em formato de slides e ganhou uma representação visual do processo.

Missão 3: transparência e produtividade!

#3 – Um dos objetivos do b_thinking é atender à necessidade de tornar o processo de desenvolvimento de produtos do Bridge mais transparente e acessível para todos os stakeholders dos nossos projetos.

Além disso, no Bridge, nós valorizamos o compartilhamento de ideias, afinal Compartilhar Dá +XP! Por isso, na sua terceira versão, nós publicamos todo o conteúdo do b_thinking em um site!

Com o conteúdo público, garantimos mais transparência sobre os nossos processos com toda a comunidade de desenvolvimento de produto, disponibilizando um conteúdo que é fruto de muita pesquisa e iterações para quem quiser acessar. Se você é estudante, profissional da área ou um entusiasta de UX, não deixe de conferir o site e nos contar o que achou!

Por meio do site  também aumentamos ainda mais a transparência com os nossos clientes e outros stakeholders do projeto. Ter o nosso processo de UX e as ferramentas que utilizamos apresentadas de forma clara e acessível, facilita os alinhamentos e garante que todos os envolvidos tenham clareza sobre o porquê e como cada uma das atividades estão sendo realizadas.

Ah, vale lembrar que o b_thinking foi construído por e para os bridgers, ou seja, os métodos refletem a nossa forma de trabalho. Mas, é claro, ele pode se aplicar a outros locais e projetos, ou até mesmo servir de inspiração para a sua adaptação de modelo de processo de UX.

Portanto, não é uma metodologia fechada. Pode usar como for melhor para o seu processo, de forma flexível. O b_thinking serve para orientar, não engessar!

Lá no site do b_thinking você pode conferir informações valiosas para a implementação desse modelo de processo de UX. 

Lá, você pode conferir sobre:

Princípios: Para desenvolver produtos incríveis, não basta apenas aplicar diferentes métodos em uma ordem específica, é importante incorporar princípios do Lean UX para poder extrair o maior valor possível do processo.

Etapas: O b_thinking possui etapas, que durante o desenvolvimento do produto, nos orientam a entender o problema e a identificar as soluções que mais agregam valor para os nossos clientes e usuários.

Métodos e ferramentas: Para nos ajudar a construir os entregáveis de cada etapa, o b_thinking descreve diversos métodos e ferramentas com suas respectivas instruções de uso.

Templates e guias: E para facilitar a execução das etapas, o b_thinking tem templates e guias de algumas ferramentas. Estes materiais são adaptados para os bridgers, mas você pode utilizá-los como ponto de partida.

Ficou interessado? Então vem conferir o material completo no nosso site do b_thinking e depois nos conte o que você achou!

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post B_thinking: o modelo de processo de UX do Bridge, agora para todos! apareceu primeiro em Laboratório Bridge.

Vamos construir uma paleta de cores acessível?

Entenda como fazer uma paleta de cores incrível (e como fizemos isso no Bold, nosso design system próprio)

Escrito por Laís Eing, designer no Laboratório Bridge.

Sabe aquela sensação de alívio, quando você sabe que tem algo errado e finalmente descobre o que é? Foi assim quando percebemos por que nossas paletas de cores precisavam mudar.

Apesar de possuirmos uma identidade visual que representa o Bridge muito bem, sentimos que faltavam algumas coisas para essa identidade ficar completa.

3 passos para sua marca ter uma identidade visual forte

No desenvolvimento do Bold, nosso design system, pesquisamos e incluímos requisitos de acessibilidade AA, nível intermediário da WCAG – Web Content Accessibility Guidelines, ou Diretrizes de Acessibilidade para o Conteúdo Web.

Foi quando sentimos a inconsistência e falta de acessibilidade de nossas cores. Então, nos aprofundamos nas pesquisas e buscamos a melhor forma de construir uma paleta de cores acessível para o nosso design system.

Hoje, o Bold possui mais de 6 mil usuários, com quase 13 mil sessões realizadas. E é a partir da construção dele que formulamos essas dicas pra você.

Não importa se você está refazendo sua paleta de cores ou criando uma do zero, esse conteúdo vai te ajudar a fazer isso com acessibilidade

#1 Tenha bases teóricas para seu desenvolvimento

Ninguém precisa nascer sabendo fazer tudo — ainda mais no design, uma área onde as mudanças e melhorias são a constante. Por isso, não tenha medo de buscar bases teóricas para o seu trabalho!

Na concepção das paletas de cores do Bold, os artigos que mais utilizamos foram esses dois:

• Re-approaching Color, por Kevyn Arnott
• Designing Systematic Colors, por Jeeyoung Jung

Com a ajuda desses conteúdos e a definição dos nossos objetivos (algo muito importante pra você ter em mente!), concordamos que as paletas de cores deveriam ser consistentes, acessíveis, e pudessem ser utilizadas de modo inverso, no famoso dark mode.

Tendo um conhecimento maior sobre o assunto, você não fica só torcendo para estar acertando na paleta: você terá informação suficiente pra saber que está arrasando!

Alguns links extras que também podem te ajudar:

• Curso Web Accessibility, fornecido pelo Google
• Inclusive components, um blog dedicado exclusivamente ao assunto

#2 Garanta o contraste ideal entre as cores

No desenvolvimento do Bold, utilizamos cores para representar status de elementos interativos, alertas, e enfatizar conteúdo visual e de texto. Ou seja, não escolhemos nossas cores só pelo valor estético. Elas também são utilizadas para informar.

E para que uma paleta de cores seja informativa para todos os usuários (portanto, acessível), ela precisa estar no contraste correto. Afinal, você não quer que as pessoas deixem de clicar nos seus itens por não conseguir enxergá-los, certo?

No Bold, cada paleta de cor foi dividida em 10 níveis para que pudéssemos ter uma gama de cores variada, que vai de pouca a muita luminosidade.

Começamos escolhendo a cor primária no nível 40, considerando um contraste maior que 4.5:1. Depois, mantendo a tonalidade (com pequenas variações, se necessário, para aprimorar o visual), criamos as cores com mais e menos luminosidade

Se você decidir manter esse padrão, os níveis de 10 à 40 alcançam um contraste mínimo de 4.5:1 em fundo branco. Já os níveis de 70 à 100 têm o mesmo contraste mínimo em background escuro.

#DicaExtra: Use o Mad Science Colors para visualizar os contrastes

Proporção de contraste com fundo branco na ferramenta Mad Science Colors

Com isso, conseguimos garantir que os nossos componentes tivessem contraste suficiente, utilizando qualquer cor primária.

Diferentes cores primárias mantém o mesmo contraste

#3 Não use a cor como único elemento de informação

Pode parecer uma contradição com o item anterior, mas não é.

Mesmo garantindo a proporção de contraste ideal das cores, as cores não podem ser sua única fonte de informação. Considere ícones, elementos textuais e ênfases visuais para informar o usuário

Todos esses elementos juntos devem passar sua informação de maneira clara e acessível. Se quiser saber mais sobre como consideramos essas interações no Bold, acesse este artigo.

#4 Tenha referências para seu trabalho

Se você sabe o que quer transmitir com suas cores e como fazer isso de forma acessível, já é meio caminho andado. Mas as vezes, o bloqueio criativo simplesmente vem, e você já nem lembra daquelas aulas de círculo cromático dos tempos longínquos da faculdade!

Pra ajudar nessas situações, disponibilizamos nove paletas de cores no Bold, que é open source (ou seja, gratuito)! Você pode acessá-los e utilizar junto aos componentes, ou em qualquer projeto pessoal.

Se preferir, você também pode usar nossa paleta de cores como base e testar alterações. É só acessar este link pra ver essas lindezas.

Temos um orgulho danado delas

[BÔNUS] Evite retrabalho no Dark Mode

Quando pensamos em incluir a versão “dark UI” em nossos projetos, queríamos simplificar a inversão e evitar a criação de novas paletas para cada cor. Se você fizer isso, padroniza suas paletas e evita um retrabalho grande.

A forma mais fácil que encontramos foi simplesmente inverter a paleta de cores. Testamos o funcionamento das paletas até chegar em um resultado satisfatório, onde podemos transformar qualquer produto que utiliza o Bold de light para dark.

Você pode ver como isso funciona na prática e se inspirar no site do Bold!

Criar uma paleta de cores acessível para um design system open source foi uma jornada desafiadora, repleta de testes e muitas, muitas mudanças. Mas o resultado compensou, e esperamos que as dicas que resultaram desse processo também tenham te ajudado.

Testou as paletas do Bold e tem dúvidas ou feedbacks? Manda pra gente! Aqui no Bridge, Compartilhar Dá + XP.

Pra sintetizar, para construir sua paleta de cores acessível:

1. Tenha bases teóricas para seu desenvolvimento
2. Garanta o contraste ideal entre as cores
3. Não use a cor como único elemento de informação
4. Tenha referências para seu trabalho
5. Evite retrabalho na versão dark mode

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post Vamos construir uma paleta de cores acessível? apareceu primeiro em Laboratório Bridge.