UM ESTUDO DE CASO COMPLETO UX/UI

A ideia do aplicativo de e-commerce, elaborado como estudo de caso, é não definir roupas por gênero, pois além de agregar valor ao consumidor fazendo com que ele possa explorar muito além do que é determinado pelas marcas. Além dessa ter sido uma dasmreclamações vistas sobre as aplicações similares, cada vez mais lojas vem defendendo o conceito de moda unissex ou agênero. É a partir da personalidade do consumidor que ele vai decidir se alguma peça lhe cai bem e se ele deve usá-la.

Behance
Dribbble
Figma
INTRODUÇÃO

De acordo com a publicação do site E-Commerce Brasil, durante a pandemia o Brasil foi o campeão mundial de downloads de e-commerce, e mesmo com a gradual flexibilização das medidas restritivas, os usuários de e-commerce no Brasil cresceram 23% nos primeiros sete meses de 2021 ante mesma etapa de 2020, dados adquiridos pela AppsFlyer.
Apesar disso, é necessário enfatizar que o nível de desinstalações é alto, e isso está diretamente ligado a usabilidade deficiente das aplicações e a falta de atrativos e diferenciais nelas.
Através de um estudo chamado “Adobe State of Content Report”, grande parte de usuários de e-commerce abandonam a aplicação se acharem seu conteúdo pouco atrativo ou sua interface mal planejada. Além disso, é necessário levar em conta a eficiência da aplicação e a demora em obter uma resposta.

ANÁLISE DE SIMILARES

Título: Dafiti (fonte: Techtudo)
Descrição: Aplicativo da famosa loja de calçados e moda. Permite que você navegue por mais de 600 marcas expostas, receba as últimas promoções e novidades diretamente no seu smartphone.
Data: Atualizado em 21 de setembro de 2021 – Versão 6.56.1
Sistema: IOS e Android

Apresentação geral/análise:
   O aplicativo da Dafiti tem como foco principal a venda de produtos de diversas marcas, principalmente peças de vestuário. Na sua tela principal é mostrado diversas ofertas, além de possuir um menu superior separando as categorias dentro da seção de gênero, feminino, masculino ou infantil. É apresentado, na grande maioria dos aplicativos, a separação por gênero, e tendo em vista as mudanças que ocorreram na nossa sociedade, isso é algo que está cada vez mais ultrapassado, pois roupas não definem.
   Além disso, foi observado que ao favoritar uma peça são necessárias pelo menos 4 ações para conseguir chegar até a página de favoritos. Isso poderia ser resolvido apenas com o uso de um menu de navegação na parte inferior, além de memorizar todo o caminho de volta, para que após acessar os favoritos, seja possível retornar e visualizar as peças anteriores.

Além de dar opções de login para o usuário, ele possui um cadastro simples, que exige poucas informações, apesar de não ser inclusivo ao pedir para determinar o sexo com apenas as opções de masculino e feminino.

Suas definições são de fácil acesso, sendo possível encontrar através do perfil do usuário, precisando de apenas dois cliques para chegar até elas. Além disso, os termos são de fácil compreensão ao usuário que está em dúvida.

Através do perfil também é possível ter acesso aos pedidos, aos produtos visualizados recentemente e os produtos que foram selecionados como favoritos. Porém, uma reclamação feita frequentemente pelos usuários do aplicativo através da App Store e da Play Store, é que o aplicativo desconecta o usuário toda vez que o aplicativo é fechado, e remove os produtos adicionados da sacola.

Sua tela de pesquisa tem o diferencial de pesquisa por foto, que não é presente em muitos aplicativos de compra.
Suas opções de filtro são amplas e faz com que a pesquisa do usuário por determinadas peças seja mais rápida, além disso possui diversas opções de ordenação.

Para concluir, ele tem um design clean, apesar de possuir uma página inicial um pouco confusa pela divulgação de promoções. A ausência de um menu inferior faz com que o acesso a algumas áreas da aplicação seja mais trabalhoso, precisando de mais cliques para ser encontrado. Possui seu UI o estilo Flat Design onde apresenta figuras planas, minimalistas, quase sem volume, sombra e textura.

