– Estudo de Caso
Flower4You
Flower4You é uma floricultura que oferece opções de entrega. O usuário típico tem entre 25 e 55 anos, e a maioria dos usuários são profissionais ocupados e geralmente compram flores para amigos e familiares. O objetivo do Flower4You é tornar as compras divertidas, rápidas e fáceis para todos os usuários.
Problema
Os sites de compras online de flores têm designs confusos, sistemas ineficientes para navegar pelos produtos e processos de checkout confusos.
Objetivos
Criar o site da Flower4You amigável, com uma navegação clara e um processo de checkout rápido.
Duração do projeto
Outubro a Novembro de 2021
Minha função
UX/UI designer
Responsibilidades
Realização de entrevistas • Wireframes em papel e digital • Prototipagem de baixa e alta fidelidade • Realização de estudos de usabilidade • Contabilização de acessibilidade
Design Process – Design Thinking
Empathize
Define
Ideate
Prototype
Test
01. Pesquisa do Usuário
Conduziu entrevistas com usuários, que posteriormente transformaram mapas de empatia para melhor direcionar o usuário e suas necessidades. Descobrir que os usuários gostam de enviar flores e achar o processo de compra online uma atividade divertida e relaxante.
No entanto, muitos sites que vendem flores online são confusos para navegar ou frustram muitos usuários. Isso tornaria uma experiência normalmente agradável um desafio para eles, derrotando seu propósito de lazer.
Questões de entrevista
- Os usuários podem encontrar o produto que estão procurando?
- Os usuários entendem como adicionar itens ao carrinho?
- Existem partes do fluxo de checkout com as quais os usuários têm dificuldades?
- Os usuários podem navegar facilmente para diferentes partes do site a partir da página inicial?
- Os usuários podem criar uma conta para comprar?
Pontos de dor
Navegação: os designs costumam estar com muita informação, o que resulta em navegação confusa.
Interação: Pequenos botões dificultam a seleção de itens, o que às vezes leva os usuários a cometer erros.
Experiência: os sites não oferecem uma experiência de navegação envolvente.
Persona
Martha é uma trabalhadora ocupada que precisa de um processo de checkout rápido e intuitivo no site porque deseja que as compras online sejam sem stress.
Mapa da jornada do usuário
Criei um mapa da jornada da experiência de Martha para ajudar a identificar possíveis pontos problemáticos e oportunidades de melhoria.
02. Iniciando o projeto
Criei sitemaps, usei wireframes em papel e digitais, e protótipos de baixa fidelidade para testar ideias de design e fluxos de usuários. Realizei também um estudo de usabilidade para testar a “experiência inicial do produto”.
Sitemap
A dificuldade com a navegação no site era um ponto de dor primário para os usuários, então usei esse conhecimento para criar um mapa do site.
Meu objetivo era tomar decisões estratégicas de arquitetura de informação que melhorassem a navegação geral do site. A estrutura que escolhi foi projetada para tornar as coisas simples e fáceis.
Wireframe em papel
Como os clientes da Flower4You acessam o site em vários dispositivos diferentes, comecei a trabalhar em designs para tamanhos de tela adicionais para garantir que o site fosse totalmente responsivo.
Wireframes digitais
A mudança do papel para os wireframes digitais facilitou a compreensão de como o redesenho poderia ajudar a resolver os pontos problemáticos do usuário e melhorar a experiência do usuário.
Priorizar a localização de botões e a colocação de elementos visuais na página inicial foi uma parte fundamental da minha estratégia.
Protótipo de baixa fidelidade
Para criar um protótipo de baixa fidelidade, conectei todas as telas envolvidas no fluxo do usuário principal de adicionar um item ao carrinho e fazer o check-out.
Nesse ponto, recebi feedback sobre o posicionamento de botões e a organização da página. Certifiquei-me de ouvir os comentários e implementei várias alterações em locais que abordavam os pontos problemáticos do usuário.
Estudo de usabilidade
Conduzi estudos de usabilidade para ajudar a guiar designs de wireframes para maquetes. Também usei um protótipo de alta fidelidade para revelar quais aspetos das maquetes precisavam de refinamento.
03. Refinando o design
Com base nos insights do estudo de usabilidade, crio maquetes e protótipos de alta fidelidade para testar ideias de design e fluxos de usuários.
Mockups
Uma das alterações que fiz foi adicionar a opção alterar a quantidade de itens em uma opção de quantidade usando uma opção simples de “botão” e adicionar a caixa de seleção de tempo de entrega. Isso permitiu aos usuários mais liberdade para editar opções sem passar por um processo complicado para opções de escolha.
Para tornar o fluxo de checkout ainda mais fácil para os usuários, adicionei “breadcrumbs” que permitia que os usuários voltassem ou avançassem.
Variações de tamanho de tela
Incluí considerações para tamanhos de tela adicionais em meus modelos com base nos wireframes anteriores. Como os usuários compram em uma variedade de dispositivos, achei importante otimizar a experiência de navegação para vários tamanhos de dispositivos, como telemóvel e tablet, para que os usuários tenham a experiência mais tranquila possível.
Protótipo de alta fidelidade
O protótipo de alta fidelidade seguiu o mesmo fluxo de usuário do protótipo de baixa fidelidade e incluiu as alterações de design feitas após o estudo de usabilidade, além de diversas alterações sugeridas pela equipa.
Considerações de acessibilidade
As pessoas merecem igual acesso à informação, serviços e produtos, razão pela qual a acessibilidade é tão importante.
Resultado final
04. Daqui para frente
Impacto
Os usuários compartilharam que o design era intuitivo para navegar, mais envolvente com as imagens e demonstrava uma hierarquia visual clara.
O que aprendi
Aprendi que mesmo uma pequena mudança de design pode ter um grande impacto na experiência do usuário. A lição mais importante para mim é sempre focar nas necessidades reais do usuário ao apresentar ideias e soluções de design.
Próximos passos
