01. Visão Geral & Contexto
A TrekkSoft é a plataforma líder em software de reservas e gestão operacional (B2B SaaS) para provedores de passeios e atividades ao ar livre. Com uma base global de usuários e uma oferta robusta de funcionalidades para operadoras de turismo, o projeto consistiu no redesign integral de sua presença digital e canais de aquisição.
Atuei como UX/UI & Product Designer no projeto, trabalhando em estreita colaboração com as equipes de marketing, gestores de produto e stakeholders globais. Fui responsável de ponta a ponta pelo ciclo de entrega do produto digital: desde a Arquitetura da Informação, concepção dos wireframes, desenvolvimento de toda a UI e design de interação, até o desempenho e implementação técnica das páginas e módulos dentro do HubSpot CMS Hub.
O novo ecossistema opera sob uma arquitetura multisite unificada atendendo a 4 idiomas (Inglês, Alemão, Espanhol e Italiano), otimizada para a jornada multiplataforma dos operadores de turismo e para a captura escalada de leads qualificados.
Visão de Product Design: Alinhar as necessidades dos usuários finais aos objetivos estratégicos de aquisição B2B do produto. Uma arquitetura bem resolvida aproxima tomadores de decisão da proposta de valor, enquanto um Design System parametrizado confere eficiência de engenharia na escala em múltiplos idiomas.
02. O Problema & Diagnóstico UX
Antes desta intervenção, a plataforma acumulava complexidades de usabilidade e débito de infraestrutura típicos de softwares corporativos em rápido crescimento. Por meio do mapeamento de fluxos de navegação e colaboração contínua com as equipes de produto e marketing, identificamos os principais gargalos:
- Inconsistência Visual e Baixa Reusabilidade de Código: A estrutura anterior continha páginas com estilos visuais destoantes e componentes duplicados no código. Modificações em layouts ou em botões de ação demandavam refatoração demorada de módulos, gerando pouca flexibilidade e manutenção onerosa.
- Complexidade na Escala Multisite (4 Idiomas): Necessidade de sustentar rigor em consistência de marca simultaneamente em Inglês, Alemão, Espanhol e Italiano. O design necessitava acomodar variações drásticas na extensão das palavras sem comprometer a quebra de layout ou a legibilidade dos menus.
- Fricção em Experiências Mobile e Tablet: Operadores de turismo passam a maior parte do expediente em trânsito e em campo, dependendo de smartphones e tablets para gerenciar reservas. A navegação anterior apresentava excesso de carga cognitiva nas telas menores.
- Desconexão com Funil do HubSpot: A captação de leads exigia fluxos longos de formulário, gerando pontos de abandono ao agendar demonstrações do software.
03. O Processo de Design & Implementação
Adotei uma abordagem holística de Product Design, atuando ativamente nas três disciplinas fundamentais do projeto: Estratégia de Estruturação (IA), Interface (UI) e Construção Front-end (Dev):
1. Arquitetura da Informação & Wireframing
Reestruturei a árvore de navegação e a categorização de recursos do site para facilitar a descoberta de funcionalidades por tipo e porte de operadora. Criei fluxogramas de navegação e wireframes interativos para validar a fluidez cognitiva da jornada antes da produção visual.
2. Design System & UI de Alto Contraste
Desenvolvi um sistema visual próprio e coeso, desenhado para transmitir solidez, modernidade e segurança no segmento fintech e software de gestão:
- Hierarquia Tipográfica: Adoção de tipografia humanista geométrica, acelerando o escaneamento de textos complexos e comparativos de funcionalidades.
- Componentização: Padronização de botões, formulários progressivos e cards interativos com foco absoluto em usabilidade e precisão.
color.blue.500
color.accent
font.heading.xl
space.ruler
3. Desenvolvimento no HubSpot CMS
Implementei o front-end utilizando módulos customizados e parametrizados no HubSpot CMS, garantindo que as decisões tomadas no design fossem traduzidas com fidelidade milimétrica para o ambiente de produção.
04. Arquitetura Multisite & Automação no HubSpot
A integração profunda com o HubSpot eliminou barreiras entre design, desenvolvimento e operação comercial:
1. Sistema Modular Drag-and-Drop
Criei uma biblioteca reutilizável de componentes (Custom Modules) com interface de montagem por Drag-and-Drop, permitindo que o time de marketing lance e altere landing pages regionais em qualquer um dos 4 idiomas mantendo fidelidade total ao Design System, sem necessidade de interferência técnica de código em novos lançamentos.
2. Engenharia de Localização em 4 Idiomas
Implementação estruturada para gestão de dicionários e roteamento multisite, prevenindo problemas de SEO internacional (Hreflang tags configuradas milimetricamente).
3. Integração Funcional Contínua
- Formulários Dinâmicos Inteligentes: Formulários progressivos que identificam o porte do operador (por volume de reservas) para rotear o lead direto para o Executivo de Conta adequado no HubSpot CRM.
- Provas Sociais e Feed B2B Automatizados: Carregamento ultra rápido de testemunhos e novidades de mercado através de tabelas relacionais (HubDB), atualizadas em tempo real em todas as versões de idioma.
05. Usabilidade Multidevice & Performance
Desenvolvido sob premissas Mobile-First, cada layout foi projetado para responder de forma veloz e adaptativa nos principais dispositivos utilizados pelos operadores em campo:
- 📱 Ergonomia e Tap Targets em Mobile: Otimização de áreas de toque e remoção de barreiras visuais para agendamento rápido via smartphones.
- 🖥️ Aproveitamento de Telas Ultra-Wide: Layouts de desktop com respiro estratégico (whitespace) e prévias dinâmicas da interface do painel TrekkSoft.
- ⚡ Performance Leve: Carga assíncrona para elementos dinâmicos, garantindo tempo de reposta imediato mesmo em conexões instáveis em áreas turísticas remotas.
Value Proposition & Primary CTAs
Interactive tour scheduler simulation
HubSpot dynamic lead capture form
06. Impacto & Resultados no Produto
O novo ecossistema consolidou a presence digital da TrekkSoft, empoderando times comerciais e redefinindo a experiência de prospecção da plataforma:
07. Lições & Conclusões de Product Design
Atuar na concepção criativa e no desenvolvimento técnico diretamente no HubSpot CMS ressalta o valor estrutural de uma abordagem ponta a ponta em Product Design.
Integrar Arquitetura da Informação, UI/UX e a Implementação Front-end permitiu harmonizar a usabilidade de forma coesa, esteticamente refinada e altamente performática para a operação em escala em 4 idiomas.