Como a equipe de design de experiência do usuário da Zivame permitiu a descoberta de produtos multiway

Este é o primeiro de uma série de cinco partes do Guest Blog de Udit Khandelwal, diretor de UX da Zivame.

Se os usuários não conseguirem encontrá-lo, o recurso não existe! – Human Factors International (HFI)

Ouvi essa citação pela primeira vez em uma sessão de treinamento no HFI em 2012, e você sempre achará isso ressoando com minha maneira de abordar o UX.

A descoberta de produtos é um dos aspectos mais importantes de qualquer negócio de varejo e, se os usuários não encontrarem os produtos que você oferece, eles não existem. Para permitir a exploração contínua de produtos na Zivame, desenvolvemos uma estratégia de descoberta multidirecional em nossas plataformas. Nesta série de 5 artigos, abordarei as alavancas usadas para apresentar coleções, descoberta de produtos e oferecer comunicação na Zivame.

Este é o primeiro artigo desta série, e aqui estarei abordando principalmente os itens em Quebra-gelos da lista de alavancas abaixo:

Cada um deles serve a um propósito muito específico na jornada do usuário e é usado de acordo. Vamos dar uma olhada neles, um por um – enquanto falamos sobre os desafios em cada caso, e o que fizemos para superá-los. Também falarei sobre métricas de negócios, sempre que aplicável.

Cartões de destino da página inicial

Desafio

• 45% do tráfego da web no Zivame é composto por usuários iniciantes

• 40% do tráfego direto e orgânico chega à página inicial do Zivame

• A maioria dos usuários acima tem muito pouca ideia sobre a amplitude dos produtos que oferecemos

Solução

Não ter um menu horizontal aberto e usar uma navegação de hambúrguer em dispositivos móveis foi uma abordagem muito bem pensada e testada pelo usuário que começamos a seguir com nossa nova pilha.

Isso teve o custo de não ser franco sobre nossas ofertas.

Por isso, tornou-se fundamental para nós comunicarmos o mesmo, logo na primeira dobra. As cartas mostradas abaixo servem exatamente para esse propósito.

O interessante é que essa abordagem foi inicialmente concebida para o desktop e depois adaptada para dispositivos móveis, conforme mostrado abaixo. Na versão desktop,

os cartões ocupam o espaço superior na primeira dobra, enquanto no celular, eles estão logo abaixo do banner do herói devido à restrição de espaço vertical.

Quando estávamos conceituando isso, nossos executivos imaginaram da seguinte forma:

Ninguém que passa 8 segundos na minha página inicial deve ir embora sem saber que a Zivame vende lingerie, vestuário e roupas esportivas. – Shaleen, COO Zivame

…e acho que fizemos um bom trabalho em alcançar o mesmo por meio do design. O posicionamento dos cartões os torna imperdíveis e os títulos junto com os links definem expectativas claras sobre as categorias individuais , ou seja, Lingerie, Activewear e Vestuário. Além disso, o quarto cartão permite flexibilidade suficiente para colocar itens meta que merecem um lugar na primeira dobra.
PS Este componente está em desenvolvimento enquanto escrevo este post e será lançado em breve!

(Leia também: Moldando a experiência do usuário na Zivame: um estudo de caso de gerenciamento de produtos)

Empreendimento

É difícil imaginar quais 4 coisas vão em cada cartão, porque cada parte interessada na empresa está procurando por imóveis de primeira para sua propriedade!
Embora os dados pareçam ser uma rota de fuga fácil, onde você pode simplesmente manter as coisas mais procuradas no topo, o negócio pode ter uma direção conflitante . Por exemplo, a própria Vestuário contribui com apenas 8% da receita da Zivame atualmente, mas ocupa 25% dos principais imóveis.

Uma colaboração multifuncional com uma quantidade razoável de moderação dos executivos da empresa deve lhe dar a resposta certa. Como meu gerente de produto coloca:

