– 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.

Website Flower4You

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

  1. Os usuários podem encontrar o produto que estão procurando?
  2. Os usuários entendem como adicionar itens ao carrinho?
  3. Existem partes do fluxo de checkout com as quais os usuários têm dificuldades?
  4. Os usuários podem navegar facilmente para diferentes partes do site a partir da página inicial?
  5. 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.

Persona Flower4You
User Journey - Flower4You

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.

Sitemap Flower4You
Paper wireframe Flower4You

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.

Digital wireframe Flower4You

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.

Low-fidelity prototype Flower4You
Usability study Flower4You

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.

Mockup 1 Flower4You
Mockup 2 Flower4You

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.

Screen size Flower4You
high-fidelity prototype Flower4You

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.

Accessibility considerations Flower4Yoy
Final Flower4You

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

Next steps Flower4You

Vamos Conversar?  

Se tens um projeto em mente ou está simplesmente interessado em saber mais, não seja tímido. Aguardo o teu contacto!