proline
aumentando a conversão do
e-commerce de 0.5% para 2%
proline
aumentando a conversão do
e-commerce de 0.5% para 2%
proline
aumentando a conversão do
e-commerce de 0.5% para 2%
mais cases da sessão
ux / ui
como
ux research
ux design
ui design
teste de usabilidade
design gráfico
naming
netnografia aplicada
quando
2019 até atualmente
onde
smartcomerci
além do design
como contribuí para a construção de uma startup
Essa é uma história que ainda não acabou. Esse é o case que partirá de um template de uma plataforma terceira, para um MVP, até chegar a ser um produto final próprio.
Começamos de forma independente e passamos por várias etapas de validação. Fizemos o possível com os poucos recursos que tínhamos e, acredito, que fizemos muito.
Aqui irei relatar meu papel como designer de produto, UX, UI, gráfico, negócios, facilitador… tudo o que um co-founder acaba tendo que fazer, tendo um background em design.
até aqui
o meu maior desafio
Em 2018 se iniciava um dos meus maiores desafios: construir uma startup. Mas o projeto não começou assim.
Meu amigo Thiago Rojas, com quem já havia trabalhado em vários projetos de e-commerce, me apresentou uma ideia para termos uma renda extra: criar um template para a plataforma Tray.
O Thiago é um especialista em e-commerce e sempre está atento a tendências. Ele estuda a fundo o mercado asiático, de onde várias inovações acabam vindo. Ele observou que o setor de grocery estava em constante crescimento. Empresas como redmart e happy fresh dominavam o mercado asiático, entregando uma excelente experiência de compra online.
no início,
template Tray
A ideia, como dito acima, começou na criação de um template para a plataforma TrayCommerce. Já tinha trabalhado em vários projetos, junto do Thiago, utilizando a Tray.
A plataforma permite com que desenvolvedores forneçam um template, para que lojistas não precisem começar do zero e permitem cobrar um valor pelo mesmo.
Existem certas limitações da plataforma, a qual já conhecíamos, mas nos apoiávamos no conhecimento de desenvolvedores experientes e da rede de contato que havíamos feito no decorrer dos anos.
o mercado
e inspirações
O primeiro passo foi estudar o mercado. Não somente em modelo financeiro, mas principalmente as regras de negócio que permeiam o segmento.
Redmart
O redmart era econtinua sendo um dos principais líderes do segmento em singapura (ainda mais após ter sido adquirido pela Lazada).
Levantamos alguns pontos observando a navegação e funcionalidades:
-
Preocupação com a navegação: o grocery é diferente dos outros tipos de compra online. Existe um número muito maior de SKUs inseridos no carrinho e a navegação do site precisa refletir nisso.
-
Arquitetura da informação: a categorização deve refletir com o que o consumidor já está acostumado em seu dia a dia. Conhecer como os supermercados e hortifrutis organizam a prateleira, seria um ponto essencial para projetar o e-commerce.
-
Adicionar ao carrinho: como a quantidade de SKUs são grandes, é importante que a a funcionalidade de adicionar ao carrinho esteja presente no card do produto, assim como a opções de remover e aumentar a quantidade
Happy Fresh
O Happy Fresh começou na indonésia, e possui um modelo de negócio que se baseia em “agregar” vários supermercados e oferecer o serviço de plataforma e delivery.
Fazendo uma análise da navegação, observamos que ela é muito similar ao RedMart, a não ser quando entram especificidades do negócio.
Mambo Online
O Mambo é um dos pioneiros do grocery online no Brasil. Não que outros não tenham tentado, mas o Mambo conseguiu prezar pela experiência e adaptar para a realidade brasileira a navegação do eu e-commerce.
análise e
benchmark
Realizamos a avaliação acima, além de outras empresa do setor. Com isso, conseguimos avaliar algumas possíveis dores e listar para poder prevê-la.
Alguns assuntos importantes:
-
Multi Estoque: alguns clientes poderiam ter mais uma unidade e isso precisaria ser tratado tanto no back-office, quanto no front para o consumidor final.
-
Quebra de estoque: por mais que o supermercado ou hortifruti tenha um bom processo de inventário, por vezes pode acontecer de algum produto não se encontrar mais na prateleira. Isso é algo que precisaria de aviso ao consumidor e uma forma de tratar na plataforma.
-
Checkout Rápido: o consumidor precisa conseguir passar por todo o fluxo de uma maneira fluída. A compra online no grocery possui muitos SKUs, como dito anteriormente, fazendo com que o tempo que o consumidor passa no site seja mais “longo” que o usual. Para não gerar frustração, o checkout precisa ser rápido e sanar todas as dúvidas.
-
Carrinho: um ponto crucial para todo e-commerce é o carrinho. Mas a diferenciação para o grocery, é que ele precisa ter uma gestão facilitada. Possuindo algumas funcionalidades para ajudar na encontrabilidade, ajuste de quantidade e localização de produtos. Pois, diferente de um e-commerce de tecnologia, por exemplo, onde cada carrinho teria de 1 até 5 SKUs em média, no grocery a quantidade pode passar de 60.
ui design
definindo o sistema
tipografia
Para compor sistema de identidade, foi escolhida a família tipográfica Pill Gothic, criada pelo designer Christian Robertson e distribuída pela Foundry Betatype.
A família foi utilizada devido a possibilidade de criar títulos e parágrafos utilizando uma fonte com fortes características visuais, sem que haja uma distração do leitor por causa dela.
cores
A paleta de cores foi construída levando em consideração uma interface baseada em Dark UI.
Esse tipo de interface é bastante utilizada em programas relacionados ao mundo dos games.
elementos e ícones
Os elementos da interface foram desenvovidos de forma que se adequem aos padrões da Dark UI. Os ícones e botões foram pensados para funcionar em todos os estados das interações.
cursor
Foi criado um cursor personalizado para funcionar quando o programa estiver ativo.
Além do fator estético, enquadrando-se melhor na identidade visual que o cursor padrão, ele foi construído para facilitar na navegação de alguns usuários. A massa densa do cursor é maior que as dos cursores padrões, para que ícones pudessem ser inseridos dentro do cursor.
ui design
telas principais
tela inicial
A tela principal do programa exibirá os últimos jogos executados pelo usuário. Podendo ele acessar a tela interna do jogo ou ter um acesso rápido ao radar.
modo de exibição
Através da funcionalidade de “modo de exibição” o usuário poderá escolher a melhor forma de listagem que se enquadra para a sua navegação. Nos exemplos abaixo é possível encontrar a navegação em lista e uma navegação que já exibe o conteúdo interno da página.
preferências e acessibilidade
O usuário terá acesso a uma janela de preferências, onde conseguira adaptar os ajustes ao seu uso. Ele poderá, por exemplo, alterar o tamanho do texto e escolher um padrão de cores diferente do standard da plataforma. Visando assim gerar maior acessibilidade com todos os usuários.
tradutor
O usuário também poderá personalizar a tradução para Libras. Podendo escolher onde o personagem ficará (sendo três opções), pela desativação da tradução (visando surdos oralizados que preferem fazer a leitura do texto) e que a tradução seja feita apenas quando existir a interação com o cursor e uma tecla de atalho.ridos dentro do cursor.
interação entre usuários
Os usuários também poderão interagir na página da comunidade respondendo o artigo ou outros comentários. Para facilitar os usuários que querem conversar através da Libras foi inserido o botão “responder com vídeo”, funcionalidade presente em alguns padrões de redes sociais para surdos
modificações
A página de MOD’s sempre indicará alguma aplicação em destaque. Mostrando já uma opção para baixar o mod, caso já não o tenho instalado e alguns reviews dos usuários. Abaixo será possível encontrar um filtro e uma funcionalidade para enviar um MOD.
As modificações em jogos são bem presentes na comunidade. Mesmos jogos de estúdios famosos, pecam em questão de acessibilidades. As vezes, até, por falta de legenda.
página interna
A primeira página interna de um jogo exibirá o radar favorito do usuário, assim como a opção de criar um novo, os MOD’s que ele tem instalado daquele jogo e uma avaliação do jogo feito pela própria comunidade, levando em considerações fatores sobre acessibilidade.
design de interação e sound design
telas principais
o radar
Grande parte dos sons criados pelos gamers designers são voltados para algum feedback ao jogador. Muitos desses sons não são representados graficamente na interface do jogo.
Existem vários itens que constroem a paisagem sonora em um jogo. Huiberts (2010) formula o modelo IEZA (acrônimo interface, efeito, zona e afeto). O seu modelo traz ferramentas teóricas para o desenvolvimento de sound design.
Interface: Sons fora da ficção que comunicam alguma atividade do jogo;
Efeito: Sons dentro da ficção que comunicam alguma atividade do jogo;
Zona: Som ambiente, dentro do mundo ficcional
Afeto: Som que caracteriza emocionalmente um ambiente, não estando dentro do mundo ficcional.
padrões de radar
O usuário terá 4 modelos padrões para a representação sonora. Cada um poderá ser editado da melhor forma que se enquadrar ao jogo escolhido. A opção de “animar radar” irá trabalhar com o aspecto sinestésico do som e trabalhar outras formas de visualização, utilizando partes do próprio radar para dar a sensação de intensidade, duração e distância.
customização
Ao ativar a perspectiva a grade que ajuda na composição do radar, mudará. Dessa forma, facilitando a visualização no formato desejado.
radar em ação
Cada radar poderá desempenhar diferentes funcionalidades, dependendo da forma que for personalizado. Abaixo temos o exemplo de um radar horizontal, que funciona melhor em jogos 2D do estilo plataforma.
finalizando
pessoalmente, este trabalho proporcionou-me conhecer uma cultura que outrora era me era distante, sendo eu mesmo o culpado disto.
Essa situação me levou a refletir sobre quantas vezes fui negligente com determinado grupo de pessoas durante o projeto de alguma interface.
Porém, sendo uma antítese, também me possibilitou conhecer formas com que o design pode solucionar impasses criados por algum meio que não fornece meios acessíveis de serem utilizados. Foi um processo de evolução de projeto, acompanhando por uma evolução pessoal. Por fim, um dos maiores prazeres que tive em todo o projeto, foi de ler a última resposta de uma gamer surda na entrevista qualitativa:
“agradeço de coração por tentar melhorar a vida do surdo”.
ponto de partida
o começo do design
Entendendo o setor através do benchmark, começamos a analisar as possibilidades e a iterar as funcionalidades possíveis na plataforma.
As imagens de apoio serviram como base para a criação da malha de construção do símbolo. Essa malha visava criar espaços iguais, para que fosse feita a construção de um elemento visual que remetesse uma imagem em 8-bits.
A construção da assinatura visual, também, foi feita a partir da primeira malha. Para que assim os espaçamentos entre símbolo e logotipo pudessem ter uma boa relação.
