rogerweikers

Visão Geral Aimores Telesys Sindilub Petrol Magik JC Galeria RW Estúdio Contato

Visão geral dos projetos de UX design:

Rogério Weikersheimer - Bem-vindo ao meu portfólio de UX Design e Arquitetura da Informação.

Nessa sessão independente, trago exemplos de cases desenvolvidos para alguns dos meus clientes: Aimorés, Telesys, Sindilub, Petrol, Magik JC e um projeto pessoal para a minha própria galeria de arte.

Sou formado pelo curso Google UX Design e, junto ao meu background em gestão de branding, pude entender que não podemos "agradar" somente o usuário final e nem ao cliente que nos contratou para a criação do produto. As engrenagens desta peça são sensíveis e sutis, passando também pelas exigências e tendências do mercado, assim como valores e costumes culturais.

Para a parte operacional, uso ferramentas como: Microsoft Office, Adobe (XD, Illustrator e Photoshop), e Figma. Para a gestão do desenvolvimento, uso os conceitos do Scrum para gerar os backlogs e, através de ciclos de sprint, alinhar os times de Des/Dev Ops ao timebox do planejamento.

A seguir, listei as prioridades do processo de criação (product discovery) e gestão (continuous delivery) que passo ao time, quando atuo como o scrum master de um projeto:

1 - Fluxo e arquitetura da Informação - sou naturalmente "viciado" em organização, então exploro esse dom para ordenar o sistema (páginas, links, pop-ups, menus, etc.), focando no desempenho do produto.

2 - Lógica e Intuição - respeito demais as limitações do usuário final e, na maioria das vezes, meu público alvo são pessoas mais velhas e não tão acostumadas com o ambiente web, por isso tamanho cuidado no poder de dedução dos comandos.

3 - Leitura e Contraste - Acho lindíssimo um layout com fontes pequenas, tons leves de cinza e pouco contraste, porém não é funcional. Busco sempre me lembrar que o usuário pode estar com uma visão limitada, seja por saúde ou pelas circunstâncias do ambiente em volta dele.

4 - Responsividade - Nem sempre é suficiente redimensionar um projeto para adaptá-lo a vários formatos diferentes. É preciso saber editar o conteúdo para reduzir ou ampliar, de acordo com a proporção e tamanho da tela.

5 - Cliente, Marca e Mercado - Não podemos deixar que a experiência do usuário dite as regras. Sim, o app/site é feito para o próprio, mas é fundamental entender o briefing do cliente, suas diretrizes de marca e como seus concorrentes agem no mercado.

6 - Beleza, Animação e Acabamento - O apelo visual é extremamente importante, porém não sustenta sozinho o produto. Vejo como uma linda embalagem com forte poder de atração.

Abaixo segue um resumo das etapas, baseado na página de UX do meu portfólio de branding:

Etapas de gestão e criação:

Empatizar - Entender qual o perfil do usuário final do produto, sua história, suas necessidades, suas angústias e o seu dia a dia. Criação de personas para facilitar a identificação, "User Stories" e "User Journeys", que podem ser desenhados como storyboards (big picture).

Definir - Estabelecer a meta principal através da declaração do "problema chave" do usuário. É fundamental traçar um mapa com todos os objetivos do projeto, assim como as prioridades e a hierarquia de todas as ações.

Idealizar - Análise da concorrência (Competitive audit), definição dos maiores desafios a serem consertados (Pain points), desenhar um mapa de afinidades, rascunhar as primeiras ideias (crazy-8s), criar um storyboard das telas do aplicativo (close-up) e partir para os primeiros wire-frames.

Prototipar- Definir o fluxo e a arquitetura da informação, para qual dispositivo o layout será formatado e a partir daí expandir ou reduzir as proporções (progressive enhancement / graceful degradation), quando necessário. Desenhar os mockups em baixa e alta fidelidade e linkar todos os botões para que o usuário possa testar o protótipo (ou já um possível MVP).

Testar - Aplicar o mindset Agile através dos seus frameworks, visando o plano de pesquisa do produto, sendo assim, cada usuário marcará suas respostas e a partir daí, vai permitir o estudo de usabilidade (monitorado ou não). Analisar cada caso de uso (use case) e buscar novos insights para a melhoria das funções.

Retornar - A partir desta etapa, o designer volta a desenhar as telas e pode, junto ao seu squad, organizar mais uma sessão de "sprint" para uma maior concentração de soluções. O processo se repete até a sua conclusão. UX design não tem fim, é um constante aprimoramento.

Personas:

Em tese, todo e qualquer projeto de usabilidade deve ser confeccionado para TODAS AS PESSOAS. É importante pensar tanto na diversidade quanto na acessibilidade que o aplicativo ou site vai oferecer. Porém, sempre existe um público-alvo mais direto, o qual se torna a "persona" - uma espécie de personagem fictício que ilustra o usuário final do projeto.

Por exemplo, uma loja online de brinquedos é focada no público infantil, só que os pais que provavelmente efetuarão a compra - ou seja, pode-se definir dois tipos de personas, ou ainda mais, como os avós, que já são pessoas mais velhas e não tão ágeis na internet. Dependendo do caso, nesse mesmo exemplo, pode-se adicionar como target os produtores e revendedores dos brinquedos.

Observação: todas as personas apresentadas neste portfólio são fictícias. As pessoas retratadas nas imagens são fotos e nomes aleatórios que peguei na internet, que nada tem a ver com os personagens inventados para ilustrar o usuário final do produto. Caso você seja alguma dessas pessoas das fotos e se incomode com isso, por favor me contate que trocarei imediatamente.

Wire-frames:

Wire-frames (ou aramados em português) são uma primeira fase antes de desenhar o produto final. Este “rascunho” facilita muito o estudo das ações e links antes de se gastar tempo com detalhamento dos elementos do design gráfico. Essas telas formam um mockup ou protótipo de baixa fidelidade.

A diferença do mockup para o protótipo é a funcionalidade. O mockup são telas “soltas”, ainda sem função. Em um protótipo já funcionam todos os botões, links e outras ações de animação e transição. Ambos podem ser feitos para qualquer formato.

Responsividade:

Um projeto responsivo é aquele que é desenvolvido para se encaixar da melhor forma possível no formato do dispositivo. O designer deve criar variações para que a informação se adapte às restrições de tamanho. Antigamente a informação era feita para computador desktop, daí quando reduzida (apenas proporcionalmente), a leitura ficava mínima no celular, totalmente ilegível.

Os formatos de responsividade podem ser inúmeros – desde uma TV de 60 polegadas até um smartwatch – passando por uma tela no painel de um automóvel ou até de uma geladeira. Um mockup de alta fidelidade já mostra o design muito semelhante ao produto final, assim como seu protótipo.

Considerações finais:

Vejo centenas de portfólios de UX o tempo todo, alguns com designs fantásticos, efeitos de animação e transição super modernos, fotos e ilustrações super bem escolhidas, tipografia impecável... porém vejo muito pouco a estrutura do projeto como um todo. Raramente aparece a razão e o target do produto, a arquitetura e a lógica de navegação, assim como seus pontos fracos a serem examinados e corrigidos.

Justamente essa é a parte que mais me encanta no processo todo. Apesar de eu ter um diploma em design gráfico, acredito que o UI é apenas uma das engrenagens desse motor. Busco oportunidades para trabalhar na espinha dorsal do projeto, intercambiando diretamente com o cliente e trazendo sugestões e soluções para o melhor funcionamento da peça, inclusive seu branding, sua comunicação e seu poder de fogo.