Case Study
Salas IoT e Cartões de Unidade
Melhorar a experiência na sala do painel principal para otimizar os fluxos de trabalho dos utilizadores, aumentar a adesão e preparar para o crescimento.
Antes
Depois
Project Overview
Como Principal Designer de Produto, liderei a remodelação das vistas de sala e cartões de unidade do VersaHub, criando soluções escaláveis e centradas no utilizador. Reestruturei a arquitetura da informação, desenhei componentes de UI reutilizáveis alinhados com o sistema de design do VersaHub e colaborei com proprietários de produtos e desenvolvedores para equilibrar as necessidades dos utilizadores com a viabilidade técnica, garantindo uma implementação eficiente e alinhamento com os objetivos estratégicos do VersaHub.
Status
Shipped
Contribution
Designer Principal de Produto
Year
4T 2022 – 2T 2023
Product
Plataforma IoT SaaS
Audience
Serviço de Alimentação B2B
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
A arquitetura do painel da plataforma e o design do cartão de unidade não conseguiam escalar para suportar duas iniciativas comerciais importantes: um novo recurso de multiusuário e uma oferta de hardware de baixo custo.
Resultados e Impacto
O redesign não apenas melhorou a visualização de dados e a clareza do painel, mas também estabeleceu uma base escalável para suportar novos equipamentos e funcionalidades expandidas. Ao aproveitar sistemas modulares, minimizámos a dívida tecnológica e de design, garantindo que o crescimento futuro pudesse ser alcançado de forma eficiente e sem problemas.
Descoberta
Uma revisão abrangente da interface atual revelou oportunidades para melhorar a usabilidade, clareza e escalabilidade. Ao solucionar ineficiências e alinhar-se com os padrões da indústria, este processo estabeleceu a base para um design centrado no usuário, capaz de suportar crescimento futuro.
Passos Realizados:
Auditoria de UI: Avaliamos problemas de layout, hierarquia de informação e desafios de diferenciação de unidades.
Avaliação Heurística: Identificamos pontos de dor de usabilidade através de insights pessoais e análise focada no usuário.
Análise Competitiva: Comparamos práticas do setor para guiar jornadas de usuário intuitivas e familiares.
Exploração de Iconografia: Refinamos estilos visuais para melhorar clareza e garantir consistência da marca.
Auditoria de UX
A auditoria da UI identificou vários desafios de usabilidade, incluindo pouca ênfase em dados críticos, ícones de Wi-Fi grandes demais criando ruído visual, e acordeões disruptivos para gerenciar notificações. Também foi difícil para os usuários distinguirem entre unidades à primeira vista devido à falta de diferenciação visual. Além disso, a colocação e o design do botão “Editar” reduziram a usabilidade, e o layout geral carecia de uma hierarquia clara de informações. Essas questões destacaram a necessidade de uma interface mais estruturada e intuitiva para melhorar a interação e a tomada de decisões.
Funções Estrangeiras
Configurações de contato e notificação estavam previamente embutidas em cada sala, forçando os usuários a duplicar ações, alternar entre abas ou acordeões, e lidar com mudanças de contexto desnecessárias. Isso não apenas aumentou a carga cognitiva, mas também desviou o foco principal do painel—proporcionar uma visão abrangente do status das unidades. O problema foi ainda ampliado em dispositivos móveis, onde layouts inconsistentes criaram confusão adicional e desperdício de tempo.
Avaliação Heurística
Como um “usuário avançado” de casa inteligente, aproveitei insights pessoais para identificar pontos comuns de dor ao interagir com plataformas semelhantes. Esta avaliação me deu uma base sólida para proativamente enfrentar desafios de usabilidade, garantindo que o design evitasse armadilhas comuns e antecipasse as necessidades dos usuários. Ao adotar essa perspectiva, pude identificar oportunidades para melhorar a funcionalidade da plataforma e a experiência geral do usuário.
Análise Competitiva
Foi realizada uma análise competitiva para estudar como as plataformas convencionais lidam com a visualização de dados e projetam seus principais painéis. Ao examinar suas jornadas de usuário, garantimos que a experiência redesenhada fosse intuitiva e alinhada com padrões familiares do setor, evitando complexidade desnecessária. Dada a audiência de nicho, era crucial não criar um produto que parecesse muito desconhecido ou complicado. Essa análise forneceu um forte referencial para a usabilidade, mantendo o foco nas necessidades únicas dos usuários VersaHub.
Explorando Ícones Visuais
Enquanto as cartas de unidade eram adaptadas para puxar imagens diretamente do API de catálogo, ficou claro que as imagens eram pequenas demais para fornecer o detalhe necessário para que os usuários identificassem unidades individuais. Para resolver isso, pesquisei estilos modernos de iconografia que pudessem obter uma melhor distinção de unidades. Durante este processo, descobri que a WebstaurantStore já tinha um estilo de iconografia estabelecido. Embora um pouco desatualizado, serviu como um ponto de partida valioso para se desenvolver. Esta exploração garantiu que o novo sistema visual oferecesse tanto clareza quanto alinhamento com a linguagem de design em evolução da marca.
Definir
Uma análise aprofundada da interface existente revelou a necessidade de uma visualização de dados mais intuitiva e de designs de cartões de unidade melhorados para proporcionar aos utilizadores um melhor contexto para decisões informadas. O design também precisava suportar novos tipos de equipamentos e alinhar-se com a marca atualizada da VersaHub.
Compreendendo a Jornada do Utilizador
Eu concentrei-me em aperfeiçoar a jornada do utilizador da VersaHub para melhorar o monitoramento de equipamentos e a resolução de problemas. Ao analisar os fluxos de trabalho e identificar pontos problemáticos, simplifiquei processos complexos e otimizei a navegação para priorizar clareza e usabilidade. Esta abordagem assegurou uma experiência contínua e eficiente para os utilizadores, permitindo-lhes detectar rapidamente problemas, visualizar dados detalhados e tomar ações corretivas sem fricções desnecessárias.
Layout Contextual
Após analisar a interface e a jornada do utilizador, identifiquei limitações de layout e defini limites de design para otimizar a colocação e a estrutura dos cartões. Isto informou decisões sobre o número ideal de cartões de unidade a serem exibidos, garantindo espaço para dados contextuais vitais, como alertas e detalhes ao nível do quarto, equilibrando usabilidade e escalabilidade para necessidades futuras.
Definindo a Hierarquia de Informação dos Cartões
Percepções da fase de descoberta destacaram a necessidade de uma abordagem mais intuitiva para a visualização de dados dentro dos cartões de unidade. Este processo focou-se em otimizar a arquitetura da informação e estabelecer uma hierarquia clara para equilibrar a relevância do conteúdo e acomodar diferentes tipos de equipamentos. O resultado foi um sistema de cartões modular e adaptável, capaz de consumir e exibir dados de forma integrada para unidades com ou sem Wi-Fi, assegurando escalabilidade e consistência por toda a plataforma com um único componente versátil.
Definição de Problema
A interface existente da VersaHub tinha dificuldades com a visualização de dados não intuitiva e designs de cartões de unidade pouco claros, limitando a capacidade dos utilizadores de tomar decisões informadas. A plataforma precisava de uma solução escalável para acomodar também novos equipamentos de limpeza inteligentes que se sentiriam deslocados ao lado de equipamentos de cozinha. As restrições no design de layout exigiam a otimização do espaço para múltiplos cartões e dados contextuais, enquanto definir uma hierarquia clara de informação assegurou adaptabilidade e consistência. O alinhamento estratégico com R&D e PM foi essencial para equilibrar necessidades dos utilizadores, viabilidade técnica e objetivos a longo prazo.
Esboço
Para melhorar a visualização de dados e otimizar a gestão de quartos, destaquei a modularidade e a escalabilidade, estruturando cuidadosamente os cartões de unidade e os layouts das salas. O design priorizou a clareza, a navegação intuitiva e a capacidade de resposta para oferecer uma experiência de utilizador eficiente e simplificada, garantindo uma separação clara enquanto mantém a coesão visual entre os elementos.
Reorganização do Layout dos Cartões
Para os cartões da unidade, desenvolvi um layout que separava a informação em três níveis de importância. Detalhes principais, como o nome da unidade, ícone e leituras de temperatura em tempo real, receberam a colocação mais proeminente. Informações secundárias, como estado de conexão e horários de sincronização, seguiam logo a seguir. Finalmente, detalhes terciários, como alertas, eram exibidos com uma priorização visual clara para ajudar os utilizadores a identificar rapidamente problemas críticos.
Testando a Modularidade do Cartão
Para validar a estrutura, testei vários casos de uso reconfigurando os elementos modulares para garantir flexibilidade e escalabilidade. Este processo ajudou a definir os componentes necessários para cada cartão, juntamente com os seus diferentes estados, como notificações, conectividade e atualizações de status.
Reconfigurando o Painel Principal
Ao basear-me na estrutura dos cartões e sua arquitetura de informação, reestruturei o painel principal para otimizar o agrupamento e a organização. Isso incluiu o refinamento da colocação dos cartões, atualização do idioma do botão de “Editar” para “Definições” para clareza, e centralização de notificações, alertas e definições de contato numa barra lateral unificada. Estas mudanças criaram uma estrutura coesa, melhorando a usabilidade e garantindo que o layout do painel ficasse alinhado com os princípios de design do sistema de cartões.
Desenvolvendo Pontos de Ruptura Responsivos
Para garantir uma experiência fluida em todos os dispositivos, desenvolvi pontos de ruptura responsivos para ecrãs móveis, tablets e desktops. O layout adapta-se dinamicamente para reduzir a carga cognitiva, com empilhamento vertical no móvel para simplicidade e arranjos em grelha em ecrãs maiores para proporcionar visões gerais claras e organizadas.
Sistemas
Desenvolvi uma framework responsiva com pontos de interrupção e configurações centralizadas para agilizar fluxos de trabalho e eliminar redundâncias. As vistas de estado zero incentivaram o envolvimento, enquanto os componentes reutilizáveis—construídos com princípios de design atômico—lidavam com casos extremos e cumpriam os padrões WCAG. Documentado no Figma, o sistema garantiu flexibilidade e implementação eficiente.
Desenhando Ícones de Equipamento
Para melhorar a clareza na identificação dos tipos de equipamento, ícones substituíram pequenas imagens de produtos em toda a plataforma. O uso consistente desses ícones nos cartões de unidade e em toda a plataforma garantiu continuidade e familiaridade, criando uma experiência coesa para os utilizadores.
Variações de Cartão de Unidade
Para garantir que o design funcionasse em todos os dispositivos, criei uma estrutura responsiva com pontos de interrupção definidos para vários tamanhos de ecrã. Para salas vazias, projetei uma visualização de estado zero que incentivava os utilizadores a adicionar ou comprar equipamentos. As definições centralizadas foram adicionadas à navegação principal, simplificando os fluxos de trabalho ao permitir que os utilizadores gerissem notificações e contactos de um único local. Este ajuste eliminou a necessidade de configurações redundantes específicas de sala.
Contribuições para o Sistema de Design
O design atualizado foi construído utilizando princípios de design atómico. Componentes como superfícies de cartões, ícones e indicadores de alerta foram criados como módulos independentes, tornando-os reutilizáveis e escaláveis para futuras atualizações. Cada componente considerou casos extremos, como estados de carregamento, unidades desconectadas e alertas, e atendeu aos padrões WCAG de acessibilidade.
Desenho
Aprimorei os designs para melhorar a clareza e a tomada de decisões adotando um layout em padrão F, introduzindo um estado offline distinto e separando a manutenção de alertas críticos. Essas mudanças reduziram a confusão do usuário e o pânico falso enquanto agilizaram o design visual. Em vez de um sistema complexo de codificação por cores, utilizei a hierarquia visual para destacar alertas críticos e acomodar casos fora do comum, como unidades com pouca bateria ou desconectadas, sem sobrecarregar o usuário.
Evolução dos Cartões de Unidade
Durante o projeto, utilizámos um componente intermédio para permitir aos desenvolvedores testar cedo os pontos de dados. Embora estes cartões proporcionassem maior clareza em comparação com a iteração anterior, continuavam a existir problemas significativos com a visualização de dados, necessitando de mais refinamento.
Alerta de Manutenção
Os alertas de manutenção eram agrupados com alertas críticos, reduzindo a clareza e a priorização. Quando ambos ocorriam, o sistema recorria a uma mensagem genérica de “2+ notificações”, obscurecendo problemas críticos. Para resolver isso, introduzi um ícone subtil e único para tarefas de manutenção que chama a atenção sem desviar o foco dos alertas de alta prioridade.
Aperfeiçoamento do Estado Offline
O estado offline era anteriormente tratado como um estado de erro, semelhante aos alertas críticos, o que causava confusão e pânico desnecessário aos utilizadores. Para resolver isto, introduzi um estado tipo desativado distinto que diferencia claramente as unidades offline dos erros. Este novo design comunica com precisão a prioridade das ações do utilizador, reduzindo a confusão e assegurando uma experiência mais intuitiva.
Padrão de Layout dos Cartões
O layout dos cartões interrompia o fluxo visual com elementos em todos os quatro cantos. Apliquei uma estrutura de padrão em F para guiar naturalmente o olhar do utilizador, extraindo o alerta inferior de seu contêiner, melhorando a clareza e o foco nos principais pontos de dados.
Desenho de Estados Zero para Salas
Para abordar uma limitação chave, introduzi estados de sala zero, permitindo que os utilizadores configurem salas sem equipamento. Esta atualização proporciona uma experiência de integração orientada, reduz o atrito e ajuda os utilizadores a estabelecerem a estrutura da plataforma antes de adicionar unidades.
Finalizando os Pontos de Ruptura Responsivos
Finalizei pontos de ruptura que vão desde extra pequeno para dispositivos mais antigos até extra grande para monitores largos e TVs, garantindo compatibilidade em todos os dispositivos usados pelo nosso público-alvo. Isto incluiu a definição de larguras mínimas e máximas tanto para o contêiner de sala quanto para os cartões de unidade para manter a consistência e a usabilidade em todos os tamanhos de tela.