Você tem que ser desproporcionalmente gentil com certas entidades para garantir seu crescimento desproporcional. – Vishrut Shukla, Sr. PM – Zivame

Carrossel de heróis da página inicial

Desafio

• Este é o próximo imóvel nobre e a propriedade é visual. Ele precisa representar a marca e uma linguagem de design visual rigorosa precisa ser seguida.

Solução

Francamente, isso foi fácil de projetar, mas difícil de executar. Sabíamos que estávamos seguindo uma linguagem de design grande e bonita e, portanto, foi uma decisão fácil que o banner ocupasse 100% da largura da tela e 100% da altura restante da tela. Mas isso nos deixou com 2 problemas a serem resolvidos:

• Em certos tamanhos de tela, o banner seria cortado, pois usaríamos o algoritmo de 'capa'.

• Quando o banner se estende até a borda inferior da tela, os usuários podem ter a ilusão de que a página termina ali e não há nada além disso.

Para resolver o problema de corte, definimos as áreas seguras e testamos em várias resoluções. Depois de alguns acertos e tentativas, conseguimos acertar.
Colocamos um chevron na parte inferior do banner para dar uma dica visual aos usuários de que há mais além do banner. Para mantê-lo limpo, decidimos tornar a seta de navegação unidirecional, mas também demos dicas de apresentação de slides, colocando navegação baseada em pontos.

Uma grande quantidade de colaboração multifuncional foi necessária para criar o banner certo, com a mensagem certa e juntá-lo aos banners da página da categoria, mantendo a jornada do usuário em mente. A seção acima exibe uma captura de tela de exemplo e abaixo está como definimos a área segura:

Coleções em destaque

Desafio

• Banners são bons para chamar a atenção, mas para gerar o interesse dos usuários e fazer com que os usuários cliquem com a expectativa certa, precisamos contar um pouco mais sobre a coleção. No entanto, os imóveis são limitados e há muita concorrência entre as diferentes coleções.
• O design anterior da página inicial do Zivame para dispositivos móveis costumava exibir um acordeão de coleções onde cada coleção tinha um conjunto de 10 produtos seguidos por um botão “Ver mais” depois de rolar até a última miniatura. A análise dos dados revelou que mais de 40% dos usuários que interagiram com o acordeão clicaram em ver mais. Isso reforça o ponto mencionado acima. No entanto, não queríamos usar acordeão porque não era visual e tinha muito texto.

  

• Carregar muitas imagens de produtos antecipadamente afeta negativamente o desempenho da página. Para cada segundo extra de tempo de carregamento da página, a conversão cai 7%.

Solução

Ao custo de um clique extra, mostre os USPs, bem como uma prévia de cada coleção. Além de uma colagem de produtos, simplesmente trouxemos à tona 3 informações críticas:

1. Nome da coleção
2. Descrição
3. Atributos de assinatura

Isso não apenas despertou interesse na coleção, mas também guia o usuário em uma jornada de descoberta de produtos com uma expectativa definida. A colagem do produto pode ser tecnicamente otimizada para ser devolvida como uma única imagem de colagem em vez de várias imagens do produto. Novamente, esta versão foi parcialmente implantada no site atual e o restante está sendo implementado enquanto escrevo este artigo.

Visite Zivame

Cabeçalho de categoria

Desafio

• As páginas de categoria são páginas de destino primárias para tráfego pago. Além disso, quem clicar em qualquer um dos banners de coleções/ofertas dentro do site, será direcionado para uma página de categoria. Portanto, torna-se crucial costurar a jornada do usuário aqui e manter o contexto.

• Quanto mais ampla a categoria, mais difícil é para os usuários fazerem uma escolha. Portanto, para certos casos, podemos querer restringir a jornada do usuário a uma subcategoria mais específica e, posteriormente, a produtos específicos.

• Certas categorias são muito especiais ou novas e os usuários precisam estar cientes dos USPs no momento em que chegam à página.

