Loja Modelo VTEX – Thiago Gomes UX Design

DESIGN SYSTEM

VTEX Template Store

Overview

The project consists of a resource to speed up and optimize the creation of e-commerce pages, in order to increase the number of projects absorbed by the agency, speed up the development of layouts and guarantee delivery with quality and excellence.

My Role

UI Designer, Design Ops

Period

2022

Understanding the Problem

Original.io is a company that creates e-commerce solutions for the most diverse clients, ranging from small businesses to large brands. The solutions range from redesigns and usability consultancy to the creation of digital platforms from start to finish, with a focus on experiences ranging from cross-channel to omnichannel in the case of stores that have physical units and are looking to migrate to the digital world. With the significant increase in the presence of online businesses since the global pandemic, there has also been an increase in the volume of projects, which often exceeded the team's working capacity.

The challenge

The main challenge was to create a resource that would optimize the creation of new projects based on the vast history of digital platforms that had already been produced by the company throughout its history, seeking to identify and select the best and most frequently used features of these platforms in order to create a resource that would speed up the creation of new digital stores. The project would be a platform for internal use by the creative and development teams.

Methodology and steps

1) Historical survey of projects

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

2) Heuristic Analysis

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.

3) Compiling components

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.

4) Wireframing and Prototyping

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

5) Usability Testing

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.

6) Implementation and Launch

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.

Examples of flows created from the project's research stages

SOLUTION's LAYOUT

Global Navigation Flow Example

Homepage example

Menu Example

Expected Results

After the template store was set up and the client had established a visual identity, a significant portion of the layout elements could be completed with minimal effort by just applying the identity to the parent components. The development of the e-commerce template shop for Original.io was intended to result in:

Conclusion

The creation of Original.io's e-commerce template store was a crucial initiative for optimizing the time taken to create new projects, reducing development time by 50% without affecting the quality of deliveries. In addition, it was an initiative that ensured constant curation of the components used most frequently in projects, strengthening the design system which, at the time, was still in its infancy in the company. This project set an important precedent for the evolution of scalable processes.