Seus pontos positivos são: Gratuidade de download, entrega o que promete, interação do usuário com ofertas, pesquisa por imagens.
Seus pontos negativos são: Não notifica o usuário por interesse, não possui tutorial, não salva os produtos na sacola, desconecta o usuário da sua conta frequentemente.

Título: Farfetch (fonte: Techtudo)
Descrição: Aplicativo que permite aos usuários comprar produtos das boutiques ao redor do mundo, bem como acessar histórias editoriais sobre as locações das boutiques no globo.
Data: Atualizado em 21 de setembro de 2021 – Versão 2.93.0
Sistema: IOS e Android

Apresentação geral/análise:
   O app da Farfetch, assim como o da Dafiti, oferece ao usuário um catálogo com peças de diversas marcas, tendo como seu diferencial a oferta de peças de luxo com altos valores.
Logo ao entrar é oferecida uma experiência personalizada, porém, antes disso, é necessário escolher por um gênero, masculino ou feminino. Essa foi uma dentre as reclamações presentes na App Store, a ausência da possibilidade de transitar por ambos os gêneros, classificação essa que deveria estar obsoleta.

Para realizar o cadastro é bem simples, é necessário o fornecimento de poucos dados, porém não possui a opção para entrar através de uma conta já existente, por exemplo, Google ou Facebook. E para acessar funcionalidades como a wishlist, é preciso estar logado. Esta funcionalidade possui algumas reclamações devido ao limite de itens que podem ser inseridos nela, apenas 100, e após exceder esse número os itens “mais antigos” são excluídos. Uma reclamação pertinente dos usuários é também o fato de não ficar muito claro ao usuário o que ocorreu após a realização de uma compra, no caso a necessidade de um feedback ao usuário.

É possível realizar uma pesquisa direta, através de filtros, por produto. Mas os usuários frequentemente reclamam das poucas opções oferecidas pelo aplicativo.
Um grande diferencial do aplicativo da Farfetch é a implantação de um programa de fidelidade chamado ACCESS, onde basta realizar uma compra para estar participando, é necessário estar logado. Você é inserido em uma categoria de acordo com o valor da sua compra, e essa categoria oferece vantagens desde acesso antecipado a promoções até um personal stylish.

No geral, o design do aplicativo é bem simples, minimalista e elegante, dando destaque as fotos e cores das peças de roupa. Seu menu inferior possui uma representação icônica (pictogramas) que auxiliam na navegação dentro do aplicativo, além de ser usado em seu UI o estilo Flat Design, assim como o aplicativo da Dafiti, onde são usadas figuras planas, minimalistas, quase sem volume, sombra e textura.

Seus pontos positivos são: O rápido cadastro, sua interface amigável e simples, a experiência personalizada e a existência de um clube de benefícios. 
Como pontos negativos:  falta de interação do usuário com as ofertas, não possuir total clareza em suas atividades, wishlist com limite de 100 itens, poucas opções de filtro e separação por gênero.

Título: Pinterest (fonte: Techtudo)
Descrição:  É uma rede social de compartilhamento de imagens. O aplicativo permite que os usuários compartilhem e gerenciem imagens em categorias diversas, como moda, viagens, empreendedorismo, decoração e alimentação.
Data: Atualizado em 6 de outubro de 2021 – Versão 9.33
Sistema: IOS e Android

Apresentação geral/análise:
   O foco principal do Pinterest é o compartilhamento de ideias através de imagens e vídeos. Seu login é rápido e consiste no fornecimento de três informações pessoais, além da escolha dos seus interesses. Em sua tela principal são mostradas imagens de acordo com os interesses pré-estabelecidos pelo usuário na hora do cadastro, o problema é que existem muitas reclamações indicando que essa experiência personalizada não ocorre de fato.

Na aba salvos é possível encontrar uma espécie de perfil, com seu nome, foto e ideias que você salvou, além de poder organizar essas ideias por pastas, facilitando a procura no futuro. Esse é um dos pontos principais do aplicativo, além de ser o mais elogiado pelos usuários.

