Redesenho do totem de autoatendimento
O totem de autoatendimento da iGUi mostrava o portfólio de piscinas em feiras, com um scroll que cansava em tela grande. Refiz o produto como uma plataforma que atende o cliente na loja e o negócio na mesa de reunião.
- Meu papel
- Product Designer
- Período
- 1 mês (redesenho)
- Times
- Design + Engenharia
- Plataforma
- Touchscreen · Tablet · Web
Contexto
O totem iGUi é um showroom digital de autoatendimento. Começou pequeno, para apresentar o portfólio de piscinas em feiras de negócios, e acabou servindo marca, franqueados e clientes.
Roda em telas grandes nas lojas e em tablets de vendedores em campo. Em 365 dias, cerca de 24 mil sessões reais passaram por ele.
Meu papel
Redesenhei o totem de ponta a ponta em um mês e transformei o projeto no meu TCC de pós em UX, um estudo de caso de design de serviços sobre o próprio produto. Desde o lançamento, ele amadurece por melhorias contínuas.
- Fiz
- Pesquisa · arquitetura de informação · protótipo · handoff
- Dividi
- Engenharia e liderança
O problema
Adicionar scroll vertical ao totem existente parecia a solução simples. Mas em telas grandes essa navegação exigia movimentos amplos e repetitivos, que cansavam quem usava.
E o portfólio não parava de crescer. A organização antiga não acompanhava, e a interface ainda precisava funcionar sob luzes e distâncias de uso muito diferentes.
Processo
-
Discovery
Conversei com quem usa e cruzei com diretrizes de ergonomia (NN/g). O problema não era estética, era esforço físico numa tela grande.
-
Arquitetura
Reorganizei a home em carrosséis horizontais agrupados por tamanho, em que modelos novos entram sem quebrar a clareza.
-
Adaptação
Modo claro e escuro para lojas iluminadas e eventos escuros; interface adaptada para touchscreen, tablet e celular.
-
Entrega
Protótipo e especificação das jornadas.
Decisões
-
Carrosséis horizontais no lugar do scroll
A rolagem vertical em tela grande exigia movimentos amplos. Carrosséis agrupados por tamanho distribuem o conteúdo na largura e mantêm a navegação na zona de toque confortável.
-
Ações na base, topo só visual
Reorganizei os controles na parte de baixo, onde o toque é confortável para quem está de pé. O topo ficou só com informação, para não obrigar o usuário a levantar o braço. Alvos de toque de no mínimo 1 cm².
-
Dois modos para dois ambientes
Modo claro para lojas iluminadas, escuro para eventos com pouca luz. A mesma solução funciona no ponto de venda e no tablet do vendedor em campo.
-
Um segundo eixo: o corporativo
Do TCC surgiu o modo corporativo, uma apresentação de alto padrão para a liderança usar com incorporadoras. Filtra o acervo por cliente e monta a apresentação por empreendimento. Fica atrás de uma chave: o totem de loja continua sendo o de loja, e o mesmo aparelho serve a mesa de reunião sem confundir quem entrou para ver piscina.
Resultados
2 toques
Da atração ao detalhe do modelo
Mesmo caminho da versão anterior, com o dobro do acervo · 9 modelos viraram 18 sem cobrar um toque a mais
~45%
Das lojas da rede
Em uso, cerca de 24 mil sessões reais por ano · testado em eventos com mais de 60 mil visitantes
1 → 3
Categorias de revestimento
A interface antiga só suportava 7,5×7,5 cm · os swatches são o ponto mais clicado da tela, 4.884 cliques em 1.700 exibições
Aprendizados
A rede já entendeu para que o totem serve, e o desafio agora é sustentar a infraestrutura.
O mesmo totem que apresenta o produto na loja virou argumento de autoridade da marca na mesa de negociação.
Próximo projeto
Uma interface para o acervo de um assistente de IA