Totem/Showroom - iGUi
Visão Geral
A navegação vertical tornava difícil explorar o portfólio crescente da iGUi em telas grandes. Este redesign reorganizou a arquitetura da informação e repensou a interação para reduzir esforço físico, tornar a navegação mais fluida e permitir o uso do totem em diferentes contextos, como lojas e feiras.
Empresa
Meu papel
Duração
Responsabilidades
Introdução
O totem já existia antes da minha entrada na empresa. Era um projeto embrionário, criado de forma experimental, e vinha sendo usado pontualmente em algumas lojas e feiras. Seu objetivo era apresentar o portfólio da marca de forma interativa, mas ainda sem uma estrutura pensada para escala ou uso contínuo.
Com a ampliação do portfólio, o totem precisaria acompanhar esse crescimento e deixar de ser apenas uma solução pontual. O formato atual, pensado para poucos modelos, começava a mostrar limites práticos, tanto na forma de navegação quanto na maneira de exibir os produtos.
Essas observações guiaram o redesign com foco em ergonomia, escalabilidade e navegação eficiente, 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:
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.
Impacto do projeto
O totem foi redesenhado para lidar com um portfólio em expansão e atender melhor aos diferentes contextos de uso, como lojas e feiras. Hoje, ele está em uso em quase metade da rede e foi testado em eventos de grande porte, onde insights reais reforçaram decisões e revelaram pontos a serem aprimorados.
Aprendizados
Participar do redesenho do totem foi mais do que resolver um problema de usabilidade. O projeto exigiu decisões com base em uso real, adaptação a contextos diversos e escuta ativa de diferentes públicos. Isso me trouxe aprendizados importantes como designer
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 4.444 0 L 11.851 0 L 11.851 1.481 L 4.444 1.481 Z M 2.962 2.962 L 2.962 1.481 L 4.444 1.481 L 4.444 2.962 Z M 1.481 4.444 L 1.481 2.962 L 2.962 2.962 L 2.962 4.444 Z M 1.481 11.851 L 0 11.851 L 0 4.444 L 1.481 4.444 Z M 2.962 13.333 L 1.481 13.333 L 1.481 11.851 L 2.962 11.851 Z M 4.444 14.814 L 2.962 14.814 L 2.962 13.333 L 4.444 13.333 Z M 11.851 14.814 L 11.851 16.296 L 4.444 16.296 L 4.444 14.814 Z M 13.333 13.333 L 13.333 11.851 L 14.814 11.851 L 14.814 13.333 L 13.333 13.333 L 13.333 13.333 Z M 13.333 14.814 L 11.851 14.814 L 11.851 13.333 L 13.333 13.333 L 13.333 13.333 L 13.333 13.333 Z M 14.814 4.444 L 16.296 4.444 L 16.296 11.851 L 14.814 11.851 Z M 13.333 2.962 L 14.814 2.962 L 14.814 4.444 L 13.333 4.444 Z M 11.851 2.962 L 11.851 1.481 L 13.333 1.481 L 13.333 2.962 Z M 11.851 7.407 L 14.074 7.407 L 14.074 8.889 L 11.851 8.889 Z M 8.889 5.926 L 11.851 5.926 L 11.851 7.407 L 8.889 7.407 Z M 7.407 5.926 L 7.407 4.444 L 8.889 4.444 L 8.889 5.926 Z M 4.444 8.889 L 7.407 8.889 L 7.407 10.37 L 4.444 10.37 L 4.444 8.889 Z M 2.222 8.889 L 2.222 7.407 L 4.444 7.407 L 4.444 5.926 L 7.407 5.926 L 7.407 7.407 L 4.444 7.407 L 4.444 8.889 L 4.444 8.889 Z M 8.889 10.37 L 8.889 11.851 L 7.407 11.851 L 7.407 10.37 Z M 8.889 10.37 L 8.889 8.889 L 11.851 8.889 L 11.851 10.37 Z" fill="rgb(0, 0, 0)" height="16.295799855041505px" id="lPXpe24Rb" transform="translate(4 4)" width="16.295799855041505px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 7.466 1.866 L 9.331 1.866 L 9.331 0 C 7.466 0 5.6 0 3.734 0 L 3.734 1.866 C 4.978 1.866 6.222 1.866 7.466 1.866 Z M 11.194 3.721 L 11.194 1.855 L 9.328 1.855 L 9.328 3.721 Z M 11.184 11.195 L 11.184 13.061 L 13.049 13.061 L 13.049 11.195 Z M 9.328 9.327 L 9.328 11.193 L 11.194 11.193 L 11.194 9.327 Z M 11.184 7.455 L 11.184 9.32 L 13.049 9.32 C 13.049 7.455 13.049 5.589 13.049 3.724 L 11.184 3.724 C 11.184 4.967 11.184 6.211 11.184 7.455 Z M 3.721 1.855 L 1.855 1.855 L 1.855 3.721 L 3.721 3.721 Z M 13.063 13.052 L 13.063 14.917 L 14.928 14.917 L 14.928 13.052 Z M 14.918 14.919 L 14.918 16.785 L 16.784 16.785 L 16.784 14.919 Z M 5.6 11.195 L 3.734 11.195 L 3.734 13.061 C 5.6 13.061 7.466 13.061 9.331 13.061 L 9.331 11.195 C 8.087 11.195 6.844 11.195 5.6 11.195 Z M 1.866 5.589 L 1.866 3.724 L 0 3.724 C 0 5.589 0 7.455 0 9.32 L 1.866 9.32 C 1.866 8.077 1.866 6.833 1.866 5.589 Z M 1.855 9.327 L 1.855 11.193 L 3.721 11.193 L 3.721 9.327 Z" fill="transparent" height="16.784559617614747px" id="tMoDedbK_" transform="translate(3.664 3.79)" width="16.78354013977051px"><path d="M 3.731 1.866 L 5.597 1.866 L 5.597 0 C 3.731 0 1.866 0 0 0 L 0 1.866 C 1.244 1.866 2.487 1.866 3.731 1.866 Z" fill="rgb(0, 0, 0)" height="1.865590000000001px" id="A_sBfLQaM" transform="translate(3.734 0)" width="5.5967600000000015px"/><path d="M 1.866 1.866 L 1.866 0 L 0 0 L 0 1.866 Z" fill="rgb(0, 0, 0)" height="1.8655800000000005px" id="bHiGNsSfe" transform="translate(9.328 1.855)" width="1.8655999999999988px"/><path d="M 0 0 L 0 1.865 L 1.865 1.865 L 1.865 0 Z" fill="rgb(0, 0, 0)" height="1.8654999999999973px" id="LyLhotTcK" transform="translate(11.184 11.195)" width="1.865499999999999px"/><path d="M 0 0 L 0 1.866 L 1.866 1.866 L 1.866 0 Z" fill="rgb(0, 0, 0)" height="1.8655999999999988px" id="utdpOt_H6" transform="translate(9.328 9.327)" width="1.8655999999999988px"/><path d="M 0 3.731 L 0 5.597 L 1.865 5.597 C 1.865 3.731 1.865 1.866 1.865 0 L 0 0 C 0 1.244 0 2.487 0 3.731 Z" fill="rgb(0, 0, 0)" height="5.596730000000001px" id="gTXgZxEZj" transform="translate(11.184 3.724)" width="1.865499999999999px"/><path d="M 1.866 0 L 0 0 L 0 1.866 L 1.866 1.866 Z" fill="rgb(0, 0, 0)" height="1.8655800000000005px" id="dhcmoGbhE" transform="translate(1.855 1.855)" width="1.86559px"/><path d="M 0 0 L 0 1.866 L 1.865 1.866 L 1.865 0 Z" fill="rgb(0, 0, 0)" height="1.8656000000000006px" id="dNH6js1zQ" transform="translate(13.063 13.052)" width="1.8654999999999973px"/><path d="M 0 0 L 0 1.866 L 1.866 1.866 L 1.866 0 Z" fill="rgb(0, 0, 0)" height="1.8656000000000006px" id="WX5CefbN6" transform="translate(14.918 14.919)" width="1.8656000000000006px"/><path d="M 1.866 0 L 0 0 L 0 1.865 C 1.866 1.865 3.731 1.865 5.597 1.865 L 5.597 0 C 4.353 0 3.109 0 1.866 0 Z" fill="rgb(0, 0, 0)" height="1.8654999999999973px" id="ILZtAIrHl" transform="translate(3.734 11.195)" width="5.5967600000000015px"/><path d="M 1.866 1.866 L 1.866 0 L 0 0 C 0 1.866 0 3.731 0 5.597 L 1.866 5.597 C 1.866 4.353 1.866 3.109 1.866 1.866 Z" fill="rgb(0, 0, 0)" height="5.596730000000001px" id="AMwNwrFpE" transform="translate(0 3.724)" width="1.8655900000000005px"/><path d="M 0 0 L 0 1.866 L 1.866 1.866 L 1.866 0 Z" fill="rgb(0, 0, 0)" height="1.8655999999999988px" id="XJZ4iWZb6" transform="translate(1.855 9.327)" width="1.86559px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 9.229 1.87 C 11.076 1.87 12.922 1.87 14.768 1.87 L 14.768 0 C 11.691 0 8.614 0 5.537 0 L 5.537 1.87 C 6.768 1.87 7.999 1.87 9.229 1.87 Z M 11.076 11.221 C 9.229 11.221 7.383 11.221 5.537 11.221 L 5.537 13.091 C 8.614 13.091 11.691 13.091 14.768 13.091 L 14.768 11.221 C 13.537 11.221 12.306 11.221 11.076 11.221 Z M 14.77 11.221 L 16.616 11.221 L 16.616 9.351 L 14.77 9.351 Z M 16.616 3.74 L 16.616 1.87 L 14.77 1.87 L 14.77 3.74 Z M 16.615 9.351 L 18.461 9.351 L 18.461 7.481 L 16.615 7.481 Z M 5.538 1.87 L 3.691 1.87 L 3.691 3.74 L 5.538 3.74 Z M 11.077 3.74 L 9.231 3.74 L 9.231 5.61 L 7.385 5.61 L 7.385 7.48 L 9.231 7.48 L 9.231 9.351 L 11.077 9.351 L 11.077 7.48 L 12.923 7.48 L 12.923 5.61 L 11.077 5.61 Z M 3.691 9.351 L 3.691 11.221 L 5.538 11.221 L 5.538 9.351 Z M 18.461 5.61 L 18.461 3.74 L 16.615 3.74 L 16.615 5.61 Z M 3.692 3.74 L 1.846 3.74 L 1.846 5.61 L 3.692 5.61 Z M 18.461 5.61 L 18.461 7.481 L 20.307 7.481 L 20.307 5.61 Z M 0 5.61 L 0 7.481 L 1.846 7.481 L 1.846 5.61 Z M 1.846 7.481 L 1.846 9.351 L 3.692 9.351 L 3.692 7.481 Z" fill="transparent" height="13.090799310302735px" id="ezBLcbJbY" transform="translate(2 5)" width="20.307099353027343px"><path d="M 3.692 1.87 C 5.538 1.87 7.385 1.87 9.231 1.87 L 9.231 0 C 6.154 0 3.077 0 0 0 L 0 1.87 C 1.231 1.87 2.461 1.87 3.692 1.87 Z" fill="rgb(0, 0, 0)" height="1.8701299999999996px" id="YGRKt_pLy" transform="translate(5.537 0)" width="9.230789999999999px"/><path d="M 5.538 0 C 3.692 0 1.846 0 0 0 L 0 1.87 C 3.077 1.87 6.154 1.87 9.231 1.87 L 9.231 0 C 8 0 6.769 0 5.538 0 Z" fill="rgb(0, 0, 0)" height="1.8701000000000008px" id="pENQam4Fp" transform="translate(5.537 11.221)" width="9.230789999999999px"/><path d="M 0 1.87 L 1.846 1.87 L 1.846 0 L 0 0 Z" fill="rgb(0, 0, 0)" height="1.8701000000000008px" id="IdGjdSKft" transform="translate(14.77 9.351)" width="1.8461999999999996px"/><path d="M 1.846 1.87 L 1.846 0 L 0 0 L 0 1.87 Z" fill="rgb(0, 0, 0)" height="1.8701299999999996px" id="fx1xmquRX" transform="translate(14.77 1.87)" width="1.8461999999999996px"/><path d="M 0 1.87 L 1.846 1.87 L 1.846 0 L 0 0 Z" fill="rgb(0, 0, 0)" height="1.8701000000000008px" id="bWymEbfEj" transform="translate(16.615 7.481)" width="1.8461999999999996px"/><path d="M 1.846 0 L 0 0 L 0 1.87 L 1.846 1.87 Z" fill="rgb(0, 0, 0)" height="1.8701299999999996px" id="N0To9leXV" transform="translate(3.691 1.87)" width="1.8461499999999997px"/><path d="M 3.692 0 L 1.846 0 L 1.846 1.87 L 0 1.87 L 0 3.74 L 1.846 3.74 L 1.846 5.61 L 3.692 5.61 L 3.692 3.74 L 5.538 3.74 L 5.538 1.87 L 3.692 1.87 Z" fill="rgb(0, 0, 0)" height="5.61037px" id="FRMFZVc8Q" transform="translate(7.385 3.74)" width="5.538399999999999px"/><path d="M 0 0 L 0 1.87 L 1.846 1.87 L 1.846 0 Z" fill="rgb(0, 0, 0)" height="1.8701000000000008px" id="PLrVLwp7v" transform="translate(3.691 9.351)" width="1.8461499999999997px"/><path d="M 1.846 1.87 L 1.846 0 L 0 0 L 0 1.87 Z" fill="rgb(0, 0, 0)" height="1.8701699999999999px" id="z4yWixwnK" transform="translate(16.615 3.74)" width="1.8461999999999996px"/><path d="M 1.846 0 L 0 0 L 0 1.87 L 1.846 1.87 Z" fill="rgb(0, 0, 0)" height="1.8701699999999999px" id="CdbTSc9Xj" transform="translate(1.846 3.74)" width="1.8461600000000002px"/><path d="M 0 0 L 0 1.87 L 1.846 1.87 L 1.846 0 Z" fill="rgb(0, 0, 0)" height="1.870099999999999px" id="p1eCF3LeH" transform="translate(18.461 5.61)" width="1.8461999999999996px"/><path d="M 0 0 L 0 1.87 L 1.846 1.87 L 1.846 0 Z" fill="rgb(0, 0, 0)" height="1.870099999999999px" id="QMtNUiKtc" transform="translate(0 5.61)" width="1.846149999999997px"/><path d="M 0 0 L 0 1.87 L 1.846 1.87 L 1.846 0 Z" fill="rgb(0, 0, 0)" height="1.8701000000000008px" id="iPmBt1fCR" transform="translate(1.846 7.481)" width="1.8461600000000002px"/></g></svg>)