Na central de notificações é onde se encontra curtidas e comentários, mensagens de seus amigos e frequentemente são enviadas notificações com imagens que podem ser do interesse do usuário. Uma grande reclamação dos usuários é quanto ao chat oferecido pela plataforma, segundo eles, não é possível enviar uma imagem aos seus amigos através de uma mensagem, sendo necessário publicá-la para que outro usuário possa ver. Isso acaba comprometendo a experiência do usuário, tendo em vista que ele não pode compartilhar uma imagem sem que ela se torne pública. 

Através do botão criar é possível inserir suas próprias imagens e vídeos na plataforma, chamados de pins. Ao criar, você escolhe uma imagem, título e descrição, além da possibilidade de indicar um link para algum site.

Na aba de pesquisa é possível procurar por palavras-chave ou imagens, além de possuir sugestões de procura baseadas nas pesquisas populares do momento.

Por não ser ou oferecer as lojas uma área de e-commerce, o Pinterest acaba sendo um aplicativo apenas para obter inspiração, infelizmente, porque apesar de cumprir bem o prometido, acaba frustrando alguns usuários por não saberem onde encontrar as peças a mostra.

Seu design é clean e autoexplicativo, além de possuir o menu inferior para auxílio na navegação. 
Seus pontos positivos são: Rápido cadastro, a possibilidade de gerir múltiplas contas ao mesmo tempo e a organização de ideias por pastas. 
É possível indicar como pontos negativos: a falta de um e-commerce, a falsa ideia de experiência personalizada e a impossibilidade de enviar fotos por mensagem.

ANÁLISE GERAL DOS CASOS SELECIONADOS

Com base na análise desses dois aplicativos citados anteriormente, foi possível notar que ambos possuem funcionalidades parecidas com a proposta nessa monografia. A partir disto, foi analisado feedbacks de usuários destes aplicativos, disponíveis na App Store e na Play Store, pois eles serão de grande ajuda no processo de construção do protótipo final proposto.

APPS  PONTOS POSITIVOS PONTOS NEGATIVOS
Dafiti • Gratuidade de download
• Entrega o que promete
• Interação do usuário com as ofertas
• Pesquisa por imagem
 • Não notifica o usuário por interesse
• Não possui tutorial
• Não salva os produtos na sacola
• Desconecta o usuário de sua conta frequentemente
Farfetch • Cadastro rápido
• Existência de um clube de benefícios
• Possui interface mais amigável
• Experiência personalizada
 • Falta de interação do usuário com as ofertas
• Não possui total clareza em suas atividades
• Wishlist com limite de 100 itens
• Poucas opções de filtro
• Separação por gênero
Pinterest • Cadastro rápido
• Múltiplas contas
• Organização por pastas
 • Não possui uma área para compras
• Falsa experiência personalizada
• Impossibilidade de enviar fotos por mensagem
PONTOS POSITIVOS
• Gratuidade de download
• Entrega o que promete
• Interação do usuário com as ofertas
• Pesquisa por imagem
PONTOS NEGATIVOS
• Não notifica o usuário por interesse
• Não possui tutorial
• Não salva os produtos na sacola
• Desconecta o usuário de sua conta frequentemente
PONTOS POSITIVOS
• Cadastro rápido
• Existência de um clube de benefícios
• Possui interface mais amigável
• Experiência personalizada
PONTOS NEGATIVOS
• Falta de interação do usuário com as ofertas
• Não possui total clareza em suas atividades
• Wishlist com limite de 100 itens
• Poucas opções de filtro
• Separação por gênero
PONTOS POSITIVOS
• Cadastro rápido
• Múltiplas contas
• Organização por pastas
PONTOS NEGATIVOS
• Não possui uma área para compras
• Falsa experiência personalizada
• Impossibilidade de enviar fotos por mensagem
OBJETIVO

A ideia do aplicativo de e-commerce, elaborado como estudo de caso, é não definir roupas por gênero, pois além de agregar valor ao consumidor fazendo com que ele possa explorar muito além do que é determinado pelas marcas. Além dessa ter sido uma das reclamações vistas sobre as aplicações similares, cada vez mais lojas vem defendendo o conceito de moda unissex ou agênero. Precisamos entender que a roupa veste a pessoa, e não o contrário. É a partir da personalidade do consumidor que ele vai decidir se alguma peça lhe cai bem e se ele deve usá-la.

