DESIGN SYSTEM
Loja Modelo VTEX
Visão geral
O projeto consiste em um recurso para agilizar e otimizar a criação de páginas de e-commerce, a fim de aumentar a quantidade de projetos absorvidos pela agência, agilizar o desenvolvimento dos layouts e garantir a entrega com qualidade e excelência
Meu papel
UI Designer, Design Ops
Período
2022
Compreendendo o problema
A Original.io é uma empresa que cria soluções de e-commerce para os mais diversos clientes, variando desde pequenos negócios, até grandes marcas. As soluções variam desde redesigns e consultorias sobre usabilidade, até criações de plataformas digitais do início ao fim, com foco em experiências que vão de cross-channel a omnichannel em casos de lojas que possuem unidade física e buscam a migração para o mundo digital. Com o aumento significativo da presença de negócios online a partir da pandemia global, houve também um aumento no volume de projetos, que muitas vezes superavam a capacidade de trabalho da equipe.
O desafio
O principal desafio foi criar um recurso que otimizasse a criação de novos projetos com base no vasto histórico de plataformas digitais que já haviam sido produzidas pela empresa ao longo de sua história, buscando identificar e selecionar o que tais plataformas tinham de melhor e de uso mais recorrente para criar um recurso que agilizasse a criação de novas lojas digitais. O projeto seria uma plataforma para uso interno das equipes de criação e de desenvolvimento.
Metodologia e etapas
Junto com minha equipe, conduzi um mapeamento dos principais projetos criados pela empresa através dos anos, almejando identificar quais segmentos foram contemplados com maior frequência, além de mapear as estruturas de tais lojas virtuais
Realizei uma análise detalhada de tais plataformas, de modo a entender se algumas soluções encontravam-se datadas, e identificar possíveis fraquezas de projetos anteriores.
Acompanhado da equipe de criação, selecionei, nas estruturas mais relevantes identificadas nos sites selecionados, os componentes reutilizáveis mais importantes. A partir dessa seleção, comecei a organizar uma biblioteca de componentes em conjunto com a equipe de desenvolvimento.
Criei wireframes e protótipos de baixa e alta fidelidade de um modelo de loja funcional, com base nas informações coletadas nas etapas anteriores. Os modelos de lojas seriam classificados por tipo de e-commerce (ex.: loja de roupas, papelaria etc.), e estruturadas para possíveis customizações de acordo com particularidades de cada cliente. Iterar com base no feedback dos usuários e nas melhores práticas de design
Realizar testes de usabilidade com usuários reais (no caso, as equipes de design e desenvolvimento) para avaliar a eficácia das soluções propostas. Identificar pontos problemáticos e áreas de melhoria para refinamento adicional.
Trabalhar em estreita colaboração com a equipe de desenvolvimento para implementar as melhorias de design na plataforma. Realizar testes finais para garantir que todas as funcionalidades estejam funcionando conforme o esperado antes do lançamento.
Exemplos de fluxos criados a partir das etapas de pesquisa do projeto
Layout da Solução
Exemplo Fluxo de Navegação Global
Exemplo Home
Exemplo Menu
Resultados Esperados
Com a loja modelo criada, uma vez que o cliente já tivesse alguma identidade visual definida, grande parte dos elementos do layout já estariam prontos apenas através da aplicaçção desta identidade em componentes-pai, proporcionando uma economia relevante de trabalho. Esperava-se com isso, que a criação da loja modelo de e-commerce da Original.io leve a:
- Redução no tempo para criação de novos projetos.
- Enriquecimento do Design System.
- Aumento do fluxo de projetos e arrecadação.
- Maior eficiência no processo de handoff.
Conclusão
A criação da loja modelo de e-commerce da Original.io foi uma iniciativa crucial para otimizar o tempo de criação de novos projetos, reduzindo em 50% o tempo de desenvolvimento dos mesmos, sem prejudicar a qualidade das entregas. Além disso, foi uma iniciativa que garantia uma curadoria constante dos componentes utilizados com maior recorrência em projetos, fortalecendo o design system que, na época, ainda estava em um estágio embrionário na empresa. Este projeto criou um precedente importante para a evolução de processos escaláveis.
PT_BR 
EN