Solução

O mastro consiste em 4 componentes principais. Criamos uma abordagem em que componentes configuráveis ​​cuidariam dos casos de uso mencionados acima: simplesmente colocar um banner no cabeçalho e confiar nos banners criativos, comprar, filtrar/ordenar a barra de ferramentas e oferecer comunicação para fazer o resto.
Eu vou falar sobre banners aqui, e estarei cobrindo 'compre por' e ofertas mais tarde. Projetamos 3 variações ou modelos para os banners da categoria:

1. Faixa única
2. Carrossel
3. Faixas divididas

Banners únicos funcionam perfeitamente para categorias restritas e falando sobre seus USPs. Carrosséis e banners divididos, por outro lado, são uma ótima maneira de fornecer vários banners dentro de um espaço limitado e são usados ​​para levar a subcategorias.
Ao promover qualquer uma dessas páginas, as equipes de marketing digital e criativos garantem que os criativos de marketing falem a mesma linguagem e usem imagens semelhantes para unir a jornada do usuário.

Agora, assim como o banner herói da página inicial, esses banners ocupam 100% da largura disponível, porém, a altura é constante. Assim, em alguns casos (ou resoluções) acabamos recortando o banner da direita. Assim como na página inicial, definimos áreas seguras e a equipe criativa foi convidada a seguir o mesmo ao projetar esses banners.
Abaixo está um exemplo de como definimos o mesmo para um banner dividido:

Embargo

Este não é um design mobile-first e, após uma degradação graciosa, nos celulares voltamos a um banner simples ou a um carrossel habilitado para furto. Não há banner dividido para celulares.

Integração de aplicativos

Desafio

• Você quer dizer muito aos usuários, mas ir além de 4 cartões durante a integração é um exagero. O espaço é limitado, os recursos são enormes, os usuários não têm tempo para ler e, apesar de tudo isso, você precisa fazer o app colar.

• Você não sabe quem está navegando : um novato ou um especialista, um explorador ou um navegador; e você precisa criar uma experiência de integração adequada para todos

Solução

Em vez de pensar no que queremos dizer ao usuário, começamos a pensar ao contrário → O que os usuários gostariam de aprender? Com uma pesquisa rápida com a vareta, conseguimos descobrir que os usuários estavam procurando principalmente respostas para as seguintes perguntas:

1. Do que se trata?
2. O que posso fazer aqui?
3. Como começar?
4. O quê tem pra mim? Como isso me ajuda?

Assim, o problema foi simplesmente reduzido a 4 telas que pudessem responder a essas perguntas. Por isso, zeramos as 4 telas a seguir:

A última tela é inteligentemente projetada para promover o FitCode, mas os usuários podem ignorá-la e continuar comprando.

Ressalvas

Há algumas falhas, que agora estamos corrigindo e gostaria de avisá-lo sobre:

1. O pop-up de permissão de notificação é exibido na tela de integração. Isso é muito irritante para o usuário e provavelmente obteremos uma conversão mínima aqui. O que deve ser feito em vez disso - a permissão de notificação deve ser solicitada após a ocorrência de um determinado evento (digamos, login, sucesso do pedido, acesso ao conteúdo etc.).
2. Mensagens de engajamento na Web (pop-ups de marketing) às vezes são exibidas durante a integração. Novamente, é uma experiência muito ruim e os usuários provavelmente não serão receptivos a nenhuma mensagem de marketing durante a integração. Devemos tomar cuidado para que nenhum pop-up seja exibido nas telas de integração.

FitCode

Desafio

• Muitas mulheres preferem comprar em uma loja física do que comprar online. Uma das razões mais comuns para isso é que eles não têm certeza se um determinado produto servirá para eles. Eles não podem experimentá-lo online.

• Mulheres diferentes têm formas corporais diferentes e não existe um produto único para todos quando se trata de lingerie. Por isso, apresentá-los com o produto que se adapta à sua forma e preferências corporais é crucial.

