Página web UX/UI

Convertendo um toolkit físico, da Livework Studio, em uma interface web

Em 2016 participei de um workshop de Design de Serviço, realizado pela Livework Studio, onde de forma colaborativa aprendi algumas formas de utilizar processos estratégicos para diversos problemas ou mesmo melhorar um determinado produto ou serviço.

A minha função teve como base projetar uma página web com base em conceitos e princípios de UX e UI e as ferramentas utilizadas foram o Figma e o Miro.

Confira, abaixo, o processo de desenvolvimento do caso de estudo:

Nesse workshop, foi pra mim, o pontapé inicial para pensar o design como uma metodologia estratégica.

Acredito que ficaram os aprendizados adquiridos e que o meu futuro como profissional de design é o início de uma longa jornada. Vamos que vamos!

Mockup

Levei em conta que a página inicial tivesse poucos links em sua arquitetura da informação, desse modo considero que o usuário encontre o que deseja de forma rápida e concisa.

UI Design

O conceito do UI partiu da premissa o uso da mesma identidade visual da empresa da Livework Studio e que estão presentes em seu toolkit impresso.

Por meio de uma interface intuitiva, simples; porém harmoniosa, tornando a interface mais agradável possível para os usuários.

User flow e Cenários

Para possibilitar o entendimento do uso do site, foi criado um fluxo de mapeamento de rotas para um planejamento dos caminhos da jornada do usuário e compreender a sua experiência. O objetivo escolhido, como por exemplo, foi identificar os Perfis de Clientes de uma academia. Entendendo os perfis de clientes é possível conhecer o usuário quanto às suas necessidades e experiências desejadas e pensando num determinado cenário.

Cenário: Gustavo precisa deixar de ser sedentário, mas considera alguns exercícios físicos monótonos, desestimulantes e falta muito à academia.

Antes de apresentar o user flow foi necessário criar um briefing de plano de ação a fim de organizar e detalhar as atividades do cenário pensado:

Minhas etapas

Processo de Design

Antes de iniciar o projeto optei por utilizar o processo do Duplo Diamante, um framework utilizado pela Design Council’s que possui algumas etapas a serem seguidas, como por exemplo: Descobrir, Definir, Desenvolver, Entregar; que me ajudou a identificar as necessidades do usuário, suas iterações e compreender as fases divergentes e convergentes usadas no desenvolvimento de um projeto ou serviço.

Voltar

Estratégia de Pesquisa

Desk Research

Ao entender o que as práticas usadas no mercado e o que está sendo praticado a respeito do mesmo assunto abordado ou em projetos similares afim de definir o que deve ser pesquisado e como entender as necessidades dos usuários:

Métodos e Processos de UX
Inspiração em Conceitos
Visão geral sobre os processos de UX

Análise do toolkit

Separando os cards impressos para se ter uma visão geral das ferramentas mais usadas em UX

Leitura de conceitos de cada elementos para aprofundar e estar mais próximo das boas práticas de UX

Persona

A partir do User Flow construí uma persona, que serviu como arquétipo para ajudar esses possíveis designers, desenvolvedores, stakeholders possam compreender as motivações do seu usuário:

Mapa de Stakeholders

Com o mapa de stakeholders foi possível visualizar a troca de valores que usuário poderia ter com as partes interessadas. O usuário assume o centro do mapa - ficando círculo (A) e quanto mais relações de troca que o usuário tiver com outros atores da experiência - círculos (B) e (C) permitindo visualizar as suas interações humano-humano e humano-máquina.

Mapa de Stakeholders

Mapa de Rede de Valor (A)
Mapa de Ecossistema (B) e (C)

Solução

Sketches e Wireframes

Realizei alguns rascunhos para definir telas e descobrir insights que me ajudasse na melhor experiência que o usuário poderia ter e para me auxiliar no alinhamento de elementos textuais e possíveis aplicações de imagens foi utilizada um grid com 10 colunas. Abaixo estão as fases dessa etapa:

Sitemap

Com este grid de 10 colunas, optei que a tela possuísse uma linguagem visual padrão em todas as telas do site, permitindo assim; uma distribuição mais uniforme e um equilíbrio visual.

Aprendizados

Reflexões e Questionamentos

Transformar um toolkit impresso em uma página web com certeza me fez refletir que eu poderia usar outros métodos não utilizados, como por exemplo, realizar entrevistas de profundidade com usuários - designers e desenvolvedores - fazer alguns testes com esses mesmos usuários, para compreender se realmente, a função da página e algumas ações faziam sentido.

Durante a execução do projeto, a ideia inicial do projeto em uma em versão digital seria uma ideia realmente interessante e cheguei a me questionar como faria, em vários momentos, um produto que fosse utilizável e de fácil entendimento.

Registro

Essa foi a minha turma na participação no workshop na Livework Studio, realizada em 2016, com foco em Design de Serviço.