Cripto HostSimplificando a Infraestrutura Web3 e Hospedagem de Nodes

Duração Janeiro 2026 – Presente
Papel UX/UI Designer
Ferramentas Figma (Design Tokens), FigJam, React / Tailwind Specs
Serviços UX Strategy, Design System, Hand-off e UI Redesign
Cripto Host Banner Principal - Plataforma de Infraestrutura Web3
Contexto

Visão Geral do Projeto

Como UX/UI Designer na Cripto Host, fui responsável pela estratégia e concepção de soluções UX/UI para um ecossistema Web3 em rápida expansão, com foco principal em escalabilidade e simplificação de infraestruturas descentralizadas.

A Cripto Host é uma plataforma focada em hospedagem de nodes e fração de mineração de Bitcoin, permitindo que usuários comuns e investidores institucionais participem do suporte a redes blockchain sem lidar com a complexidade de servidores físicos, manutenção ou linhas de comando arcaicas.

Minha missão foi transformar essa infraestrutura técnica complexa em um produto digital transparente, altamente seguro, amigável e escalável tanto para novos usuários quanto para engenheiros de desenvolvimento.

Declaração do problema

O Desafio e Objetivos

O Desafio

O ecossistema Web3 gera forte desconfiança no primeiro uso. Permissões obscuras em conexões de carteiras virtuais, falta de clareza nas métricas de rendimento em tempo real e modais de transação confusos causavam altas taxas de desistência e dúvidas recorrentes dos usuários.

O Objetivo

Redesenhar a jornada de conexão de carteiras adicionando etapas educativas guiadas (+45% de conversão), estruturar um dashboard intuitivo de rendimentos de nodes em tempo real em R$/USD (+40% de retenção de usuários) e unificar a UI de transações (-30% de atrito).

Metodologia

Design Process

Para estruturar o projeto Cripto Host com alto nível de usabilidade, transparência financeira e foco total nas necessidades do usuário, conduzi o processo criativo guiado pela metodologia de Design Thinking dividida em 5 etapas iterativas: Empathize, Define, Ideate, Prototype e Test.

Esquema do Processo de Design Thinking (Empathize, Define, Ideate, Prototype, Test)
Empatia

Análise Competitiva de Mercado

Para identificar padrões da indústria e oportunidades de diferenciação na experiência do usuário de infraestrutura Web3, analisei quatro grandes plataformas concorrentes:

QuickNode
Web3 Infrastructure
Pontos Fortes
  • Suporte a múltiplas redes blockchain
  • APIs corporativas com alta estabilidade
Pontos Fracos
  • Interface extremamente técnica para não-devs
  • Falta de onboarding guiado e microcopy educativo
Web3 APIs Dev Focus
Infura / Alchemy
Developer Platform
Pontos Fortes
  • Documentação técnica de excelência
  • Métricas de chamadas RPC em tempo real
Pontos Fracos
  • Não oferece planos simplificados para investidores finais
  • Falta de histórico visual de recompensas
RPC Nodes Developer UI
Kiln Staking
Institutional Staking
Pontos Fortes
  • Design visual elegante e moderno
  • Forte sensação de segurança institucional
Pontos Fracos
  • Sem explicações de permissões no modal de carteiras
  • Curva de aprendizado íngreme para iniciantes
Institutional Modern UI
Allnodes
Hosting e Staking
Pontos Fortes
  • Preços acessíveis e notificações via e-mail
  • Suporte a mais de 70 protocolos de staking
Pontos Fracos
  • UI desatualizada e inconsistência entre componentes
  • Erros frequentes durante confirmações de transação
Multi-coin Inconsistent UI
Pesquisa de usuário

Entrevistas e Achados Chave

Realizei pesquisas qualitativas e testes de usabilidade com usuários de criptoativos para entender as maiores barreiras de entrada no ecossistema Web3:

80%

O Medo de Conceder Permissões Desconhecidas

80% das desistências no fluxo inicial aconteciam no momento em que o popup da MetaMask ou Phantom aparecia. Sem explicações claras de que a conexão apenas lê o endereço público, os usuários temiam perder fundos ou assinar contratos maliciosos. E para resolver isso, criamos um onboarding guiado em etapas interativas com explicações contextuais de segurança antes de abrir o modal da carteira, aumentando a conversão em 45%.

75%

Falta de Clareza no Retorno Financeiro dos Nodes

75% dos usuários relataram dificuldades para entender o rendimento diário dos nodes em moeda fiduciária (BRL/USD) e o status real de funcionamento dos servidores. A ausência de gráficos de desempenho transparentes gerava dúvidas frequentes e desconfiança. E para resolver isso, desenvolvemos um dashboard de monitoramento de nodes em tempo real com conversão automática de rendimentos para R$/USD e indicadores de uptime, elevando a retenção em 40%.

70%

Falta de Familiaridade e Medo de Erro em Depósitos

70% das desconfianças ocorriam em modais de transação sem padronização nas informações de taxas de rede (gas fee) e valores estimados, provocando hesitação e cancelamentos. E para resolver isso, padronizamos o Design System em modais de transação com estimativas transparentes de taxas de gas e retornos, reduzindo atritos em 30%.

