Atuei em um banco como UX e Visual Designer, onde fui responsável por definir padrões de aplicação visual e diretrizes de acessibilidade para a solução digital. O produto digital é voltado para o segmento de empréstimo consignado, oferecendo o produto para aposentados e pensionistas do INSS, sendo o principal público, servidores públicos (federais, estaduais e municipais) e profissionais das Forças Armadas.

O que é Acessibilidade

De acordo com a WCAG, Acessibilidade na Web é promover o acesso e a compreensão em produtos digitais, sites ou ferramentas que atendam todas as pessoas, independente de suas habilidades ou deficiências.

Mais especificamente, as pessoas podem:

• perceber, entender, navegar e interagir com a Web;
• contribuir com a Web;

Quanto mais acessível for, mais pessoas vão poder utilizar.

A experiência do usuário deve passar por pessoas com vivências, características e necessidades diferentes. Sendo assim, quando definimos um público-alvo do produto e nos atemos a ele para projetar, acabamos fazendo um recorte e limitando o produto.

Em 1987, o arquiteto Ron Mace criou os sete princípios do Desenho Universal, para que todos, independente da idade, habilidade ou status, tenham acesso ao design.

Pensando no usuário

Antes de tudo, pense no seu usuário e em todos que podem querer utilizar seu produto e quais as barreiras de acesso eles podem encontrar. Não leve estereótipos para o projeto, mas faça perguntas.

• Como esse produto é ofertado hoje?
• O que estou agregando que vai facilitar a vida dos usuários?
• Quais são os seus hábitos digitais?

Os idosos são digitais, 80% das pessoas acima de 60 anos acessam a internet todos os dias ou quase todos os dias. Eles buscam independência ao usar um produto, são familiarizados com termos digitais e utilizam aplicativos que nós também usamos.

Entretanto, com o avanço da idade, as nossas capacidades e habilidades motoras, acuidade visual, auditiva e cognitiva podem diminuir. Pesquisamos o usuário do Paraná Banco e percebemos que temos diferentes personas que utilizam o produto, então foi necessário rever algumas aplicações.

Para definir os critérios de acessibilidade das jornadas do banco, utilizamos o documento da WCAG.

Diretrizes de acessibilidade para o conteúdo da web

A WCAG 2.1 é o principal documento de acessibilidade na web. As diretrizes orientam como identificar e implementar em sites e produtos digitais, técnicas que tornam o conteúdo acessível.

Camadas de orientação da WCAG 2.1

As informações são segmentas pela WCAG em:

Os princípios do guia são a base do que precisamos para desenhar um projeto de design acessível.

Perceptível

As informações e os componentes da interface do usuário devem ser apresentados em formas que possam ser percebidas pelo usuário.

Operável

Os componentes de interface de usuário e a navegação devem ser operáveis.

Compreensível

A informação e a operação da interface de usuário devem ser compreensíveis.

Robusto

O conteúdo deve ser robusto o suficiente para poder ser interpretado de forma confiável por uma ampla variedade de agentes de usuário, incluindo tecnologias assistivas.

As 13 diretrizes fornecem objetivos básicos que se espera dentro de cada princípio. São agrupados por temas: imagens, vídeo, formulários, etc.

Os critérios são divididos em três níveis. São 78 critérios detalhados para cumprir cada diretriz. As descrições são claras e determinam os requisitos técnicos que devem ser seguidos e utilizados.

A documentação da WCAG é bastante densa e até mesmo complexa de entender. Para consulta, utilizamos o Guia WCAG criado pelo designer Marcelo Sales. Em formato de Toolkit, o guia apresenta todos os critérios com seu respectivo princípio e nível de acessibilidade.

Como implementamos no PB

Definimos as principais diretrizes e apresentamos para todo o capítulo de design. Para isso, consideramos o usuário e percebemos que precisávamos ser mais rígidos quanto aos critérios de navegação, hierarquia, legibilidade e contraste. Só então, aplicamos no Design System.

Acessibilidade na prática

O nosso produto não contemplava os critérios da WCAG de acessibilidade, o que o tornava excludente para um grande número de pessoas, como mostra a análise abaixo, feita na ferramenta Who Can Use.

