Totem/Showroom - iGUi
Visão Geral
A organização do conteúdo foi refeita com foco em escalabilidade. Isso significa manter a estrutura funcional mesmo com o aumento constante da variedade de piscinas. Um sistema escalável não compromete a clareza da interface quando novos produtos são adicionados.
Para isso, reestruturei a tela inicial em carrosséis horizontais que agrupam os modelos por tamanho. Essa solução eliminou a rolagem vertical excessiva, comum na versão anterior, e concentrou os elementos interativos dentro da chamada zona de toque confortável, recomendada para telas grandes.
Empresa
Meu papel
Duração
Responsabilidades
Introdução
O redesign do Totem Digital da iGUi surgiu da necessidade de resolver uma limitação concreta: o crescimento do portfólio de piscinas dificultava a navegação no showroom digital. A exibição dos produtos em scroll vertical, em telas grandes, exigia esforço físico e tornava o processo cansativo e pouco eficiente.
Durante o processo de discovery, identifiquei esse problema como recorrente entre franqueados e visitantes. Além disso, notei falhas de adaptação da interface em diferentes ambientes e dispositivos. A proposta de redesign foi guiada por princípios de ergonomia e usabilidade para telas touchscreen de grande porte, com base em diretrizes como as da Nielsen Norman Group.
Arquitetura da informação e navegação
A organização do conteúdo foi refeita com foco em escalabilidade. Isso significa manter a estrutura funcional mesmo com o aumento constante da variedade de piscinas. Um sistema escalável não compromete a clareza da interface quando novos produtos são adicionados.
Para isso, reestruturei a tela inicial em carrosséis horizontais que agrupam os modelos por tamanho. Essa solução eliminou a rolagem vertical excessiva, comum na versão anterior, e concentrou os elementos interativos dentro da chamada zona de toque confortável, recomendada para telas grandes.
Adaptação para diferentes contextos
Identifiquei a necessidade de usar o totem em ambientes com condições de luz muito distintas. Por isso, desenvolvemos dois modos de exibição: claro, voltado para uso em lojas bem iluminadas; e escuro, pensado para eventos com pouca luz ambiente.
A interface também foi adaptada para quatro breakpoints. Isso garante que a navegação permaneça clara e funcional em:
Telas touchscreen a partir de 42” (very large)
Desktops (large)
Tablets (medium)
Celulares (small)
Essa flexibilidade permite que a mesma solução funcione tanto no ponto de venda quanto em tablets usados por vendedores em campo.
Usabilidade em telas grandes
Reorganizei os elementos de ação na parte inferior da tela, onde o toque é mais confortável para usuários em pé. Na parte superior, deixei apenas informações visuais, evitando que o usuário precise levantar o braço para interagir.
Os alvos de toque foram ajustados para no mínimo 1 cm². Essa medida reduz erros ao tocar e facilita o uso mesmo para pessoas com mãos maiores ou menor precisão motora. Também implementei feedbacks visuais claros. Toda ação do usuário recebe uma resposta visual imediata, como mudança de cor ou transição. Isso evita incerteza e reforça a sensação de controle.
Resultado
Fora outras importantes feiras de negócios, recentemente, durante a ABF Franchising Expo 2025, com cerca de 60 mil visitantes, o totem foi utilizado em ambiente real de uso. Coletei feedbacks diretamente dos colaboradores presentes no estande. A navegação foi bem-sucedida na maior parte das interações.
O modo escuro foi utilizado praticamente em todas as sessões, mas vale destacar que essa é a configuração padrão do sistema. Isso indica dois pontos a serem reavaliados: a possível baixa visibilidade ou compreensão do botão de troca de tema, e o fato de que essa funcionalidade pode não ter um papel decisivo na experiência dos usuários.
O seletor de pastilha foi o componente mais acionado e compreendido pelos visitantes, tornando-se central na experiência. Por outro lado, os modais com informações complementares, como planta baixa, medidas e equipamentos, tiveram pouca interação. Isso sugere que sua visibilidade pode ser insuficiente ou que os conteúdos apresentados não se conectam com o momento da decisão do visitante. Esses pontos serão reavaliados em uma próxima iteração.
Alguns relatos também indicaram dificuldade na identificação de ícones específicos. Esse ponto será observado em testes futuros para orientar ajustes visuais que reduzam qualquer ambiguidade.