Arquétipos de usuários

Personas de Usuário

Lucas Silva
Lucas Silva
29, Investidor Cripto Iniciante
São Paulo, SP
"Quero participar da rede de Bitcoin e hospedagem de nodes, mas morro de medo de clicar em 'Assinar' na carteira sem entender exatamente o que estou autorizando."
Sobre

Lucas é investidor de tecnologia em São Paulo e busca diversificar seu patrimônio com renda passiva de mineração e hospedagem de nodes, mas exige transparência em conexões Web3 e microcopy explicativo.

Objetivos Principais
  • Conectar sua carteira digital de forma guiada e 100% segura
  • Entender rendimentos diários em termos simples em R$/USD
  • Evitar erros em depósitos de infraestrutura de mineração
Dores e Frustrações
  • Jargões técnicos confusos e modais de carteira sem explicações de permissão
  • Receio constante de assinar contratos maliciosos e perder fundos
Motivações
Segurança e Clareza
Facilidade de Uso
Rendimento Passivo
Rodrigo Torres
Rodrigo Torres
34, Engenheiro de Software e Node Operator
Florianópolis, SC
"Preciso de um dashboard intuitivo com monitoramento em tempo real de uptime e métricas de rendimento convertido em R$/USD para acompanhar meus nodes sem complicação."
Sobre

Rodrigo opera servidores descentralizados e investe em hospedagem de nodes. Valoriza painéis visuais com gráficos em tempo real, métricas de latência precisas e relatórios de rendimentos diários sem poluição de dados.

Objetivos Principais
  • Acompanhar uptime de servidores e logs de latência em tempo real
  • Visualizar rendimentos diários convertidos em R$/USD de forma simples
  • Executar transações de alta frequência sem atrito
Dores e Frustrações
  • Dificuldade de acompanhar a saúde do node e o status de uptime em tempo real
  • Falta de relatórios consolidados de recompensas e projeções financeiras
Motivações
Transparência de Rendimentos
Desempenho Técnico
Monitoramento em Tempo Real
Estrutura de ideação

POV e Como Podemos (HMW)

POV 01 · Onboarding

Usuários Web3 iniciantes precisam de transparência e explicações didáticas nas permissões de carteira para sentirem segurança na conversão inicial.

HMW 01 (+45% Conversão)

Como podemos transformar a jornada de conexão de carteiras digitais inserindo etapas educativas guiadas e microcopy estratégico para eliminar o atrito e aumentar a conversão em 45%?

POV 02 · Rendimentos e Uptime

Operadores e investidores de nodes precisam visualizar métricas de uptime e rendimentos diários convertidos para moeda fiduciária (BRL/USD) de forma simples e transparente.

HMW 02 (+40% Retenção)

Como podemos desenhar um dashboard visual intuitivo de monitoramento de nodes em tempo real com gráficos de shares e estimativas em R$/USD para aumentar a retenção de usuários em 40%?

POV 03 · Transações

Operadores de transações de nodes precisam de padrões visuais consistentes ao confirmar depósitos para evitar hesitações e erros de operação.

HMW 03 (-30% Atrito)

Como podemos padronizar a UI de transação em toda a plataforma para criar familiaridade visual imediata e reduzir atritos/erros em 30%?

Alinhamento estratégico

Matriz de Objetivos do Projeto

Objetivos de Negócio

  • Aumentar a conversão no onboarding em +45%
  • Aumentar a velocidade de entrega do time em +40% com Design Tokens
  • Consolidar a Cripto Host como plataforma líder e confiável

Objetivos do Usuário

  • Conectar carteiras virtuais sem receio de segurança
  • Entender custos de gas e retornos estimados claramente
  • Operar transações sem erros em uma interface familiar

Considerações Técnicas

  • Estruturação de Design Tokens sincronizados com React/Tailwind
  • Tradução de requisitos de infraestrutura blockchain em user stories
  • Gestão de estados de transação (Pending, Success, Reverted)
Arquitetura

User Flow

Mapeei o resumo do User Flow com o fluxo principal para melhor entendimento do onboarding Web3: desde a seleção da rede e conexão da carteira criptográfica (MetaMask/WalletConnect), até a validação da assinatura digital e o deploy automático do node.

User Flow Diagram Cripto Host Web3 Onboarding
Layouts

Wireframes

A etapa de wireframing focou na organização dos cards de métricas de node, simplificação das tabelas de rendimentos e prototipagem dos modais de confirmação de transação.

Wireframe Visão Geral de Telas e Fluxos Cripto Host
Wireframe Dashboard de Métricas e Gráficos Cripto Host
Wireframe Painéis de Configuração, Filtros e Lista de Nodes Cripto Host
Design System

Identidade Visual

Construí o Design System do zero no Figma utilizando Design Tokens nomeados exatamente como as classes utilitárias do Tailwind CSS. Essa sinergia alinhou a linguagem entre design e engenharia, garantindo um ganho de 40% de eficiência nas entregas.

Paleta de Cores e Tokens

