UX Design 💻

Hackathon
Live Commerce

No final de 2023, participei de um Hackathon de Produto com o objetivo de desenvolver soluções para a Live-co, uma plataforma de live commerce e live shopping.

A dinâmica do Hackathon foi estruturada em duplas compostas por Product Designers e Product Managers, que trabalharam juntas por aproximadamente 9 horas a fim de encontrar soluções para um problema real do produto.

A experiência foi incrivelmente enriquecedora em termos de aprendizado e colaboração, e sair vitoriosa apenas concretizou esse desafio como um grande marco em minha jornada! 🎉

O problema

Durante uma live commerce na plataforma, os usuários enfrentam uma experiência de compra fragmentada. Alguns produtos são exibidos na tela durante a transmissão, eles selecionam os itens de interesse, mas acabam sendo redirecionados para um site externo para concluir a compra, interrompendo a experiência da live.

O objetivo

Nosso objetivo era reduzir a fricção no processo de compra, evitar perdas de vendas e garantir a satisfação do cliente.

A investigação 🔍

Dado o curto período do Hackathon, focamos em uma investigação rápida e precisa. Inicialmente, buscamos compreender as raízes do problema, que provavelmente estavam relacionadas à arquitetura e às limitações tecnológicas da plataforma. Através de análises e conversas com especialistas técnicos, identificamos os principais pontos de atenção:

  • A plataforma não possui uma solução integrada para processar transações diretamente;
  • A plataforma foi inicialmente desenvolvida com tecnologia low-code, o que pode ter impactado em suas limitações no processo de compras;
  • Uma possível integração nativa que permita concluir a compra pode ser complexa e exigir recursos técnicos;
  • Problemas de UI/UX podem afetar a experiência desde a fase inicial da decisão de compra.
  • Soluções propostas ✨

    Melhoria da interface do usuário na pré-compra:

    Otimizamos o cenário pré-compra da plataforma que, por si só, já contava com muitos passos. Decidimos dispor inteiramente o catálogo de produtos na tela principal da live. Isso permite que o usuário acesse qualquer um dos produtos para compra em apenas um passo. A jornada para configurar o produto, incluí-lo no carrinho e prosseguir com a compra também foi facilitada, pois a unificamos em uma única janela.

    Picture-in-picture:

    Trazemos também o picture-in-picture para solucionar de forma eficaz um cenário de multitarefa, o que no nosso caso está atrelado à necessidade de acompanhar a live enquanto finalizamos a compra. Isso é extremamente conveniente porque permite manter o vídeo ainda visível na tela, sem a necessidade de alternar entre guias ou janelas. A experiência de visualização também é aprimorada, já que no modo picture-in-picture damos a possibilidade de minimizar e maximizar o vídeo, movê-lo para outro lugar da tela, e deixá-lo com ou sem som. Isso tudo sem atrapalhar a finalização da compra.

    Incorporação de página de checkout por meio de Webview:

    Optamos por adotar o webview para trazer agilidade e impedir a fragmentação do caminho do usuário. Isso significa que a exibição do checkout será integrada à interface da aplicação, mantendo o usuário no mesmo contexto, sem a necessidade de abrir novas janelas ou abas. Essa abordagem permite uma integração suave do conteúdo web dentro da aplicação, aproveitando a funcionalidade web existente sem a necessidade de reimplementá-la nativamente.