Conseguimos melhorar a acessibilidade da solução fazendo a aplicação de critérios de nível A e AA. Isso permite que mais pessoas tenham uma boa experiência com o nosso produto e também facilitou a navegação dos usuários já clientes.

Links úteis e referências

WCAG 2.1 documentação completa em português.
Todos por acessibilidade portal dedicado às boas práticas de acessibilidade.
Guia WCAG material de fácil consulta para todos as diretrizes da WCAG, de forma resumida e com campo de busca.
Princípios do Design Inclusivo site com material que explica os sete princípios voltados principalmente para produtos digitais.

Acessibilidade Digital para todas as idades was originally published in rafaposer.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Em dezembro de 2019, assumi a posição, então inédita no Paraná Banco, de Visual Designer do CoE de Experiência. Nesse papel, minha responsabilidade foi criar padrões de interface e definir critérios de acessibilidade através do projeto do Design System, garantindo a consistência e qualidade da interfaces dos produtos digitais.

O Design System foi um grande desafio, pela complexidade e pela importância para o banco. Atuei liderando o projeto e a equipe, desde a criação do roadmap, desenvolvimento com fronts, apresentação do projeto para as equipes e lideranças e negociação com P.Os e B.Os para implementar.

Nosso objetivo principal foi garantir um padrão visual de qualidade e escalável em todas as etapas da jornada digital, seguindo critérios de acessibilidade e posicionamento de marca. Além de otimizar o tempo através do reaproveitamento de código e elementos de design.

Através de pesquisas, identificamos que a falta de padronização leva o usuário a sentir insegurança dentro da jornada e também dificulta sua curva de aprendizado. Estávamos em um cenário onde chegamos a ter etapas da jornada com mais de 10 telas diferentes para a mesma função.

Início do projeto e roadmap

Para iniciar o projeto, criamos um roadmap com todas as etapas macro e o que iríamos fazer em cada uma, incluindo uma pesquisa com os stakeholders para entender o nível de maturidade do time em relação ao Design System, o planejamento de horas para as pessoas dedicadas no projeto e alinhamentos com o time de front. Além do apresentado abaixo, fizemos uma planilha compartilhada com datas prévias e andamento do projeto por etapas detalhadas.

Otimização

O Design System depois de implementado gera um grande impacto na rotina das equipes que o consomem. Por ser um componente já pronto, o tempo de criação de uma interface reduz exponencialmente. O fator de reutilização também pode se aplicar no desenvolvimento e teste. A estimativa de tempo foi calculada junto com o capítulo de cada área.

Definições da estrutura e documentação

As primeiras definições foram as estruturais. Como documentação, optamos pelo figma, a ferramenta permite que o design system seja automatizado e segue as políticas de segurança exigidas pelo banco. Para a nomenclatura, utilizamos o modelo BEM, que facilita as mudanças na interface e torna o código mais eficiente.

A estrutura define a utilização de grids fluídos, desenhados com breakpoints de 8px. Foi considerado as telas mobile para implementação inicial e documentado para tablet e desktop.

Na definição da paleta de cores, começamos pelas cores Primárias, Secundárias e Terciárias. Toda a escolha de cor foi feita com base nos critérios de acessibilidade. Considerando que a persona do Paraná Banco é uma pessoa idosa e que seus dispositivos muitas vezes não tem boa resolução de tela, tivemos que ser ainda mais exigentes nessa decisão.

A documentação da paleta de cores também inclui de forma detalhada a aplicação de cada cor, bem como cores de feedback, paleta de temas e orientação de cores para os textos em backgrounds coloridos.

A próxima definição estrutural foi a escolha da fonte. Estudamos a compra de fontes digitais que atenderia nossas necessidades de interface e acessibilidade. Como nosso produto tinha passado recentemente por um rebranding, foi decidido manter a fonte Montserrat, já utilizada pela marca.

Estrutura de criação de componentes

Fizemos um modelo de canvas de documentação para ser seguido e preenchido quando um novo componente for criado. A estrutura de criação contempla todo o ecossistema de variação dos componentes. O documento serve para garantir que seja mantido o padrão de qualidade e abrangência total, considerando todas os cenários possíveis no contexto do nosso produto.