Além disso, o usuário pode compartilhar do seu estilo com seus seguidores, podendo não só indicar os amigos presentes nas suas fotos, mas também as roupas usadas por eles. Sendo assim, geraria uma grande interação entre o usuário e seu público.

Pela da pirâmide da motivação humana, é possível explicar a alta influência que aplicações sociais tem na vida dos usuários e a vontade de criar relacionamentos, além da necessidade de aceitação e reconhecimento. O aplicativo busca não só envolver a questão das necessidades sociais, como também as de autoestima, alinhando ambas dentro de uma aplicação e-commerce.

A aplicação também busca ser inclusiva e implantar funcionalidades para que usuários com alguma deficiência não apresentem dificuldades no manuseio.

PESQUISA COM POSSÍVEIS USUÁRIOS

Foi criado um formulário online onde 255 pessoas responderam a algumas perguntas relevantes ao projeto, facilitando assim a análise de diversos pontos que não só agregariam na solução de problemas e aumentos da experiência do usuário.

O foco desta etapa foi entender as necessidades e o que possíveis usuários estão buscando. Notou-se que as compras por artigos de vestuário é bem alta, e que a grande maioria dos entrevistados apresentam problemas com a escolha de tamanho de suas peças. Alinhando os pontos já abordados com o fator que houve bons índices que os usuários contribuiriam e usariam uma rede social própria do aplicativo em troca de pontos e descontos, fazem com que seja grande a chance de os entrevistados virarem usuários ativos. 

ANÁLISE SWOT

A análise SWOT foi feita observando as principais funcionalidades da aplicação e buscando apontar, primeiramente, em forças foram citados fatores que fossem grandes atrativos e diferenciais para os usuários, após, em fraquezas, foram pensados e nomeados os empecilhos que a criação da aplicação acarretaria. Além disso, foi citado em oportunidades os grandes fatores externos que contribuem com a ideia do aplicativo, em contrapartida, são citados como ameaças fatores que podem prejudicar ou desestimular o uso do app.
Em paralelo, foram elaboradas estratégias para combater possíveis pontos que acabassem comprometendo o sucesso do aplicativo.

CRIAÇÃO DE PERSONAS E JORNADA DO USUÁRIO

Com base nos dados coletados através das pesquisas com possíveis usuários, foram criadas três personas, todas elas apontando para um índice do gráfico, apresentando assim casos extremos. Como é possível ver, a faixa de maior presença foi a de 19 a 34 anos, pessoas que, no geral, são assalariados dependentes e que não moram sozinhos, além disso, foi mostrado o alto consumo de produtos vendidos online.
Para a criação das personas foram priorizados os pontos principais a serem utilizados para a criação do protótipo, como a rotina de cada usuário, sua experiência com dispositivos móveis, seu perfil comportamental, além de dados pessoais e sobre seu consumo online.
Além disso, foram elaboradas jornadas dos usuários com base das personas, através dos problemas apresentados pela persona, foram criados cenários e através deles puderam ser explicitados as expectativas da persona, suas ações durante o cenário proposto, seus pensamentos e sentimentos sobre sua situação. E a partir disso, foi possível definir oportunidades que podem ser aproveitadas durante a elaboração do projeto da aplicação, além disso, são citadas métricas e propriedade externa, sendo possível estabelecer qual parte da equipe e o que eles podem fazer aproveitando o problema criado na persona.

ELABORAÇÃO DO CARD SORTING

Para a elaboração do card sorting, foram utilizadas três pessoas, onde foram apresentadas para elas a ideia central da aplicação, após elas as agruparam de acordo com a lógica que fazia mais sentido para elas.

CRIAÇÃO DA ARQUITETURA DE INFORMAÇÃO

Para criar um design limpo e focado, com uma interface intuitiva, foi necessário pensar em todas as informações que serão fornecidas aos usuários e como eles podem melhor aproveitar delas. A partir das funcionalidades, foi criado um “mapa”, onde é mostrado a forma como são reunidas todas as informações e sua hierarquia.

REPRESENTAÇÃO DAS PRINCIPAIS TELAS

