Redesenhando um website responsivo: desafios e aprendizados pt.1
Esse texto é sobre meu primeiro projeto real dentro do Instituto Taqtile.
Contexto inicial: um breve resumo
Tudo começou em agosto de 2022, quando passei no processo seletivo do Instituto Taqtile para me capacitar na área de UX/UI Design.
No primeiro mês dentro do Instituto passei pelo onboarding, um período de imersão intenso e frutífero em boas práticas de design.
Logo em seguida, comecei a participar do meu primeiro (e grande) desafio: o projeto de redesign do site da Pill, uma startup do segmento dark pharmacy.
Primeiros passos: reuniões, pesquisas, estudos.
O pontapé inicial do projeto foi a reunião de kick-off, onde pude conversar com o cliente e entender mais sobre a Pill.
Kick-off é o ponto de partida para um projeto. É o momento em que todos envolvidos no time alinhamos os objetivos, escopo, prazos e expectativas junto do(s) cliente(s).
Depois desse alinhamento e com alguns insights em mente, dei início à Arquitetura de Informação: esbocei o que seria a estrutura do site atual — sempre com o auxílio da minha mentora @Paola, uma das melhores designers que já conheci — com a finalidade de entender a navegação, identificar as funcionalidades e o que poderia melhorar na experiência do usuário com o redesign.
Durante esse período participei de dailies (reuniões diárias para atualização do status das atividades), dinâmicas de escopo (documento que reúne o que ficou acordado de funcionalidades, em detalhes) e estudei mais boas práticas de design.
Dois tipos de pesquisas me auxiliaram bastante no processo:
- A Desk Research — que consiste em pesquisar informações e dados do segmento do projeto em fontes confiáveis, para assim tomarmos decisões de forma fundamentada.
- O Benchmarking que é um levantamento de referências (benchmarks) relevantes e aplicáveis ao projeto, podendo ser do mesmo segmento, de segmentos parecidos ou até mesmo diferentes. Essa atividade é importante, não só por ajudar a identificar tendências e convenções como também oportunidades de inovação e melhorias gerais à experiência. Aqui no caso da Pill, por exemplo, olhamos para o setor Pet e Varejo que trabalham com compras recorrentes.
Dinâmica de Look&Feel
Voltando a falar das atividades de design, com certeza a dinâmica que eu estava mais ansiosa e animada para fazer era a de Look&Feel. Essa dinâmica consiste em entender como os clientes desejam que fique a “carinha” do site, ou seja, a aparência e sensação que o redesign irá causar.
Como funciona:
• Primeiro momento — Por já existir um site, começamos pegando prints das telas atuais para coletar o que o cliente gostava ou não gostava e assim saber quais características deveríamos manter.
• Segundo momento — Fizemos um moodboard contendo exemplos e inspirações de diferentes estilos visuais para que o cliente pudesse apontar qual deles melhor transmitia o que eles querem para o novo site.
• Terceiro momento — Por fim, a partir dos dados coletados dos outros dois momentos acima, desenvolvemos duas propostas de interface, cada uma aplicada a 2 tipos de tela (home e página do produto). Apresentamos ao cliente, que assim decidiu qual delas seria o norte que deveríamos seguir.
No quesito desafios e aprendizagem, a dinâmica de Look & Feel foi muito significativa pra mim, pois consegui trabalhar a comunicação, ansiedade e nervosismo de apresentar e explicar os porquês de cada decisão de design tomada.
Planejamento é super importante!
Antes de continuar, não posso esquecer de mencionar esta atividade: o planejamento.
Tive dois desafios no projeto que são pontos significativos melhorar:
- Reconhecer o meu ritmo e saber como direcionar esforços para cada tipo de tarefa.
Às vezes eu estimava que gastaria X tempo para concluir uma atividade e no final acabava gastando o dobro ou até mesmo menos do que o necessário. Foi assim que percebi que identificar e aprimorar o meu ritmo era importante para criar estimativas mais realistas.. - Saber priorizar cada atividade que precisa ser feita.
Às vezes eu focava em terminar tarefas que eu tinha facilidade e acabava atrasando o início da tarefa que precisava ser entregue naquela semana.
Voltando à Arquitetura: os Wireframes
Com a definição estética concluída, voltei à etapa de Arquitetura, dessa vez olhando separadamente cada tela.
Agora era o momento de dar forma às informações dentro delas, de um jeito organizado e intuitivo, sem se preocupar com cores, tipografia ou qualquer outra característica visual. A esse “esqueleto” damos o nome de Wireframe.
A ideia é ter uma representação visual clara e estruturada do conteúdo, que possa ser compartilhada com stakeholders antes de ir pro design final.
Utilizar a abordagem “mobile first” foi um dos desafios desta etapa, porque precisei pensar em como encaixar os elementos essenciais de modo que coubessem na tela de um aparelho celular.
Fazemos assim porque o espaço é mais restrito e limitado. Se nele couber, com certeza vai caber em uma tela maior! Além disso, muitos usuários hoje acessam pelo celular, portanto é importante garantir que nele a experiência e o visual estejam “redondinho”, funcionando, ainda que o layout seja responsivo.
O que também dificultou no começo foi não ter uma percepção de grid e não pensar na construção dos componentes dentro de contêineres, que trariam consistência aos layouts.
O segundo desafio foi pensar em tooodos os passos do usuário, as situações possíveis de existir no site e as diferenças entre plataformas, como o comportamento menu, por exemplo. Tive muita ajuda e pedi muitos critiques nesses momentos aos mentores do Instituto.
Grand finale: os Layouts
Hora de dar vida aos wireframes! Porém, essa incrível jornada fica reservada para a parte 2. Fique atento e prepare-se para se surpreender!
