Case Study
Navegação IoT
Centralize definições, otimize fluxos de trabalho e projete uma navegação escalável para melhorar a usabilidade e apoiar o crescimento como uma plataforma de gestão de ativos.
Antes
Depois
Project Overview
Conduzi o redesenho da navegação do VersaHub, criando um sistema modular e escalável com navegação intuitiva, design responsivo e linguagem atualizada. As principais atualizações incluíram uma barra de status, elementos consolidados e suporte para novos recursos, preparando a plataforma para funcionalidade multi-hub e futuros lançamentos.
Status
Shipped
Contribution
Designer Principal de Produto
Year
2022
Product
B2B SaaS Platform
Audience
Foodservice Professionals
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
Os utilizadores enfrentaram desafios ao aceder a ações chave como adicionar unidades ou salas, especialmente em dispositivos móveis, devido a elementos desarticulados e terminologia inconsistente, e também não havia um caminho para escalar e exibir novas funcionalidades. A plataforma estava a ser rebatizada de KitchenDash para VersaHub.
Resultados e Impacto
A navegação redesenhada recebeu feedback positivo após o lançamento, com os utilizadores a realizarem ações-chave de forma perfeita em várias plataformas, acedendo sem esforço a novos recursos e interagindo mais com assinaturas, graças a indicativos de teste mais claros e explicações das categorias premium.
Descoberta
Através de uma fase de descoberta abrangente, reuni informações de partes interessadas, avaliei padrões de usabilidade existentes e analisei concorrentes para descobrir oportunidades que ligariam as necessidades dos usuários aos objetivos de negócio.
Para construir uma base sólida para o processo de design, iniciei com uma fase de descoberta abrangente. Isto envolveu as seguintes atividades:
Entrevistas com Stakeholders: Recolheram-se insights sobre os objetivos de negócio e requisitos de escalabilidade para garantir o alinhamento com as metas de longo prazo.
Análise de Avaliação Heurística: Avaliou-se a usabilidade e a estrutura de navegação do produto atual para identificar inconsistências, problemas de usabilidade e áreas para melhorias.
Análise Competitiva: Pesquisaram-se aplicações e serviços semelhantes para descobrir tendências do setor, melhores práticas e oportunidades de diferenciação.
Alinhamento com Stakeholders: Partilhámos os resultados com os stakeholders para obter feedback, garantir acordo sobre os pontos críticos identificados, e alinhar nas oportunidades-chave para melhorias.
Entrevistas com Stakeholders
Neste passo, colaborei com insights de produto e de Pesquisa e Desenvolvimento (P&D) para reunir informações sobre os objetivos de negócios e necessidades de escalabilidade. Uma descoberta chave foi a necessidade de incluir recursos essenciais, como o EULA e links externos de suporte, para abordar o grande volume de solicitações de suporte que o serviço ao cliente (CS) estava a gerir. Além disso, precisávamos melhorar a visibilidade do site de marketing, que também funcionava como um hub de suporte para clientes existentes, garantindo que os usuários pudessem acessar facilmente ajuda e informações sem necessitar de assistência direta.
Avaliação Heurística
Nesta avaliação, apliquei meus conhecimentos e instintos de UX para identificar problemas de usabilidade e UI, bem como pontos críticos dos usuários no acesso e descoberta de funcionalidades principais. Por exemplo, a navegação móvel do painel principal enfrentava vários problemas que dificultavam a descoberta de funcionalidades e não seguiam as melhores práticas de UX.
Móvel
Desktop
A navegação no desktop tinha dois níveis, um para a visualização do painel e outro para o
Localização e Contatos
Um ponto crítico identificado foi a inconsistência na forma como as configurações de localização e notificação eram exibidas entre dispositivos. No móvel, as configurações eram apresentadas como acordéons que se expandiam para mostrar opções de contatos e notificações. No desktop, essas configurações apareciam como abas inferiores, trocando conteúdo com a visualização de unidades quando expandidas. Esta abordagem sobrecarregava os usuários com complexidade desnecessária, aumentando a carga cognitiva e diluindo o foco, violando as leis de UX de Hicks e Miller.
Além disso, os usuários tinham que inserir repetidamente as mesmas informações de contato para múltiplas localizações, revelando uma oportunidade para centralizar configurações e eliminar a entrada de dados redundante.
Análise Competitiva
Com os principais pontos críticos identificados, explorei como outras plataformas de IoT abordavam padrões semelhantes, como botões de adicionar, notificações e conteúdo de “o que há de novo”. Isso garantiu o alinhamento com a Lei de Jakob, aproveitando convenções de design familiares para melhorar a usabilidade.
Alinhamento com Stakeholders
Reuni-me novamente com os stakeholders para apresentar as descobertas e alinhar nas principais oportunidades para melhorias. Focamos na resolução de questões como a falta de hierarquia de ações, a necessidade de navegação escalável para acomodar futuras funcionalidades, e otimizar o posicionamento de elementos como o banner de status premium e links de suporte para uma experiência mais amigável ao usuário. Após a discussão, alcançamos o alinhamento sobre estas prioridades para guiar os próximos passos.
Definir
Para enfrentar os desafios identificados na fase de descoberta, trabalhei de perto com as equipas de produto e engenharia para reestruturar a navegação principal numa experiência unificada e centralizada. Juntos, alinhámos uma estratégia escalável e económica que atendia às necessidades dos utilizadores, técnicas e de negócios.
Fluxos de Usuário
Para estabelecer uma estrutura clara, desenvolvi um fluxograma mapeando os níveis de navegação primários e secundários, fluxos de usuário e principais intenções dos usuários. Este processo destacou ações de alta prioridade e informou a reorganização da navegação, centralizando recursos como relatórios e configurações para facilitar o acesso.
Novidades no Conteúdo
Identificámos uma oportunidade valiosa para apresentar todos os lançamentos de funcionalidades através de modais, que integramos na navegação para melhorar a descoberta, educar os usuários e criar ligações cruzadas sem problemas para a experiência de comércio eletrónico, impulsionando conversões.
Realinhamento e Priorização
O novo quadro exigiu uma mudança essencial aprovada pelos engenheiros na estrutura do banco de dados para preparar a experiência para o futuro e apoiar os próximos lançamentos de funcionalidades. Esta fase concentrou-se em avaliar a capacidade, definir prazos e priorizar funcionalidades de alto valor para o MVP, enquanto elementos menos utilizados como manutenção, relatórios e atividades foram despriorizados devido ao baixo uso e à necessidade de refinamento adicional.
Esboço
Com base nos fluxos de usuários definidos, criei wireframes de baixa fidelidade para estabelecer o layout, garantir a consistência responsiva em diferentes telas, e refinar a arquitetura da informação e a modularidade da navegação.
Explorações Iniciais
Uma das primeiras experiências do FigJam envolveu a introdução de uma barra de navegação horizontal para ações principais, acompanhada por uma barra lateral completa para navegação secundária. Embora esta abordagem tenha solucionado alguns desafios de usabilidade, revelou redundâncias de informação e levantou preocupações sobre a capacidade de expansão da navegação principal de desktop. No entanto, o conceito mobile destacou uma oportunidade promissora de layout que poderia ser adaptada para ambas as visualizações e escalada de forma contínua.
Uniformizar o Design
O design foi unificado entre os dispositivos ao alinhar padrões de navegação de desktop e mobile, padronizando ações-chave como “Painel de Controle”, “Adicionar Unidade” e “Adicionar Localização”. Esta abordagem coesa reduziu a redundância, assegurou interações consistentes e manteve uma hierarquia de navegação escalável para apoiar a usabilidade e o crescimento futuro da plataforma.
Layouts Responsivos
Estes wireframes estabeleceram restrições para conteúdo orientado por API dentro da plataforma de e-commerce WebstaurantStore, assegurando layouts consistentes e comportamento responsivo em todos os tamanhos de tela. Dimensões fixas foram aplicadas a elementos como o painel de navegação e o status de membresia para consistência, enquanto os contêineres de conteúdo principal foram tornados dinâmicos para se adaptar suavemente a várias janelas de visualização. Esta abordagem priorizou funcionalidade e navegação, criando um esboço escalável para a experiência do usuário, enquanto deixava o refinamento do design visual para fases posteriores.
Nova Experiência Modal em Mobile
O modal redesenhado melhora a usabilidade e a consistência com um botão Voltar claro para navegação e uma opção baseada em gestos para fechar o modal arrastando a barra superior. A área de visualização rolável ajusta-se dinamicamente para clareza, enquanto a identidade visual do WebstaurantStore assegura um design polido e coeso, priorizando a acessibilidade e eficiência para uma experiência sem interrupções.
Localizações vs. Salas
Propusemos a mudança de várias “Localizações” para uma única “Localização” com “Salas” aninhadas, para maior flexibilidade e foco aprimorado do usuário. Como a maioria dos usuários gere um único negócio, mostrar múltiplas localizações acrescentava complexidade desnecessária. A estrutura baseada em salas simplificou a navegação, permitindo que usuários com um único negócio aproveitassem totalmente a plataforma, ao mesmo tempo que ainda acomodava aqueles com vários negócios. Esta abordagem também abriu oportunidades para simplificar recursos compartilhados, como contatos entre salas, mas necessitou de mais testes para garantir escalabilidade e usabilidade para todos os casos de uso.
Sistemas
O redesenho da navegação aproveitou o sistema de design existente para manter a consistência visual nas cores, tipografia e iconografia. Alguns componentes criados para este projeto foram concebidos para serem altamente escaláveis e aplicados globalmente, enquanto outros foram exclusivos desta molécula.
Conceção da Fita Premium
A variante inicial do logótipo transmitia o status do utilizador, mas perturbava o equilíbrio de navegação e criava fragmentação visual com o banner premium. Para resolver isto, introduzimos um componente personalizado de fita compacta, exibindo o status do utilizador e data de expiração, estrategicamente colocado na navegação principal para aumentar a consciencialização sobre funcionalidades pagas como notificações por SMS e e-mail.
Items de Navegação
Concebido como um componente global e reutilizável, o item de navegação assegura consistência em barras laterais de configurações, menus e modais. Para dispositivos móveis, botões mais altos melhoram a precisão do toque em layouts congestionados. Com estados e propriedades adaptáveis como ícones de alternância e links de saída, este componente consegue facilmente adaptar-se a cada caso de uso, mantendo a usabilidade e escalabilidade na plataforma.
Aglomerações de Navegação
Usando o componente de items de navegação, construí e estruturei os grupos de navegação primários e secundários necessários para aplicações de desktop e móveis, assegurando uma experiência coesa em navegação de primeiro e segundo nível.
Normalização da Experiência Modal
Foi criado um sistema para lidar com alturas dinâmicas de modais, com restrições (520px mín, 768px máx) para assegurar usabilidade e equilíbrio visual em todos os dispositivos. Princípios de navegação foram integrados nas barras laterais dentro dos modais, proporcionando acesso contínuo a funcionalidades enquanto se mantém a consistência com o design do quadro da plataforma. Esta abordagem assegurou flexibilidade, escalabilidade e uma experiência de utilizador coesa.
O framework modal foi rigorosamente testado para garantir responsividade e usabilidade em todos os dispositivos, mantendo consistência e clareza em tamanhos de ecrã variados.
Foi incorporada uma animação de slider na gaveta móvel para aumentar a intuição, usando transições suaves para guiar o foco do utilizador enquanto a gaveta abre ou fecha. Este feedback dinâmico tornou a interação mais natural e reforça a hierarquia da informação, melhorando a usabilidade e o envolvimento.
Desenho
O design visual equilibrava clareza e estética para melhorar a usabilidade. A modularidade de navegação enfatizava a hierarquia, agrupando ações relacionadas sob rótulos intuitivos para melhor descobribilidade. Além disso, a faixa de teste e atualização usava as cores de destaque do sistema de design para chamar atenção sem interromper a interface.
Considerações de Layout
Móvel
Projetei um modal de navegação de altura total para dispositivos móveis para garantir acessibilidade e escalabilidade, minimizando a rolagem enquanto uso a divulgação progressiva para manter a interface intuitiva. Alvos de toque otimizados e interações gestuais, como deslizar e tocar, melhoraram a eficiência da navegação e suportaram fluxos aninhados mais complexos.
Desktop
Para desktop, implementei um layout de navegação de largura fixa que acomoda níveis secundários aninhados, permitindo uma expansão fluida para novos recursos. Este design adaptável equilibra consistência com preparação para o futuro, garantindo que a navegação possa escalar sem interromper a estrutura existente. A abordagem mantém uma experiência coesa em todas as plataformas, alinhando a navegação de desktop com os padrões estabelecidos para dispositivos móveis, enquanto otimiza para maior espaço de tela.
Atualizações de Logotipo e Nível de Status
Um modal de atualização intermediário foi introduzido para aumentar a consciência de assinatura e comunicar claramente os benefícios premium. Testes com usuários confirmaram sua eficácia, aumentando o envolvimento, reduzindo a confusão em torno das ofertas Premium e aumentando a confiança do usuário. O modal também resolveu o problema de redirecionamentos para a página mais ampla do WebstaurantPlus, focando nos recursos do VersaHub, melhorando as conversões e garantindo escalabilidade para futuras atualizações.
Aperfeiçoamentos Finais
Anúncios de Funcionalidades
Um banner dinâmico “O que há de Novo” foi adicionado para anunciar atualizações, direcionando os usuários a um painel dedicado dentro da seção de suporte. Indicadores sutis de não lido garantiram a conscientização sobre novos recursos sem sobrecarregar a experiência do usuário.
Indicadores de Contagem
Contadores vermelhos foram integrados à navegação para alertar os usuários sobre problemas críticos ou atualizações importantes relacionadas às suas unidades. Emparelhados com um indicador azul na navegação principal, isso garantiu que notificações de alta prioridade fossem destacadas sem desorganizar a interface.
Atualização Multi-Hub
Um identificador de nome de negócio foi introduzido sob o logotipo do VersaHub, permitindo a troca intuitiva entre vários negócios. A navegação também consolidou novas ações, como adicionar unidades, salas e contatos, em um menu unificado para maior eficiência e clareza.
