Gympass
Uma pequena melhoria de navegação e design no app desta fantástica Startup (Português — BR)
--
English version: https://medium.com/@rafaelvale/gympass-2b95ba10fe17
Rápida Intro
Eu tenho um grande amigo que recentemente entrou na Gympass e me fala muito bem da empresa e das pessoas que trabalham nela. Porém como eu nunca trabalhei em um lugar que oferecesse esse benefício eu nunca tinha entrado no app. Hoje, por incrível que pareça, eu recebi um e-mail me falando que tem uma vaga de Product Designer para trabalhar na Gympass e então eu decidi me candidatar. Ao preencher o cadastro me deparei com essa pergunta: "Cite 3 problemas do produto". Então como eu nunca tinha usado fui atrás do app e comecei a navegar e encontrei alguns pontos de melhoria em algumas telas que aqui tento corrigi-los. Boa leitura 👍
Sumário
1. Background
2. Problemas encontrados
3. O resultado final
1. Background 📜
O Gympass, um plano de benefício corporativo que dá acesso a academias, está discretamente se transformando de uma boa sacada local — nascida no segundo país com maior número de academias — num negócio global.
Fundado há cinco anos, o Gympass já está em 10 países incluindo França, Alemanha, Holanda, Itália e Reino Unido. A próxima fronteira: os EUA.
Mas como funciona? 🤔
Tipicamente, o RH de uma empresa contrata o Gympass e monta algumas opções de planos. Cada funcionário escolhe o seu, dependendo do que estiver disposto a pagar. Já a empresa paga uma taxa de administração que é função do número de funcionários elegíveis e do perfil das academias que serão usadas.
O Gympass é um benefício corporativo feito sob medida para um mundo cada vez mais preocupado com saúde e atividade física: com ele, o funcionário de uma empresa consegue fazer visitas ilimitadas a múltiplas academias — e paga menos da metade da mensalidade normal.
2. Problemas Encontrados 😢
Tela Academias pt.1
Assim que você baixa e entra no app ele te apresenta uma tela com 4 botões no topo, "Voltar", "Academias", "Como Funciona". Além de um menu hambúrguer, aqueles famosos três tracinhos, sabe?! E Logo abaixo mais 3 botões, "filtros", "Lista" e "Mapa". Eu acredito que aí já pode ser criado alternativas. Vamos analisar:
1- Acabei de entrar no app. Então acredito qaue não há motivo para um botão de voltar. Ao clicar ele entra no estado ativo (sublinhado) mas nada acontece. 2- O “Como Funciona” deveria ser a primeira coisa que o usuário vê ao entrar no app. Um onboard explicando o app, como funciona o negócio e preços dos planos seria bem legal.
3- Acho redundante você estar na lista de academias e mesmo assim o botão da lista ficar aparecendo. Se a gente retirar ganha mais espaço para respirar e diminui a sensação de bagunça.
4- Senti muita falta de um search. As vezes quero saber se a academia X está no meu plano, ou aonde tem uma academia perto do meu hotel quando vou fazer uma viagem a trabalho para me programar. Isso faz MUITA falta.
5- Dentro do menu hambúrguer(3 tracinhos) há vários itens e alguns que considero importante como o "para sua empresa" e o próprio login/cadastro. Acredito que eles merecem um destaque maior no app.
6- Espaço enorme desnecessário entre o primeiro menu e o segundo.
Tela Academias pt2
Agora vamos focar na lista em si. Aqui encontrei falta de padronização, espaçamento, hierarquia, organização etc. Outro problema aqui é o menu que some na rolagem. Então se eu estiver lá embaixo na lista e quiser mudar de tela eu teria que rolar tuuuuudo de novo lá pra cima.
1- Espaçamento vertical sem padronagem no grid. Achei espaçamento de 11px, 16 px, 13 px, 15px, 33px… Esse problema foi apresentado em todas as telas.
2- Distância para academia no canto superior direito, endereço no canto inferior esquerdo.. Que tal deixar essas infos juntas já que são relacionadas?
3- Com a search bar que sugeri acima podemos retirar o "Academias em Brasília" assim ganhando mais espaço e respiro.
4- Acredito que falta padrão nas imagens, umas estão ocupando a largura da tela toda, outras não.
5- Que tal tirar as setas das imagens e colocar só pontinhos para o usuário saber que tem mais fotos? Deixa a tela mais limpa.
6- Sobre os preços, aqui optaria por colocar o preço mais em conta do plano da academia, por exemplo "a partir de R$X", para chamar a atenção e o usuário clicar para ter mais infos.
7- Acredito que não há necessidade de colocar a logo da empresa nessa área do app pois aumenta a quantidade de informação pro usuário e assim podendo deixa-lo mais confuso.
Tela Mapas
Seguindo, cliquei no mapa para ver do que se tratava e como já era de se esperar, era um mapa com as academias mais próximas. Bem legal! Mas também acredito que há espaços para melhoria.
"A ideia é ótima de ter várias opções de academias mas não consigo localizar nenhuma do meu plano no mapa." (Reclamação retirada da app store)
1- O pin no mapa é muito pequeno, se aumentarmos um pouco facilita o clique do usuário. Imagina se tiver vários pins desse tamanho próximos um do outro…
2- Sem clicar no pin não consigo saber que academia é aquela ou qual modalidade ela oferece. Que tal colocarmos pequenas infos das academias que estão sendo mostradas no mapa sem precisar clicar no pin?
3- Agora alguns problemas de navegação: Se eu clicar no filtro e mandar aplicar, o app sai do mapa e volta pra lista.
4- Ao aplicar o filtro > voltar pra lista > voltar pro mapa novamente > e depois clicar no botão "voltar" as vezes o filtro reseta, as vezes ele vai pra uma tela que eu nem cliquei...
5- O botão voltar é bem importante na minha opinião, pois se o usuário desejar ir pra lista de academias ele vai pensar "vou VOLTAR pra lista" e automaticamente vai procurar o botão de voltar no canto superior esquerdo e não o botão "lista". Mais um motivo para retirar esses botões dali.
Tela "Como Funciona"
Acredito que essa tela deveria ser a mais importante no app para os novos usuários, ela seria a tela de boas vindas. Nela há chances de apresentar o negócio, app, planos de assinatura, de uma forma bem legal e leve. Infelizmente, hoje essa parte do app ficou muito extenso, de leitura difícil e cansativa. Que tal apresentar essas informações de forma mais divertida, resumida e que caso o usuário se interesse ele obtenha mais informações sobre determinado tópico?! Essa tela também sofre do problema do menu não ser fixo. Se você rolar até o final e quiser navegar para outra parte do app você obrigatoriamente tem que voltar ao topo do app, é bem trabalhoso.
"…Muito texto, pouca usabilidade. Invistam em UX!" (Reclamação retirada da app store)
Tela Informações da Academia
Ao entrar nessa tela acredito que o usuário vai querer saber as informações principais da academia como nome, fotos, endereços, modalidades oferecidas, informações da academia, preço. O que temos na versão atual é uma foto, que ao clicar abre um modal para as outras, logo da academia, nome, um coração preenchido, avaliações, endereço e o primeiro pacote.
1- O padrão de ver as fotos deveria ser mantida uniforme em todo o app. Se na outra tela é um carrossel aqui também deveria ser. Assim fica parecendo que só tem uma foto, o usuário tem que adivinhar que ao clicar pode ver outras.
2- O coração preenchido da a impressão que eu cliquei nele. Mas não cliquei, e o preto fica uma cor estranha. Que tal vermelho, como a cor da marca, quando clicar e só o contorno quando não clicar?
3- Quais modalidades essa academia oferece, além dessa primeira que é mostrada? O usuário teria que procurar muito para encontrar essa info se a primeira apresentada não for de seu interesse.
4- Antes do preço seria legal saber mais sobre a academia. Não fecharia um pacote assim no escuro. Vamos adicionar uma breve introdução para a academia "se vender".
5- Call to action fixo no inferior não chama muita a atenção, acredito que está muito pequeno. Poderia ser maior e com uma frase mais chamativa.
6- Não tem mapa pra eu saber como chegar ou aonde é.
3. O Resultado Final 😍
Nova Tela Academias
Primeiro de tudo, retirei aqueles botões no topo que estavam meio confusos e desorganizados. Substitui por uma search bar para que o usuário possa buscar por cidades, nomes de academias, modalidades etc. Coloquei alguns atalhos com os filtros mais utilizados e mais um botão de filtro para mais opções não tão procuradas. Também criei um menu fixo de atalhos mais importantes na parte inferior do app.
Coloquei organização no grid vertical, está tudo no padrão de 5px. (5, 10, 15, 20, 25, 30, 35…). É bem nítido o conforto que dá para a leitura das informações. Também utilizei menos o vermelho, apenas em pontos de destaque e retirei qualquer outra cor que não seja o vermelho e o preto.
Deixei a imagem da academia bem limpa para dar um destaque, joguei as informações de distância e preço para onde se encontram todos os textos (endereço, nome da academia, principais modalidades, preços, avaliações) para dar uma uniformidade e não ter quebras de leitura. Na tela original tinha apenas uma linha de um resumo da academia, acredito que ela pode ser retirada pois não agregava muito ao usuário.
Dei um padrão para as margens laterais, assim fixei o tamanho também das imagens para todas ficarem do mesmo tamanho, também retirei as setas de navegação e coloquei bullets para deixar a imagem mais livre para a observação do usuário.
Nova Tela Mapas
Aqui tentei resolver todos o que citei anteriormente. A dificuldade em clicar em um pin pequeno, não ter um preview das academias, e também adicionei preços nos mapas para o usuário ver qual é a academia mais barata aonde ele está procurando.
Nova Tela Informação da Academia
Aqui preferi focar na primeira leva de informações que o usuário vê ao acessar essa parte do app e, claro, resolver os problemas citados. Deixei o padrão de navegação das fotos assim como na lista de academias, retirei o ícone de coração pois estamos em uma área não logada, coloquei todas as modalidades oferecidas pela a academia, adicionei um atalho para o mapa e também fiz um call to action mais chamativo, com informações do pacote selecionado.
Nova Tela “Como Funciona”
Aqui foi uma das maiores mudanças. Tentei deixar tudo mais leve, simples, divertido e atrativo. Expliquei em poucos passos o que é a Gympass, como funciona, e dei destaque para o plano empresarial e para a indicação de empresas, que acredito ser algo muito importante para a Gympass.
Prototipo
Também fiz um rápido protótipo no Principle para mostrar melhor a navegação:
Obrigado por ler! Deixa uma palminha aí pra apoiar 👏 👏👏
Qualquer critica, sugestão, convites para cafézinhos me mande um e-mail no rafaelmsv@gmail.com ou acesse meu linkedin.
