Bianca Nassar Cabral's profile

iBar | Bottle Service Feature Design

Como parte do curso de Certificação em UX da Daredev, tive a oportunidade de participar do Case real para a implementação de uma nova feature para o app canadense iBar.

O iBar
Fintech canadense para o mercado de entretenimento. Tem a missão de facilitar o processo de compra e aumentar o lucro de bares e casas noturnas, melhorando a experiência de compra dos usuários desses locais, evitando filas e estresse na compra de produtos.

Perfil dos clientes
20 a 32 anos.
Frequentam em grupos de 3 a 5 amigos.
media de consumo de $120/noite.

O proposta do desafio
Implementar uma nova feature, o Bottle Service, serviço que funcionaria para compra de uma garrafa de bebida alcoólica premium, reserva de mesa e ornamentos, através de reserva antecipada.

Matriz CSD
Certeza: deve ser uma jornada rápida, intuitiva e de fácil compreensão. Ele precisa fazer a reserva em um primeiro momento.
Suposições: o usuário não vai saber quantas pessoas vão exatamente e isso vai travar a fluidez da jornada. O usuário gostaria de dividir a conta com os amigos.
Dúvidas: será que devemos perguntar qual garrafa o usuário vai beber? Não é muito cedo e se ele mudar de ideia? O usuário iria a mais de um bar por noite?

Telas pedidas
Tela geral para o Bottle Service; 
Tela com Combos oferecidos pelo bar/clube selecionado; 
Tela de seleção de opções do combo escolhido; 
Tela de pagamento e
Tela com QR Code de Confirmação.

O desenvolvimento da feature
Mapa da jornada do usuário
Baseada nas informações oferecidas pela empresa, primeiramente fiz um Mapa da jornada do usuário considerando a nova feature proposta. Assim, pude identifica pontos que poderiam ser explorados dentro das necessidade que a iBar levantou que a nova feature necessariamente precisaria ter.
Moodboard
Considerados os Insights anotados no Mapa da jornada do usuário, juntei imagens de referência e fiz um Moodboard para referência de como fazer a distribuição de informações de modo que a organização dentro do aplicativo ficasse mais familiar e intuitiva para o usuário
Rabisco Frames
A partir disso, juntando as informações que tinha até esse momento, fiz primeiramente uns rabisco frames para ter uma ideia de distribuição de informações.
Wireframe
Em seguida fiz um wireframe seguido do primeiro protótipo de alta fidelidade.
Nessa etapa foram feitos teste de usabilidade com usuários, onde anotei alguns pontos de melhoria na minha proposta.
Portótipo de Alta fidelidade
A proposta final você pode conferir abaixo!
iBar | Bottle Service Feature Design
Published:

iBar | Bottle Service Feature Design

Published: