YiApp e-commerce de roupas e acessórios

Contexto

O Processo

Pesquisa

Qual é o sentido de explorar esta solução? Quais interações do usuário estão envolvidas? Vejamos como os comportamentos e padrões habituais dos usuários podem ajudar a aplicar estes conceitos de design.

MÉTODO

• ENTREVISTAS DE USUÁRIO
• PESQUISA DE CAMPO

Objetivos

Para entender as necessidades do usuário conduzimos uma entrevista com usuários para identificar seu fluxo normal em um aplicativo, descobrir qual problema gostariam de resolver e entender como um aplicativo vestível aprimorado pode ajudar. Com a pesquisa tentamos identificar áreas de oportunidade para criar em nosso aplicativo.

Resultado

Graças a essa pesquisa pudemos identificar o caminho comum de um usuário para alcançar seu objetivo de compra. Com a pesquisa de campo pudemos identificar as áreas de oportunidade e do resultado surgiram temas como Múltiplos Endereços, Múltiplos Métodos de Pagamento e descobrimos que todo o processo de checkout de múltiplos cliques poderia ser simplificado em uma única visualização.

Criação de Personas

Mapa da Jornada do Usuário

Para empatizar com os usuários, também criamos mapas de empatia e um mapa de jornada do usuário para aprofundar em cada etapa pela qual passam nossas personas ao comprar um produto.

Fluxo do Usuário

Para entender como construiríamos a experiência projetamos os fluxos de usuário principais para o aplicativo Yi. O fluxo do usuário nos permitiu ver toda a experiência do aplicativo em um nível holístico e assim tomar decisões.

Design de Arquitetura

Uma vez reunidos os tópicos e identificados os fluxos de usuário, era hora de começar a criar um mapa de arquitetura de como a informação seria organizada no design; fizemos um brainstorming de ideias, separando o que não atendia aos objetivos e guardando para ideias futuras.

Após o brainstorming pudemos completar claramente a arquitetura de informação organizando cada visualização de acordo com seus dados, isso também nos permite escalar o aplicativo no futuro e dividi-lo em componentes tornando mais fácil iterar e melhorar se necessário.

Crazy Eight

Uma vez que tínhamos toda a informação pronta e organizada começamos a criar nossos mockups baseados em um exercício chamado "Crazy Eight", isso nos ajudou a estender o panorama de identificar diferentes formas de visualizações e com base nisso escolher um design final reunindo elementos das outras visualizações avaliando simplicidade, acessibilidade, inclusividade e finalmente o design.

Wireframes

Iterando nos wireframes em papel começamos a criar os wireframes digitais, isso nos ajudou a identificar espaços reais dentro de um dispositivo, também esclareceu nossas ideias de para onde o design final estava indo; nesta etapa aprendi que os elementos devem ser compreensíveis para todas as pessoas e não apenas para mim, então cada coisa que as pessoas não entendiam tinha um rótulo.

Protótipo de Baixa Fidelidade

Após confirmar nossos cenários começamos a montar alguns fundamentos do Yi, queríamos que o usuário escolhesse seu produto e o comprasse, como se cada passo fosse uma pequena parte do todo. Os wireframes de baixa fidelidade nos ajudaram a descartar alguns recursos que não eram tão fundamentais como a busca no carrinho de compras.

Plano de Testes de Usabilidade

Passamos vários participantes pelo nosso protótipo de baixa fidelidade para entender melhor seus padrões de interação. A cada um deles foi dada a tarefa simples de comprar um produto. Não era a tarefa difícil, mas era como eles pensavam através do processo de comprar um produto que nos interessava.

📝 Enquete de estudo de usabilidade de design

• ❓ Você achou fácil ou difícil comprar um produto? Se sua resposta for muito difícil ou moderadamente difícil, o que tornou isso difícil para você?
• ❓ Se você pudesse mudar algo sobre o processo, o que mudaria?
• ❓ Você achou fácil ou difícil adicionar o produto à sua lista de desejos?
• ❓ Acho fácil navegar no aplicativo. KPI
• ❓ Existem inconsistências dentro do app. KPI
• ❓ Imagino que a maioria das pessoas aprenderia a usar este app rapidamente. KPI
• ❓ Acho que usaria este app frequentemente. KPI

Durante a enquete aprendemos que o usuário esperava uma acessibilidade mais profunda que se traduz em navegação fácil e graças a isso surgiram temas e então as seguintes soluções até termos resolvido o problema.

Mockups

Após solidificar a estrutura fundamental, pudemos pegar o feedback de nossas sessões de teste e começar a formar nossos comps finais. Usamos cor com moderação em todo o produto para ajudar a comunicar elementos interativos ao usuário e guiá-lo sequencialmente para o objetivo principal.

Sistema de Design

Criatividade, Dinheiro e Frescor

A cor verde foi selecionada para mostrar criatividade e inovação em cada produto que é vendido, os cantos semicirculares representam diversão mas confiança por não serem tão circulares.

O logo da marca é uma criação de dois nomes Yohana Isaac, a sacola no carrinho é a identidade da marca pois objetivamente as compras no aplicativo podem ser organizadas por sacolas e então adicionar ao carrinho mas você também pode adicionar os produtos individualmente.

Protótipo de Alta Fidelidade

Conclusão

Yi é um aplicativo de varejo de vestuário multimarcas, multipagamento, multiendereço de envio e multiembalagem.