Responsive Design
NESPRESSO
“Não vendemos café, vendemos uma história, e cada blend de café tem uma.
Nossa promessa é entregar experiência”, explica Martin Pereyra.
A marca tem produtos que permitem que o consumidor replique essa
experiência em casa, com as máquinas e as cápsulas Nespresso.
O DESAFIO
O maior desafio é trabalhar com uma marca de luxo
e antecipar os desejos dos consumidores oferecendo uma nova experiência.
MINHA FUNÇÃO
Desenvolver o projeto através do Mobile First utilizando os princípios de Atomic Design.
PROCESSOS
EXPERIÊNCIA ATUAL DESKTOP / MOBILE
• As informações estão muito próximas.
• A um vazio do lado direito do site.
• As informações estão diferente entre as versões.
• O usuário precisa passar por 3 a 4 telas para saber mais informações sobre o produto.
• Alguns botões fazem a mesma função.
• A quantidade escolhida do produto fica salva no botão.
• 3 elementos em um mesmo botão deixa o usuário confuso.
PESQUISA
Utilizei para fazer a pesquisa a página oficial da Nespresso do Facebook e a página do Reclame Aqui.
PERSONAS
JORNADA DO USUÁRIO
MELHORIAS APONTADAS
Principais pontos levantados de cada persona em sua jornada.
OBJETIVOS DEFINIDOS FORAM:
• Reorganizar as informações dos produtos deixando mais claras.
• Redefinir as funções dos botões.
• Aplicar as mesmas informações para toda as versões.
• Redefinir a hierarquia dos conteúdos.
• Trazer as informações sobre os produtos.
• Reduzir o número de telas.
MIND MAP
SKETCH
WIREFRAME PAPEL
ATOMIC DESIGN
WIREFRAME EM ALTA FIDELIDADE
Depois de validar o protótipo de papel iniciei a construção do wireframe de alta fidelidade.
WIREFRAME MOBILE
WIREFRAME TABLET / DESKTOP
USER FLOW
PROTÓTIPO MOBILE
INTERAÇÕES
STYLE GUIDE
NAVEGUE PELO PROTÓTIPO
↓
DESIGN VISUAL
DESIGN VISUAL TABLET / DESKTOP
OUTROS PROJETOS ↓
