Todos os trabalhos

De um conceito em aberto a um app de carro conectado com ótima avaliação

Liderando o design do app oficial de carro conectado da Honda — da estratégia ao desenho da solução final

A home do app myHonda Connect, com os controles remotos ao alcance

A home — controles remotos ao alcance. Idealmente um clipe curto de um comando remoto sendo acionado (ligar o carro ou o ar).

Papel
Product designer — estratégia, pesquisa, direção de experiência e craft
Time
UX designer pleno, UI designer pleno
Período
set/2020 – mar/2021
Contexto
Honda · Stefanini

Como conduzi o design do app oficial de carro conectado da Honda — de um conceito aberto, passando por estratégia e pesquisa, até um produto no ar. Hoje com 4,9 no Google Play e mais de 100 mil downloads.

Escopo definido, conceito em aberto

O My Honda Connect é a plataforma oficial de serviços conectados da Honda — controles remotos do veículo, informações em tempo real, uma camada de segurança e proteção, e o relacionamento com a Honda, tudo pela telemática do carro.

A Honda chegou com a estratégia e o escopo de funcionalidades já definidos, mas com o conceito muito aberto — sem consenso sobre qual caminho tinha o melhor custo × benefício. Somava-se a isso a complexidade da própria Honda: uma empresa com várias camadas de gestão, onde uma decisão de produto atravessa muitas áreas. Então o desafio real nunca foi “quais funcionalidades” — era transformar um conceito aberto em uma experiência definida, dentro de uma organização que primeiro precisávamos aprender a atravessar.

A Honda trouxe duas âncoras: o escopo e a estratégia fechados, e um conjunto de pesquisas de mercado que usamos como base. Nosso papel a partir daí foi conduzir a estratégia de design e a pesquisa — reduzir a ambiguidade a uma direção que o time pudesse construir com segurança.

Entender a Honda por dentro, o usuário por fora

Para não desenhar no escuro, conduzimos um discovery em três frentes.

  1. Dentro da Honda

    Sete entrevistas com áreas diferentes — marketing, CRM, vendas comerciais, publicações técnicas, entre outras. Revelaram a expectativa e as preocupações de cada área, e como cada uma poderia nos apoiar no caminho. Numa empresa com várias camadas de gestão, foi isso que nos deu a leitura de como as decisões são tomadas e de como o produto reverberaria pela organização.

  2. O usuário

    Entrevistas com usuários de perfis extremos — motoristas experientes, com repertório em vários carros e familiaridade real com apps de carro conectado. Perfis extremos porque expõem os limites da experiência: o que esse usuário espera, onde a tecnologia costuma frustrar e o que já virou expectativa consolidada na categoria.

  3. A categoria

    Um benchmark de soluções nacionais e internacionais — como esse tipo de produto é ofertado pelo mundo: funcionalidades, qualidade da experiência, forças e fraquezas de cada concorrente. Virou uma das bases mais importantes para calibrar o que era padrão da categoria, o que era diferencial e onde a Honda tinha espaço.

Consolidamos tudo em um relatório executivo — a pesquisa traduzida em insumos de decisão para levar ao workshop.

Benchmark internacional — apps de carro conectado da BMW, Jeep, Volvo, Mitsubishi e Hyundai, tela por tela
O benchmark da categoria — BMW, Jeep, Volvo, Mitsubishi, Hyundai, tela por tela, usado para calibrar o que era padrão da categoria e onde a Honda tinha espaço para diferenciar.

Três dias para fechar o escopo — e decidir

Com o relatório em mãos, levamos tudo para um workshop de três dias com o time de design e o time de negócios da Honda. O objetivo era sair com uma decisão, não com mais opções.

Ao longo dos três dias, exploramos áreas de oportunidade e a jornada do usuário, e chegamos a duas entregas concretas: o escopo final do produto, alinhado entre design e negócio; e uma base de experiência — incluindo um primeiro desenho das telas do que seria uma boa experiência. Essa base saiu da sala já validada entre as partes, e virou o ponto de partida para o time de design construir a experiência final.

O workshop traduziu essa etapa em um acordo baseado em artefatos: um mapa de stakeholders para saber quem realmente dependia do produto, um canvas de oportunidade conectando cada público da Honda a uma necessidade e um diferencial, e personas construídas direto da pesquisa. A partir daí, mapeamos a jornada AS-IS do usuário com o carro — da intenção de compra às primeiras viagens, revisões e renovação — e usamos as fricções e o sentimento que encontramos ali, somados às prioridades do próprio negócio, para fechar o escopo do produto com confiança real, não só uma sala de pessoas concordando.

O canvas do workshop — mapa de stakeholders, canvas de oportunidade, personas e a jornada AS-IS do usuário
Do workshop — o mapa de stakeholders, o canvas de oportunidade, as personas e a jornada AS-IS do usuário usados para fechar o escopo.

Transformar um produto grande em um produto navegável

Com o escopo fechado e o caminho de experiência definido, atacamos duas frentes em paralelo. Primeiro, a arquitetura de informação. Dado o tamanho do produto — controles remotos, status e saúde do veículo, serviços e agendamentos, viagens, localização e cerca geográfica, multiperfil (condutor principal, condutor com acesso limitado, administrador de frota), planos e assinatura —, organizar essa complexidade em uma hierarquia clara e navegável foi uma decisão central. Definimos como as coisas se agrupam, o que ganha lugar na home e o que fica a um toque de distância.