#ED0F6D Cyber Pink
100 200 300 400 500 600 700 800 900
#A50649 Deep Magenta
100 200 300 400 500 600 700 800 900
#2D155F Neon Purple
100 200 300 400 500 600 700 800 900
#1C0647 Deep Violet
100 200 300 400 500 600 700 800 900
#221C30 Preto / Neutro
100 200 300 400 500 600 700 800 900
#10B981 Success
100 200 300 400 500 600 700 800 900
#F59E0B Warning
100 200 300 400 500 600 700 800 900
#EF4444 Error
100 200 300 400 500 600 700 800 900
Tipografia oficial
Urbanist
A fonte oficial utilizada na concepção do projeto Cripto Host é a Urbanist, escolhida por sua geometria limpa, legibilidade moderna e excelente hierarquia visual em interfaces Web3.
Headline 1
Font Urbanist
Weight Bold (700)
Size 64px
Letter spacing -1.5px
Headline 2
Font Urbanist
Weight SemiBold (600)
Size 48px
Letter spacing -1px
Headline 3
Font Urbanist
Weight SemiBold (600)
Size 32px
Letter spacing -0.5px
Headline 4
Font Urbanist
Weight Medium (500)
Size 24px
Letter spacing 0px
Paragraph — O rápido mocho-galego voa sobre o vale à noite, explorando a interface.
Font Urbanist
Weight Regular (400)
Size 16px
Letter spacing 0px
Small / Caption — Hashes de Transação e Endereços Web3
Font Urbanist
Weight SemiBold (600)
Size 13px
Letter spacing 0.5px

Espaçamento

4px | Detalhes space-1
8px | Padding apertado space-2
12px | Padding interno space-3
16px | Padding padrão space-4
24px | Relacionados space-5
32px | Card space-6
48px | Blocos space-7
64px | Seções space-8
96px | Espaços Seções space-9
128px | Espaços Hero space-10

Raio de Borda

4px | Tags e Chips radius-xs
8px | Inputs e Campos radius-sm
12px | Botões, Cards, Tooltips e Dropdowns radius-md
16px | Cards Principais e Modais radius-lg
24px | Containers grandes e destaques radius-xl
999px | Badges circulares e pills radius-full
Design visual e protótipo

Protótipos das Telas

As telas finais entregaram um visual sofisticado, limpo e com alta legibilidade de dados, facilitando a navegação em dashboards complexos de infraestrutura descentralizada:

Visão Geral do Dashboard Principal Cripto Host

Dashboard Principal Cripto Host – Monitoramento de rendimentos diários convertidos em R$/USD e saúde física dos nodes em tempo real.

Tela de Conexão de Carteira Guiada

Onboarding Guiado de Carteiras – Explicações educativas contextuais de permissões para transmitir segurança total no primeiro uso.

Tela de Confirmação de Transação Padronizada

Modal de Transação Padronizado – Transparência total em taxas de gas, valores estimados e confirmação em 1 clique.

Tela de Monitoramento de Node Uptime

Monitoramento de Uptime e Latência – Gráficos limpos em tempo real para acompanhamento técnico de servidores sem poluição.

Tela de Histórico de Recompensas de Mineração

Histórico de Recompensas e Staking – Relatórios financeiros consolidados de fração de mineração de Bitcoin e rendimentos acumulados.

Tela Mobile Responsiva do Cripto Host

Interface Mobile Responsiva – Gestão de nodes e depósitos na palma da mão adaptada para alta legibilidade.

Validação de métricas

Impacto Real

As otimizações de UX/UI foram validadas em produção e testes de usabilidade contínuos, gerando resultados expressivos em conversão e eficiência operacional:

+45%
Conversão no Onboarding
Etapas guiadas e microcopy
+40%
Eficiência de Hand-off
Design Tokens React/Tailwind
-30%
Atrito em Transações
UI padronizada de depósitos
"Pela primeira vez consegui conectar minha carteira Web3 entendendo exatamente o que o aplicativo estava solicitando. O texto explicativo me passou muita confiança."
"Como desenvolvedor, a documentação com Design Tokens em Tailwind acelerou absurdamente nossa implementação. Não tivemos nenhum retrabalho visual."
Visão de futuro

Impacto Futuro

O reposicionamento de UX/UI da Cripto Host provou que a simplificação de produtos Web3 é a chave para a adoção em massa. O roadmap futuro inclui avanços em 4 pilares estratégicos:

01

Suporte Multichain Automático

Expandir o Design System para suporte nativo a redes como Solana, Arbitrum e Polygon com troca rápida de rede.

02

Notificações Inteligentes

Alertas em tempo real via Telegram e push sobre rendimentos de nodes e variações de hash rate da rede.

03

Dashboard Analítico Avançado

Relatórios fiscais automatizados e métricas de eficiência energética para grandes operadores de infraestrutura.

04

Alinhamento Contínuo com Eng

Apoio constante na priorização do backlog com a liderança técnica, traduzindo requisitos de infraestrutura em user stories.

Cripto Host - Visão Geral da Plataforma Node

Explore o Protótipo Interativo

Navegue pelo fluxo de onboarding guiado, conexão de carteira e dashboard de gestão de nodes no Figma.

Ver Protótipo no Figma