Case 02 / 03 UX/UI Design · End-to-end · Design System Out 2022 – Out 2023

Design de produto end-to-end — da pesquisa ao design system

FábricaInfo — UX/UI Designer Jr. → Pleno

FábricaInfo
Personas
Sitemaps
Design System
Protótipos
Testes
12
Personas
3
Produtos
1 DS
Design System
Empresa FábricaInfo
Cargo UX/UI Designer Jr. → Pleno
Período Out 2022 – Out 2023
Tipo Produto Digital · Design System · End-to-end
Contexto

O desafio

A FábricaInfo precisava de uma abordagem sistematizada de design para seus produtos digitais. Sem processos definidos, as entregas eram inconsistentes e o tempo gasto por ciclo de desenvolvimento era maior do que o necessário.

O objetivo foi estabelecer um processo de design end-to-end, da pesquisa com usuários até a criação de um design system que garantisse consistência e eficiência nas entregas futuras.

"Estruturar um processo de design repetível e escalável para produtos digitais."

Processo

Como foi feito

01

Criação de Personas

Pesquisa qualitativa para entender o perfil dos usuários dos produtos. Desenvolvimento de personas detalhadas com contexto, objetivos, frustrações e comportamentos digitais.

02

Sitemaps e Arquitetura

Estruturação da arquitetura de informação com sitemaps completos. Identificação da hierarquia ideal para cada produto conforme as necessidades das personas.

03

Design System

Criação do design system completo no Figma: tokens de cor, tipografia, espaçamento, componentes base (botões, inputs, cards, modais, navegação) e documentação de uso.

04

Prototipação e Testes

Desenvolvimento de protótipos interativos de alta fidelidade. Execução de testes de usabilidade com usuários reais e análises heurísticas. Ajustes iterativos baseados nos resultados.

05

Apresentação para Stakeholders

Apresentação de resultados e métricas para stakeholders e times de desenvolvimento a cada ciclo, garantindo alinhamento e facilitando a priorização de backlog.

Entregáveis

O que foi produzido

👤

Personas

Perfis detalhados de usuários para guiar decisões de design

🗄️

Sitemaps

Arquitetura de informação completa para cada produto

🎨

Design System

Sistema de componentes escalável e documentado no Figma

📱

Protótipos Mobile e Desktop

Protótipos navegáveis para validação e handoff

🔍

Análises Heurísticas

Avaliação sistemática de usabilidade com recomendações

📊

Relatórios de Métricas

Monitoramento de KPIs de sucesso entregues aos stakeholders