VTEX, 2017

Storefront e Render

O Storefront foi planejado para ser uma interface gráfica para lojistas, gerentes de e-commerce, gerentes de marketing e designers adicionarem novos recursos, modificarem a estrutura e personalizarem a aparência de suas lojas sem necessariamente terem que lidar com códigos e detalhes técnicos. Eles ainda poderiam tirar proveito visualmente de um paradigma novo da plataforma, onde lojas rodariam extensões/apps criadas pelo ecossistema de parceiros da VTEX. Era necessário projetar tanto a experiência de uso para o perfil de gerente quanto para o perfil mais técnico de desenvolvedor—este que foi o foco inicial da criação do produto, pois também tiraria proveito da ferramenta de código por trás do Storefront: o Render.

Desafios de Design

Não era novidade que o projeto possuia desafios e alta complexidade. Foram vários meses de soluções descartadas, reconfiguração da equipe, mudanças tecnológicas e muitas horas de reuniões para tentar entender o fato de não conseguirmos fazer o projeto entrar em fase de testes e uso. Ele virou quase um meme na empresa, de tanto que as pessoas queriam ajudar e vê-lo lançado.

Este definitivamente não era um projeto óbvio e sempre era confundido com a nova plataforma como um todo. Inclusive na hora de discutirmos o produto, nos confundíamos com os termos usados entre as equipes e as lideranças. Foi quando percebemos que uma das principais questões era a definição do problema e alinhamento do discurso para a equipe do produto, assim como para toda a VTEX.

Primeiros rascunhos

As maiores necessidades do projeto eram:

  • Definir o problema de forma sólida e clara antes de pensar na solução
  • Alinhar o discurso e vocabulário de termos técnicos
  • Dar autonomia de forma flexível para o perfil de usuário mais leigo da plataforma
  • Atender também ao perfil técnico de desenvolvedor
  • Superar a expectativa e recuperar a confiança diante da frustração do usuário com problemas conhecidos da versão antiga em uso
  • Possibilitar a criação de diferentes versões de configurações da loja para pré-visualização em tempo real e para o futuro recurso de Teste A/B

Princípios de design

  • Sólido
  • Global
  • Confiável
  • Direto
  • Audacioso

Definição e Vocabulário

Para começar a colocar ordem na casa, usamos a técnica de Internal Press-Release. Consiste em escrever um texto no formato de release para a imprensa antes mesmo de começar a pensar a solução, com linguagem simples e imaginando que o produto estava sendo lançado naquele dia. É como trabalhar de trás para frente para estimular a definição de uma visão sólida do produto.

Com a ajuda de um framework de 6 perguntas, disparei um formulário no Slack para os stakeholders diretos e compilei as respostas num rascunho do release. Em seguida a equipe do Storefront revisou e iterou no texto, tínhamos então uma visão geral do produto que estávamos criando. Além disto, para falarmos a mesma língua e batermos o martelo em conceitos que ainda estavam em aberto, criamos um vocabulário colaborativo com base no livro How to make sense of any mess.

  1. Para quem o produto foi criado e quem o criou?
  2. O que o produto faz e como se chama?
  3. Onde será usado e onde alguém consegue encontrá-lo para usar?
  4. Quando pode ser usado e quando estará disponível?
  5. Por que o produto é notável e por que é relevante para sua audiência?
  6. Como o produto atende a uma necessidade e como resolve um problema?
Internal Press release

Mapeamento de jornada do usuário

Jornada do usuário, do quadro branco ao UXpressia

O mapeamento da jornada do usuário era fundamental para planejarmos que tipo de interação e soluções entregaríamos em cada ponto de contato entre o produto e o usuário. Neste momento decidimos focar iniciamente na jornada do perfil técnico: o Desenvolvedor, já que naturalmente teria mais pontos de contato por ser o perfil de usuário avançado da ferramenta.

Protótipos

Com o perfil definido, partimos para o rascunho e a exploração de conceitos dos recursos que o produto ofereceria. Foram horas de quadro branco, papel, caneta e tesoura com grades, placeholdes e componentes de papel.

Loja exemplo e Styleguide

Loja de exemplo para desenvolvedores

Chegamos a conclusão que a única forma de fazer a melhor ferramenta de desenvolvimento de lojas e apps para a plataforma seria colocando-se no lugar de um desenvolvedor VTEX, tendo uma loja de verdade para cuidar. Foi aí que pedimos a ajuda de um dos nossos colegas, o Afonso, que já era dono de uma loja VTEX e topou ser (digamos assim...) nossa cobaia. Desenhamos uma versão nova do layout de sua loja Pilates Lovers do zero, já usando a nova estrutura IO com o Render e Storefront.

Refinamos tecnicamente a loja tendo em mente o trabalho de um desenvolvedor de agência parceira da plataforma (que geralmente trabalhava em equipe), adicionando o conceito de Styleguide para definir variáveis de temas das lojas como cores e tipografia. Isto baseado no framework de CSS Atômico Tachyons—ideal para a tecnologia React usada no Frontend e Backend do sistema, altamente escalável. A loja também tinha uma estrutura de grid responsivo e flexível para receber os mais diversos tipos de componentes para comércio eletrônico.

Em média, a cada 3 semanas fazíamos pessoalmente alguns hands on com desenvolvedores convidados do ecossistema da VTEX, coletando feedbacks e encontrando pontos cegos.

Tecnologias: React, node.js, GraphQL, Tachyons CSS

Placeholder e Componentes

Placeholders e componentes na grade da loja

O próximo grande passo era explorar o que foram considerados os dois conceitos básicos do sistema: Placeholder e Components. O primeiro era uma área da loja definida pelo desenvolvedor para que gerentes manipulassem suas configurações ou adicionassem componentes diversos como banners, prateleiras e menus. Isto que daria a possibilidade dos desenvolvedores criarem e oferecerem apps com componentes customizáveis para todos os clientes da plataforma, por meio da Extension Store.

Esquema gráfico de placeholder e componentes da loja Pilates Lovers

Render em ação

Próximos passos

Pela proximidade do evento anual de lançamentos da VTEX para parceiros na época, o projeto foi pausado para a equipe conseguir focar energias na criação da nova interface gráfica do IO e Extension Store, projeto do qual também participei como designer. Os próximos passos seriam:

  • Conceito e interface gráfica do editor de configurações de componentes
  • Integração da UI com a Extension/App Store
  • Versionamento e Rascunhos de configurações
  • Teste A/B

Créditos e Time

  • Anderson M., Backend Developer
  • Bruno A., Backend Developer
  • Guilherme R., Frontend Developer
  • Thor A., Frontend Developer

Mais Projetos

Trabalho com web desde 2002 e tenho mais de 13 anos de prática focada na experiência de uso e na qualidade de artefatos digitais para o ambiente web e móvel

Baixar o CV

Interesses gerais

Produção cultural • Filosofia • Produção musical • Afrofuturismo • Culinária • Tipografia • Psicologia • Gestalt • Hip Hop • Canto • Ciclismo • Yoga • Viagens • Empresas Sociais • Astronomia • Física Quântica

Contato também pelo email: eu@rodrigomuniz.com