Usando o modelo abaixo, cada componente deve servir para um propósito único. O objetivo é diminuir a curva de aprendizagem do usuário na jornada, além de simplificar e padronizar a interface.

Desenho e documentação de componentes

A etapa de desenho e documentação dos componentes é onde mais tivemos volume de trabalho. Então, fizemos matrizes de priorização considerando todo o mapeamento de componentes feito inicialmente. A matriz com quatro quadrantes mostra o nível de necessidade e complexidade de cada componente, sendo que os mais necessários e menos complexos seriam desenhados primeiro.

Resultados

Todas as jornadas do produto consignado foram impactadas. Os times receberam a documentação para utilizar corretamente os componentes, excluindo margem para telas fora do padrão. As interfaces redesenhadas com o padrão do Design System tiveram uma melhoria muito grande em relação a acessibilidade, abaixo um exemplo antes e depois.

Próximos passos

O Design System é um projeto vivo, está sempre em construção. Para as próximas etapas, prevemos o desenvolvimento front-end, a criação do protótipo das interações, implementação em 100% do produto e o estudo para abranger outras áreas, como marketing, investimentos e sistema de vendedoras.

Todo o processo que contei aqui, para desenhar e documentar o Design System, levou em torno de quatro meses, bastante dedicação, algumas correções de rota, vários alinhamentos e alta expectativa. Porém, quando a gente vê o projeto ganhando forma e sendo implementado, a satisfação é enorme.

Construindo um Design System was originally published in rafaposer.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Entrei no curso de design da UTFPR em 2008, a grade curricular de então era focada à produção gráfica com alguns poucos conteúdos voltados para o digital. No entanto, foi uma ótima escola para os fundamentos e princípios de design, que são os mesmos tanto no digital quanto offline.

Até então eu já havia trabalhado criando estampas para uma loja de camisetas personalizadas, feito estágio em uma agência pequena com clientes locais, onde fui efetivada e fiquei por dois anos. Em 2012 entrei como estagiária na agência Marketdata, fui promovida assim que me formei.

Em 2014 percebi que precisava conhecer mais sobre o usuário para quem eu estava criando. Trocando ideia com outros designers, me recomendaram a pós em Design Centrado no Usuário na Universidade Positivo, teve um ano e meio de duração e foi muito, muito bom mesmo! A pós foi muito enriquecedora. Conheci ferramentas e metodologias novas, conteúdos ricos, professores muito bons, me mostrou como entrar em contato com o usuário e entender as reais necessidades dele, como resolver essa necessidade no projeto do produto e, depois, testar pra saber se está funcionando e o que não deu tão certo. Além de tudo isso, conheci pessoas incríveis, colegas que se tornaram amigos e até hoje são referências.

A Marketdata foi uma grande escola e onde consegui me desenvolver muito, foram seis anos e meio de muita ralação e aprendizado. Nesse tempo, atuei nas áreas de comunicação digital com foco em CRM e produtos digitais, como portais, landing pages e aplicativos mobile e de auto-atendimento. Tive a oportunidade de participar de projetos de grandes empresas nacionais e internacionais, como Volvo, Nissan, Renault, O Boticário, Samsung e NET.

Na agência, também fui supervisora de equipe para uma conta dedicada de uma das maiores redes de farmácias do Brasil, fazendo contato com cliente e atendimento, organizando estratégias de comunicação, pautas e supervisão de equipe. Além do técnico, foi muito importante desenvolver a comunicação, a auto-gestão e a capacidade de liderança.

Em 2019, entrei no Paraná Banco. O banco de 40 anos estava no início da transformação digital, mudando sua cultura e seu produto. Entrei para atuar no squad de marketing digital. Que loucura boa! Foi então que entrou na minha rotina a leitura de dados de conversão e funil do produto, criar estratégia de comunicação olhando primeiro o histórico do produto e atuar na metodologia ágil.

Ainda em 2019, eu migrei pro CoE de Experiência do Paraná Banco, assumindo o papel de Visual Designer. Essa história é longa, então vou contar no próximo post.

Como vim parar aqui was originally published in rafaposer.design on Medium, where people are continuing the conversation by highlighting and responding to this story.