Case Study
~35% de Ativação Mais Rápida, Mais Envolvimento
O processo otimizado de incorporação na plataforma e configuração de equipamentos reduziu o tempo de conclusão em 40%, diminuindo as desistências e permitindo uma gestão perfeita em múltiplos dispositivos.
Antes
Depois
Project Overview
Como designer principal de produto, simplifiquei os fluxos de trabalho usando princípios de UX como as Leis de Jakob e de Fitts para melhorar a usabilidade e escalabilidade. Projetei uma interface compatível com dispositivos móveis, validei-a através de testes e entreguei designs de alta fidelidade. Lançámos o VersaTile, um dispositivo retrofit económico com suporte para sensores integrados e adicionais, otimizando a plataforma para o registo em múltiplos dispositivos e a adaptação de unidades existentes.
Status
Shipped
Contribution
Designer Principal de Produto
Year
2022
Product
Plataforma SaaS B2B
Audience
Profissionais de Serviços de Alimentação
Competências
Design & Estratégia UX
Estratégia de Produto
Pesquisa de Utilizador
Prototipagem & Testes
Sistema de Design
Design de Conteúdo
Declaração de Problema
O processo de configuração para equipamentos existentes era excessivamente complexo, levando a frustrações e desistências. Os utilizadores tinham dificuldade com os benefícios pouco claros específicos de cada nível (Trial, Premium, Básico), e o design inconsistente tornava a expansão difícil. Estes desafios também prejudicaram a satisfação do utilizador, a retenção e a adopção a longo prazo.
Resultados e Impacto
O sistema redesenhado reduziu o tempo de configuração inicial em 20% e a configuração de equipamentos adicionais em 35%. Uma comunicação mais clara em níveis aumentou a retenção de utilizadores, enquanto um sistema de design modular melhorou a escalabilidade e garantiu que o produto fosse preparado para o futuro. A colaboração entre equipas assegurou que o design estivesse alinhado com os objetivos dos utilizadores e de negócios.
Descoberta
Quando herdei o projeto, o fluxo de configuração do VersaHub suportava três tipos de equipamentos: frigoríficos e congeladores inteligentes com compartimentos, unidades de catálogo sem Wi-Fi e unidades externas.
Auditoria
A minha primeira tarefa foi auditar o fluxo para abordar os pontos problemáticos do utilizador, melhorar a acessibilidade e garantir a escalabilidade do design. Um problema chave era o excesso de cliques. Por exemplo, o passo inicial exigia que os utilizadores selecionassem se o equipamento era compatível com WiFi através de um menu suspenso. Mostrando as opções em linha, simplificámos o processo e poupámos aos utilizadores uma interação desnecessária.
Do ponto de vista do fluxo do utilizador, identifiquei que a estrutura atual exigia que os utilizadores inserissem a mesma informação várias vezes, como contactos e locais para cada unidade. Isto não era ideal pois criava um trabalho redundante desnecessário para o utilizador, aumentando o tempo e o desgaste na carga cognitiva do utilizador. Havia uma oportunidade clara para simplificar este processo.
Problemas de UI & Usabilidade
Do ponto de vista da UI, identificámos que os diferentes modais tinham alturas diferentes, dinâmicas ao seu conteúdo, o que violava a Lei de Jakob. As alturas dos modais não estavam a tirar pleno partido do ecrã dos dispositivos móveis. Quando o conteúdo mudava dinamicamente num modal, elementos interativos, como botões, moviam-se de forma imprevisível, tornando-os mais difíceis de alcançar e aumentando a carga cognitiva. Do ponto de vista do conteúdo, a linguagem utilizada era confusa e acrescentava complexidade desnecessária, sobrecarregando a carga cognitiva e o tempo de decisão do utilizador. Isto aumentava ainda mais o atrito no processo de configuração.
Compreendendo o Produto
Após a auditoria, colaborei com a equipa de I&D para compreender o funcionamento do VersaTile, incluindo bips, configurações de botões e parâmetros de sensores como alcances e limiares. Estas percepções informaram uma estrutura modular que suportava o equipamento existente, acomodava as funcionalidades do VersaTile e preparava para futuros produtos. Comparar as descobertas com dispositivos inteligentes existentes ajudou a refinar e simplificar a configuração para uma experiência de utilizador perfeita.
Definir
Para enfrentar os desafios identificados na fase de descoberta, trabalhei de perto com as equipas de produto e engenharia para reestruturar o assistente em dois percursos modulares. Juntos, alinhámos uma estratégia escalável e económica que atendia às necessidades dos utilizadores, técnicas e de negócios.
Fundação
Com esta nova fundação estabelecida, avançámos para desenvolver fluxos de utilizador detalhados, refinando ainda mais a experiência e criando uma estrutura simplificada e adaptável para as necessidades atuais e futuras.
Trilha de Integração
A trilha de integração simplificou tarefas fundamentais, num fluxo único, que permitiu aos utilizadores configurarem rapidamente o seu negócio sem precisar configurar um dispositivo imediatamente. Introduziu um fluxo simplificado de etapas existentes, enquanto introduz a criação em massa de quartos e contactos. Ao reduzir o atrito nestes primeiros passos, não só a experiência de integração se tornou mais suave e intuitiva, mas também abriu caminho para facilitar as configurações de equipamentos. A trilha também foi projetada com o recurso Multi-Hub em mente, já no roteiro.
Trilha Apenas de Equipamentos
Devido à expectativa de alta demanda, pela natureza e preço do VersaTile, decidimos permitir que os utilizadores configurassem equipamentos o mais rapidamente possível. A trilha de equipamento foi concebida para lidar com a configuração de vários dispositivos, com foco em escalabilidade, repetição e eficiência, enquanto dava a sensação de uma configuração unificada, mesmo sendo muitas. Os utilizadores podiam visualizar e adicionar a suíte de produtos, ou aceder a páginas de fornecedores para compras adicionais de equipamentos.
Pontos de Acesso
Os utilizadores podiam adicionar dispositivos diretamente a partir do painel do VersaHub. Colaborei com equipas de I&D e de dados para projetar pontos de entrada de utilizadores a partir da unidade física que aproveitaram o site de marketing existente como ponto de partida universal. Isso garantiu consistência nas configurações enquanto reunia perceções críticas dos utilizadores através de ferramentas como Google Analytics e Microsoft Clarity para acompanhar digitalizações de QR e taxas de abandono.
Os diagramas de fluxo abaixo ilustram dois pontos de entrada principais—digitalização de código QR e entrada manual de URL—otimizados juntamente com a opção de configuração adiada via painel para entregar uma experiência de integração mais intuitiva e eficiente.
Arquitetura da Informação
Estes wireframes priorizaram funcionalidade e navegação, servindo como um modelo para a experiência do utilizador, deixando considerações de design visual para etapas posteriores. Aumentámos a conscientização dos utilizadores sobre recursos pagos, como notificações por SMS e email, destacando estrategicamente durante a configuração.
Iterações de Configuração Inicial de Equipamentos
Nos estágios iniciais, explorámos o uso de WPS para uma configuração mais rápida do VersaTile, mas abandonámos devido a preocupações de segurança identificadas com a engenharia. Sem WPS, concentrámo-nos em criar um processo de configuração mais eficiente. Tal como outros dispositivos inteligentes, o VersaTile exigia que os utilizadores se conectassem temporariamente ao seu WiFi para configuração. Propus um simples fluxo de carrossel offline de 3 etapas, que foi refinado através de testes para uma solução simplificada e eficiente em cliques para a implementação final.
Esboço
Com base nos fluxos de utilizador definidos, desenvolvi wireframes de baixa fidelidade no FigJam para estabelecer a arquitetura de informação e modularidade das principais telas.
Arquitetura da Informação
Estes wireframes priorizaram a funcionalidade e a navegação, servindo como um plano para a experiência do utilizador enquanto as considerações de design visual foram deixadas para fases posteriores. Aumentámos a consciência dos utilizadores sobre as funcionalidades pagas, como notificações por SMS e email, destacando estrategicamente durante a configuração.
Iterações Iniciais de Configuração de Equipamento
Nas fases iniciais, explorámos a utilização de WPS para uma configuração mais rápida do VersaTile, mas abandonámos essa ideia devido a preocupações de segurança identificadas com a engenharia. Sem o WPS, focámo-nos em criar um processo de configuração mais eficiente. Como outros dispositivos inteligentes, o VersaTile exigia que os utilizadores se conectassem temporariamente ao seu WiFi para configuração. Propus um simples fluxo offline de carrossel em 3 passos, que foi refinado através de testes em uma solução simplificada e eficiente em cliques para a implementação final.
Sistemas
No redesenho, priorizei a criação de uma interface amigável ao utilizador, que fosse limpa, coesa e visualmente envolvente. Aproveitando os componentes existentes do sistema de design, contribui com novos para atender a necessidades específicas, como um slider para configurações de parâmetros. A jornada envolveu uma estreita colaboração com equipas multifuncionais (XFN) para iterar em designs de alta fidelidade, garantindo que cada componente estivesse alinhado com as necessidades dos utilizadores e os objetivos de negócios, mantendo a consistência visual.
Desenvolvendo Componentes Centrais
Para construir uma experiência de usuário perfeita, comecei criando componentes que estivessem alinhados com a arquitetura da informação (IA) definida durante a fase de wireframe. Isso assegurou que cada elemento apoiasse o fluxo geral, proporcionando consistência e escalabilidade em toda a interface. Os exemplos abaixo destacam alguns dos componentes centrais desenvolvidos durante esta fase.
Rótulo de Campo
O componente de rótulo de campo foi construído para flexibilidade, suportando ações como alternâncias, botões de opção e caixas de seleção. Incluiu rótulos secundários para recursos premium ou de teste e dicas informativas ao passar o mouse para educação sobre recursos. Propriedades configuráveis, como opções de mostrar/ocultar para dicas informativas, texto auxiliar e medalhas, garantiram adaptabilidade e integração perfeita em toda a interface.
Entrada
O componente de entrada, um elemento chave, exigiu variantes robustas para cobrir todos os estados, incluindo tratamento de erros e funcionalidade de dropdown. Adicionei recursos como agrupamento, estados de passagem do mouse, seleção ativa e indicadores premium, enquanto testava a responsividade para um comportamento consistente em diferentes tamanhos de tela e integrei o sistema de ícones para garantir harmonia visual em toda a experiência do produto.
Controle Deslizante
Reconhecendo uma lacuna no sistema de design, desenvolvi um componente de controle deslizante adaptado para sensores com limiares simples ou duplos. Este componente permitiu que os usuários ajustassem parâmetros tocando, clicando ou arrastando, oferecendo uma maneira intuitiva de definir valores. Construído usando átomos do sistema de design, o controle deslizante foi projetado para simplicidade funcional e alinhamento visual com o restante da interface.
Macromolécula
Uma vez estabelecidas as micromoléculas, combinei-as em um componente de macromolécula reutilizável. Isso incluiu propriedades avançadas do Figma para fácil manipulação, permitindo iterações mais rápidas e melhorando a eficiência na transferência para os desenvolvedores. A macromolécula foi projetada com foco em escalabilidade e desempenho, otimizando o sistema para melhorias futuras e eficiência no código.
Ilustrações de Pista de Equipamento
Para melhorar a clareza e diferenciar etapas semelhantes, desenhei ilustrações de equipamento que complementavam o texto e enfatizavam ações-chave. Esses visuais destacaram tarefas físicas específicas, como pressionar um botão ou vários botões simultaneamente, garantindo que os usuários pudessem seguir facilmente e completar cada etapa com confiança.
Desenho
Com base nos componentes concluídos, criei layouts coesos que se alinhavam com a arquitetura de informação estabelecida durante a fase de esboço. Esta etapa concentrou-se na montagem dos componentes em telas completas, assegurando consistência na hierarquia visual, acessibilidade e padrões de interação, transformando o design modular em uma experiência unificada, com iterações ao longo do caminho.
Faixa de Integração da Plataforma
O objetivo deste fluxo era ajudar os utilizadores a completar a configuração rapidamente e reduzir o abandono. Atualizámos a secção de contactos, substituindo o botão “Continuar” pelas opções “Pular” e “Concluir”, uma vez que os contactos não eram obrigatórios como a criação de salas, o que era essencial para a funcionalidade da base de dados. Ambos os passos ainda poderiam ser adiados para mais tarde. Essa mudança reduziu as desistências e permitiu que os utilizadores revisitassem e concluíssem a configuração conforme necessário.
Seleção de Iterações de Equipamento
Para os utilizadores que adicionam equipamento a partir do painel de controlo ou após a integração, inicialmente desenhei uma pilha de três cartões e iterei para um layout escalável que exibe todo o equipamento atual e futuro, priorizando o VersaTile para visibilidade. A reutilização de ícones já existentes no painel poupou tempo e garantiu consistência. Para resolver uma lacuna, substituí o diálogo inferior por um link do fornecedor, simplificando a seleção para um único toque, proporcionando um fluxo intuitivo.
Configuração do VersaTile
Orientado pela estrutura de wireframe e feedback de sessões de colaboração, desenhei uma experiência de configuração versátil adaptada ao protocolo de conexão único do VersaTile. Isso incluiu a introdução de controles deslizantes para faixas de limite e a integração de instruções claras para ajudar os utilizadores a navegar pelas interações físicas sem qualquer dificuldade.
Barra de Progresso
Redesenhámos o indicador de progresso como uma única barra baseada em porcentagem para uma experiência coesa que se adapta a diferentes configurações de setup sem comprometer visualmente a experiência, substituindo as barras individuais baseadas em seções. Também movemos o indicador de progresso e posicionamo-lo acima dos botões de ação, garantindo proximidade com as ações do utilizador, reforçando o progresso e mantendo um design unificado e de espaço eficiente.
Iteração do Passo de Conexão
O passo de conexão havia mudado significativamente desde o design original, mas insights dos utilizadores revelaram confusão com as instruções. Para resolver isso, propus proativamente uma solução ao proprietário do produto e desenvolvi rapidamente um conceito inspirado no original, incorporando etapas numeradas e claras para melhor clareza.
Retrofit para fluxos de configuração existentes
Usando a mesma hierarquia, fluxo e componentes do sistema de design, consegui aplicar retroativamente o sistema aos setups de equipamentos existentes para frigoríficos e congeladores inteligentes e unidades não-WiFi.
Não-WiFi (Catálogo/Externo)
Frigoríficos e Congeladores Inteligentes
Ecrã de Confirmação
No ecrã final, confirmámos a conclusão da configuração do equipamento. O elemento principal desta página era o cartão da unidade, acima dos metadados, que é a mesma interface do utilizador que os utilizadores verão no painel, já a reportar dados. Isso ajudou a cultivar a familiaridade e o interesse dos utilizadores em continuar a explorar a plataforma após terem seguido várias etapas de configuração.
Testando o Sistema
Ao manter a estrutura modal consistente utilizada em passos anteriores e organizando metadados com uma interface que orientou o olhar do utilizador, o ecrã ofereceu clareza e coesão. Também testei o design para garantir que acomodava perfeitamente outros tipos de equipamento para escalabilidade.
Móvel e Desktop
Como os designs foram desenvolvidos com foco em mobile primeiro, a mesma interface do utilizador foi adaptada para modais de desktop com aumento de espaçamento. Essa abordagem poupou tempo de desenvolvimento ao eliminar a necessidade de recriar designs separados para desktop.
