Esse é um case sobre meu período como Coordenadora de Product Design na PagSeguro e a busca por uma solução para problemas relacionados à experiência na parte deslogada da plataforma web da empresa.

Design System

Apesar de o PagSeguro ter uma cultura de design muito bem estabelecida, a prioridade é voltada para o aplicativo e para os já clientes da plataforma. Como consequência, o design system da web apresentava um atraso de desenvolvimento com relação ao app, e isso afetava principalmente a parte deslogada do site (páginas que podem ser acessadas por qualquer pessoa sem que ela precise ter uma conta), que sofria com falta de padronização, de componentes adequados e com uma experiência defasada.

Contexto

Lacuna de qualidade em relação às demais plataformas da empresa

Problemática

Time junior trabalhando em um contexto difícil, com alta interferência externa

Equipes saturadas de demandas que estavam levando muito tempo para serem executadas

Desconforto entre as equipes devido ao alto número de alterações necessárias e tempo de entrega curto

Encarando
o problema

Realizamos entrevistas com os times de Comunicação, Produtos e Tecnologia para levantar insumos sobre as visões de todos em relação ao problemas que estávamos encarando.

Além de nos trazer mais inputs sobre o trabalho, reconhecer as dores dos outros times nos ajudou a reconstruir relações que estavam prejudicadas pela forma como as demandas estavam acontecendo.

Também analisamos nossa plataforma para compreender o que estava acontecendo em termos de experiência, afim de construir uma visão mais técnica.

Padronização precisa ser uma prioridade, em engenharia e design.

Time de Tecnologia

Padrões bem estabelecidos nos ajudarão nas negociações com áreas e diretoria.

Time de Produtos

Precisamos dar mais atenção aos padrões de texto e boas práticas de SEO.

Time de Comunicação

SWOT para UX

Análise de Forças, Fraquezas, Oportunidades, Ameaças, Usabilidade, Experiência, Interface e Conteúdo do site.

O que foi identificado:

Exagero de informações

Espaços mal aproveitados

Storytelling confuso

Conteúdo repetitivo

Problemas de performance

Problemas de usabilidade

Falta de padrões

70% de acessos mobile

Mobile despriorizado

Objetivos pouco evidentes

Benefícios subestimados

Sessões monótonas

Diagnóstico

Entendendo que a falta de padronização estava na base dos nossos problemas, decidi que a ampliação do Design System através da criação de uma biblioteca de componentes para o site deslogado seria a solução mais adequada. Assim, partimos para a fase de análise técnica.

Mapeamento de todas as páginas da área deslogada do site

Categorização das páginas do site para descobrir padrões e levantar novos componentes necessários

Mapeamento de assets existentes que precisavam ser padronizados

Mapeamento de componentes existentes a serem reutilizados

Construção da solução

Para construir nossa solução nos baseamos no Atomic Design, metodologia desenvolvida por Brad Frost para criar design systems mais consistentes e padronizados dentro do desenvolvimento de uma interface.

Entregáveis

Uma biblioteca com mais de 500 componentes, documentações completas e templates dos principais modelos de páginas.

Grid e Margens

Desktop HD (1440px | 24 colunas)

Desktop (1024px | 24 colunas)

Tablet (768px | 12 colunas)

Mobile (320px | 2 colunas)

Espaçamentos verticais

Tipografia

Paleta

Paleta principal

Sereia

Utilizada nos CTAs e nos principais elementos que dão identidade ao site, como ícones e destaques.  

Variações: podem ser aplicadas quando precisamos de algum constraste ou destaque leve  em composição com a cor principal.

Dark Gray

Utilizada na maior parte dos textos, sejam títulos ou parágrafos.

Variações: o Preto é usado principalmente em situações em que o texto precisa de maior contraste (como button labels), e o Medium Gray em textos que demandam menos contraste (disclaimers).

Paleta secundária

Utiliza-se a paleta secundária quando o objetivo é criar áreas de destaque com cores e splashes, principalmente em combinação com imagens. Nesses casos, as cores são usadas em composições de gradiente, sempre com ângulo diagonal próximo a 45º. A proporção de cada cor varia de acordo com o que for mais adequado à aplicação.