Em um primeiro momento, foi criado um wireframe de baixa fidelidade apenas para a organização de ideias e posicionamento de imagens, ícones e botões. A partir dele, é possível evoluir para um protótipo de média ou alta fidelidade, sendo ele feito apenas com o intuito de esboçar uma ideia.

TESTE DE USABILIDADE

A partir de testes de usabilidade feitos com base em um protótipo de média fidelidade, onde não possui elementos gráfico, tendo o foco apenas nas funcionalidades e interações entre as telas, foi possível notar os seguintes problemas:
• Ausência de informação sobre onde o usuário se encontra na aplicação;
• Ausência de botões para retornar;
• Botão de favoritos não permitir que o usuário escolha em que pasta ele irá salvar;
• Ícones confusos para favoritar e curtir uma foto;

ELEMENTOS UI
STYLE GUIDE
TESTES FEITOS COM OS USUÁRIOS DO FOCUS GROUP
1- Inserir dados para cadastro no aplicativo

• Pessoa 1: Concluiu sem dificuldade. Porém reclamou do fato de após o cadastro não serredirecionado para dentro do app.
• Pessoa de 2 a 5: Concluiu sem dificuldade.

2- Adicionar a primeira foto como foto de perfil

• Pessoa de 1 a 5: Concluiu sem dificuldade.

3- Fazer login no aplicativo

• Pessoa de 1 a 5: Concluiu sem dificuldade.

4- Entrar na aba de pontos e escolher uma carta do mini-game

• Pessoa 1: Reportou que o botão de link para a página de mini-game parece fazer parte do anúncio e o deixou confuso.
• Pessoa de 2 a 4: Concluiu sem dificuldade.
• Pessoa 5: Apresentou dificuldade em achar a aba de “pontos”.

5- Adicionar a segunda foto da galeria no feed, marcar as peças presentes na foto e publicar

• Pessoa de 1 a 5: Concluiu sem dificuldade.

6- Mudar a foto de perfil

• Pessoa de 1 a 5: Concluiu sem dificuldade.

7- Criar uma pasta no salvos

• Pessoa 1 e 2: Concluiu sem dificuldade.
• Pessoa 3 a 5: Apresentou dificuldade em achar a aba de “salvos”.

8- Adicionar uma peça a uma pasta

• Pessoa 1 e 5: Concluiu sem dificuldade.

9- Adicionar a blusa branca do MATHEUS ao carinho

• Pessoa 1 e 5: Concluiu sem dificuldade.

10- Na aba shop, navegar pelos estilos e encontrar o SHORT PRETO DA ADIDAS

• Pessoa de 1 a 5: Apresentou dificuldade em achar a parte de estilos.
• Pessoa 1: reclamou da falta de indicativo de estilo.
• Pessoa 3: Apresentou dificuldades em visualizar que possuíam mais banners de estilo.

11- Descobrir qual o melhor tamanho para você e adicionar ao carrinho

• Pessoa de 1 a 4: Concluiu sem dificuldade.
• Pessoa 5: Apresentou dificuldade em achar a parte de descobrir tamanho.

12- Efetuar a compra

• Pessoa 1, 3 e 5: Concluiu sem dificuldade.
• Pessoa 2 e 4: Apresentou falta de atenção ao tentar concluir uma compra sem adicionar o endereço para envio.

13- Comentar a compra do VESTIDO

• Pessoa 1: Apresentou dificuldade ao encontrar o ícone de notificação, sinalizou para o costume em ser direcionado ao lado superior direito.
• Pessoa 2 e 3: Apresentou dificuldades em encontrar a função de comentar.
• Pessoa 4 e 5: Concluiu sem dificuldade.

14- Sair do app

• Pessoa 1 a 5: Concluiu sem dificuldade.
• Pessoa 1: Sentiu falta de um alerta ao sair.

EXPLICAÇÃO DAS TELAS

1- Tela de login: Através da tela de login é possível se logar pelo Google, Facebook e Apple, além de permitir realizar o cadastro de uma nova conta.

2- Tela de cadastro: Na tela de cadastro é possível inserir informações pessoais do usuário e ler os termos de contrato da aplicação.