Em paralelo, construímos o design system — tipografia, cor e o resto da linguagem visual. Uma escolha deliberada: partimos da identidade visual da Honda como referência, mas construímos o design system do zero, sob medida para o app. Nada foi herdado de uma solução existente da Honda.

Arquitetura de informação 1.0 — a árvore de navegação completa do app, da home a cada subseção
A arquitetura de informação — o sistema antes das telas.
Wireframe de baixa fidelidade da home, anotado explicando o propósito de cada área
A ideia começando a se materializar — wireframes iniciais da home, anotados, antes de o design system entrar.
O look and feel — escala tipográfica, paleta de cores e conjunto de ícones
O look and feel — tipografia, cor e o conjunto de ícones de onde o app inteiro parte.

Validado, testado, e então no ar

Com arquitetura, experiência e layout amarrados, chegamos a um protótipo de alta fidelidade e o validamos com a equipe da Honda.

Depois da validação interna, levamos a solução para um teste de usabilidade com seis usuários. Rendeu uma série de aprendizados, e a partir deles uma rodada de ajustes e melhorias que entraram na primeira versão implementada do aplicativo.

O protótipo de alta fidelidade, em um iPhone 15 Pro Max — a home, com os controles remotos ao alcance
O protótipo de alta fidelidade — o fluxo principal.
Resultados do teste de usabilidade — matriz de severidade com 6 participantes e 12 tarefas
Um termômetro das sessões — cada tarefa avaliada por participante, de uma conclusão tranquila a uma tarefa não concluída, apontando exatamente onde a experiência quebrava.
Antes e depois — botões da home relabelados com a ação
Antes e depois — a tela de mapa "Localizar" separada de "Encontrar meu carro"
Antes e depois — labels do menu inferior com contraste ajustado
Antes e depois — botões secundários do modal de confirmação suavizados
Antes e depois — "encontrar meu carro" separado em tela própria
Antes e depois — título do modal de confirmação dinâmico por ação
Antes e depois — texto de notificação da cerca geográfica reescrito com feedback visual condizente
Antes e depois — "escanear carro" removido do menu geral de controle remoto
Antes e depois — ícones de status das portas redesenhados com labels, botões renomeados para travar/destravar todas

Conveniência, segurança, relacionamento

  • Conveniência

    Controles remotos na palma da mão: ligar e desligar o carro e o ar-condicionado, travar e destravar as portas, encontrar o carro no estacionamento.

  • Segurança e proteção

    Informações do veículo em tempo real, alerta de colisão, alarme, rastreamento e cerca geográfica — com uma camada de autenticação (PIN / biometria) protegendo os comandos remotos.

  • Relacionamento e serviços

    Agendamento de revisões e serviços, histórico, manual e assistência — aproximando o cliente da Honda no pós-venda.

Três telas encadeadas — o dashboard do veículo, o status detalhado, e a troca para um segundo veículo, uma moto
Quatro seções centrais — dashboard do veículo, serviços, localizar e viagens
Contatos de emergência, controle de portas, e o fluxo do ar-condicionado desde definir a temperatura até acompanhar o climatizador
Acionar a buzina atrás de um PIN, encontrar o carro, e configurar cerca geográfica e alerta de velocidade

A interface se apóia em um design system construído do zero para o app — botões em todos os tamanhos, estilos e estados (default / inverted / light / inactive, com e sem ícones), além dos control-buttons próprios, marcadores de temperatura, hints, chevrons, snackbars e padrões de card. Tudo construído como componentes do Figma, para que uma mudança de estado em uma variante se propagasse por todos os lugares onde ela vivia.

A biblioteca de componentes do My Honda Connect no Figma — botões em vários tamanhos, estilos e estados, além de control-buttons, marcadores de temperatura, hints, chevrons, snackbars e cards
Um recorte da biblioteca de componentes do Figma — só os botões cobrem cinco tamanhos e quatro estilos com quatro estados cada, ao lado dos control-buttons, marcadores de temperatura, snackbars e cards próprios do app.

No ar, e ainda crescendo

Atuei desde o conceito inicial até a primeira versão do design do app, liderando a frente de design de produto ao lado de um UX designer pleno e um UI designer pleno. O app segue vivo e evoluindo com outros times em uma base muito semelhante ao que foi definido em projeto — não trabalho mais nele, então os números atuais das lojas refletem o produto que ajudei a originar, não um resultado que eu possa reivindicar sozinho.

Um vídeo promocional da Honda — não tenho nenhuma relação com ele ou com sua produção; está aqui só para mostrar como o app no ar funciona na prática.
4,9 / 5
Nota no Google Play
4,8 / 5
Nota na App Store
100 mil+
Downloads (Google Play)

Números atuais das lojas — entre os mais altos da categoria. A contagem de downloads só é oficial no Android; a Apple não a divulga, embora o volume de avaliações e a nota na App Store sugiram uma base de tamanho parecido. Refletem anos de trabalho de vários times desde então; liderei a experiência inicial até a primeira versão do design do app e não atuo mais no produto.