• Se você der a eles um formulário para preencher suas medidas e preferências, as desistências serão altas. Portanto, qualquer que seja a solução que encontrarmos, precisa ser eficaz.

Solução

A equipe de Design de Moda da Zivame, juntamente com os Gerentes de Produto, realizou uma extensa pesquisa e deduziu que os tipos de corpo das mulheres podem ser descritos com precisão agrupando-os em 11 tipos de perfis.

Agrupe esses perfis, juntamente com as medidas e preferências, e você poderá fornecer as recomendações corretas de produtos aos usuários. Chamamos isso de FitCode, que é derivado de um conjunto de perguntas aos usuários (FitCode Quiz).
Uma versão disso foi projetada, testada pelo usuário, implementada e lançada em aplicativos. Enquanto os usuários entendiam o conceito e respondiam ao questionário, havia 2 problemas gritantes:

• Alto número de desistências
• Algumas pessoas acharam as imagens que usamos para representar os perfis assustadoras.

Achamos que o questionário foi projetado de uma forma em que estávamos perguntando aos usuários as perguntas difíceis primeiro, e essa abordagem precisava mudar. Precisávamos atrair os usuários fazendo as perguntas mais fáceis primeiro e depois as mais difíceis. Também alteramos nossos criativos e os tornamos mais abstratos. Eles não eram mais assustadores. Dê uma olhada nas telas abaixo:

Encontre o seu ajuste perfeito

Espero que você encontrou este artigo informativo e perspicaz.

Estude cursos de gerenciamento de produtos online das melhores universidades do mundo. Ganhe Masters, Executive PGP ou Advanced Certificate Programs para acelerar sua carreira.

Programa em destaque para você: Programa de certificação em Design Thinking da Duke CE

O que se entende por descoberta de produtos multidirecional?

A descoberta do produto refere-se à forma como um cliente, que chegou a um ponto de contato com o cliente pela primeira vez - aprende, entende e retém informações sobre o produto que a empresa oferece, o suficiente para garantir que ele se lembre imediatamente da marca na próxima vez que tem um requisito de repetição. Deve ser o objetivo de todos os gerentes de produto garantir que isso aconteça nos primeiros 8 segundos da experiência do cliente nos vários pontos de contato da empresa com o cliente. Caso a empresa ofereça mais de um produto, o objetivo é que isso aconteça para todos eles. É basicamente disso que se trata a descoberta de produtos multidirecionais.

Existem cursos específicos de gestão de produtos para empresas de e-commerce?

Não, não existem cursos específicos de gestão de produtos para e-commerce. Algumas empresas menos escrupulosas podem afirmar isso, mas seria sensato verificar suas credenciais antes de entrar. Bons programas para gerenciamento de produtos não são tão específicos, pois seriam uma desvantagem para os alunos. O objetivo de permitir que alguém se torne um bom gerente de produto é garantir que ele tenha as habilidades e conhecimentos necessários para fazer um bom trabalho, independentemente da escolha do setor, o que, por sua vez, permitiria alternar entre os setores em estágios posteriores de suas carreiras.

Como me tornar um gerente de produto sem um MBA?

Para ser um bom gerente de produto que pode superar as entrevistas mais difíceis, as habilidades básicas de domínio que você precisa são um bom entendimento da tecnologia do produto, excelente conhecimento do design do produto e do design das jornadas do cliente e habilidades de gerenciamento de negócios. Assim, pode ser assustador para um indivíduo que possui habilidades técnicas e experiência de trabalho suficientes, mas não entende de gerenciamento de negócios, como planejamento financeiro, orçamento, gerenciamento de projetos, marketing, estratégia e assim por diante. A melhor maneira de desenvolvê-los seria de fato, envolver a busca de um MBA. No entanto, graças à demanda de gerentes de produto qualificados, também é possível entrar nessas funções cursando cursos de meio período em gerenciamento de produtos.