3- Aba SHOP: Na aba shop é possível ter acesso a compras por estilo, onde peças sãoclassificadas por diferentes estilos e não por gênero. Além disso, é possível ver peças separadas por categorias, novidades e comprados recentemente. Indo mais a fundo, é possível acessar a tela de filtros e separar as peças pelo gosto do usuário, além da ordenação das peças.

4- Aba PONTOS: Na aba pontos é possível fazer check-in, onde a cada dia que o usuário acessa o aplicativo ele ganha uma quantidade x de pontos, também é possível ganhar pontos jogando alguns mini games disponíveis também nessa aba. Além disso, através do botão extrato de pontos, é possível ver onde foram gastos os pontos e como os usuários os conseguiram.

5- Botão PUBLICAR POST: Através do botão publicar post, é possível escolher uma foto da sua galeria, e após é possível adicionar legenda, marcar peças e pessoas, além de permitir ao usuário compartilhar em outras redes sociais.

6- Aba FEED: Na aba feed, é possível conferir publicações de outros usuários, além de poder salvar peças e fotos dos usuários, curtir, comentar e visualizar as peças que os usuários marcaram na publicação, além de poder adicioná-las ao carrinho.

7- Aba PERFIL: Na aba perfil é possível conferir as publicações, e as roupas que o usuário marcou, além de possibilitar o acesso do usuário as configurações.

8- Tela CONFIGURAÇÕES: Na tela de configurações é possível editar perfil, onde é possível alterar foto de perfil, alterar configurações do app, além de permitir que o usuário saia do aplicativo.

9- Botão NOTIFICAÇÕES: O botão de notificações leva acesso a informações sobre compras já efetuadas ou que ainda faltam pagamento, além de notificações sociais, como novos seguidores e curtidas.

10- Botão PESQUISAR: Através do botão pesquisar pode ser encontrado através de uma procura textual ou por imagens, peças, e apenas textual para serem encontrados usuários e tags.

11- Aba SALVOS: Na aba salvos é onde se encontram suas pastas e imagens salvas. Nela é possível criar novas pastas.

12- Aba CARRINHO: Na aba carrinho é onde encontram-se as peças que foram enviadas para lá através do botão carrinho, lá é possível remover as peças ou enviá-las para salvos, além de ser possível concluir o pedido.

13- Tela CONCLUIR PEDIDO: Na tela concluir pedido, é necessário inserir endereço, além de ser possível inserir dados de pagamento e informar suas preferências sobre parcelamento.

14- Tela MEDIDAS: A principal funcionalidade da tela medidas é permitir ao usuário inserir suas informações pessoais baseadas em suas medidas corporais e ao fim receber qual melhor tamanho de acordo com suas preferenciais.

15- Tela COMENTÁRIOS: A tela comentários te informa compras passadas e te possibilita avaliar serviços logísticos e as peças compradas em troca de descontos. Essa funcionalidade busca resolver o problema de confiabilidade que os usuários apresentam ao comprar peças

REDESIGN
CONCLUSÃO

A ideia de ter uma aplicação que ofereça uma boa experiência ao usuário é algo complexo e que deve ser trabalhado em etapas para que todas as partes da aplicação sejam trabalhadas centradas em quem irá utilizar.

Para a implementação da ideia de um aplicativo que unia necessidades sociais e de autoestima com um e-commerce, foi necessário realizar testes com possíveis usuários para saber de fato qual o público que realmente utilizaria da aplicação. A partir dos dados coletados foram elaboradas personas distintas com problemas e sentimentos, abordados na jornada do usuário.

Além disso, para que a experiência do usuário seja realmente satisfatória foram elaborados testes que visavam avaliar a qualidade da aplicação e encontrar os pontos específicos que os usuários encontraram problemas.

O design foi em algo que fosse simples, objetivo, mas que também fosse descontraído e atrativo para o público-alvo.

Futuramente, objetiva-se ter uma aplicação mais completa, com mais funcionalidades e buscando cada vez mais ser inclusiva, colocando sempre o usuário como prioridade.

**OS DADOS DESTE PROJETO FORAM COLHIDOS EM OUTUBRO DE 2021. AS ATUALIZAÇÕES DAS APLICAÇÕES  POSTERIORES A ESTA DATA NÃO FORAM CONSIDERADAS.