pt flag
pt flag

live wire

Live Wire é um site de reservas de shows que permitirá que fãs de música de todas as idades consigam facilmente conseguir ingressos para ver seus artistas favoritos em shows, com foco em artistas locais. Nosso objetivo é apoiar todos os artistas, especialmente os independentes e locais.

DURAÇÃO DO PROJETO

Junho 2024

MEU PAPEL

Designer de UX liderando o design do site Live Wire

RESPONSABILIDADES

Realização de entrevistas, wireframing em papel e digital, prototipagem de baixa e alta fidelidade, realização de estudos de usabilidade, contabilização de acessibilidade, iteração de designs e design responsivo

O PROBLEMA

Sites de reserva de shows disponíveis atualmente dificultam encontrar shows locais e artistas independentes. Às vezes, pode levar horas de pesquisa para encontrar os artistas independentes que as pessoas gostam na cidade, para desfrutar os shows com os amigos. A maioria dos processos de checkout são demorados e confusos.

O OBJETIVO

Criar um site de reservas de shows que seja intuitivo e fácil de usar, fornecendo navegação clara e um processo de checkout rápido e fácil.

O projeto

RESUMO

Eu conduzi entrevistas com usuários, que então transformei em mapas de empatia para entender o usuário-alvo e suas necessidades. Descobri que muitos usuários-alvo gostam de reservar shows online para ir com amigos quando precisam de uma pausa do trabalho ou da escola.

Muitos sites de reserva de shows são “muito pesados” e confusos de navegar, o que frustrou muitos usuários-alvo. Em vez de ter uma experiência agradável, eles tiveram dificuldade para reservar ingressos, invalidando o propósito.

PESQUISA DE USUÁRIO

Pesquisa dE usuário: pontos críticos

NAVEGAÇÃO

Os sites de reserva de shows estão frequentemente “ocupados”, o que resulta numa navegação confusa

1

EXPERIÊNCIA

Sites de reserva de shows não oferecem uma experiência de navegação clara e envolvente

CONTA

Alguns usuários estão acostumados a criar contas, enquanto outros não gostam desse processo. A criação de contas deve ser opcional

ACESSIBILIDADE

Faltam locais equipados com fácil acesso para pessoas com deficiência

2

3

4

PERSONAS

Metas

  • Ter mais facilidade para reservar ingressos para shows

  • Encontrar mais artistas independentes nas proximidades

  • Ir a mais shows com amigos

"As pessoas deveriam apoiar mais artistas independentes, nós também temos contas pra pagar!"

Frustrações

  • Conseguir ingressos para artistas independentes pode ser um incômodo

  • Os ingressos sempre estão esgotados quando descobrem sobre o show

Osei é uma dançarina profissional e músico independente que trabalha em Londres, que sempre perde os shows de seus artistas independentes favoritos. Ir a shows a deixa feliz, especialmente com amigos. Equilibrar trabalho e vida social é muito difícil para ela, especialmente se ela gosta de artistas independentes.

Idade:

Educação:

Cidade:

Familia:

Ocupação:

osei adebayo

28

Bach. Música

Londres

Gato

Dançarina e músico

NEcalli popoca

Idade:

Educação:

Cidade:

Familia:

Ocupação:

36

Ensino médio

Barcelona

Solteira

Desenvolvedor front-end

"Ir a shows torna a minha vida mais leve e divertida!"

Metas

  • Ir a mais shows na sua região

  • Preços mais acessíveis financeiramente para que mais amigos possam adquirir ingressos

  • Designs web mais intuitivos

Frustrações

  • "Muitos shows não são acessíveis para todos os meus amigos"

  • "A acessibilidade nos locais é horrível e nem sempre é mencionada em muitos sites de reserva de shows"

  • É difícil encontrar shows locais independentes

Necalli é um desenvolvedor front-end freelancer autodidata que mora em Barcelona. Ele está sempre procurando por shows em sua região, mas a maioria deles são caros para alguns de seus amigos que têm um orçamento mais apertado. Ele tem um amigo com deficiência física, e eles nem sempre sabem quando os locais são acessíveis, então eles nem sempre podem ir a shows juntos.

PERSONA A

PERSONA B

DECLARAÇÃO DO PROBLEMA

Osei é uma dançarina e músico ocupada que precisa comprar ingressos para shows a tempo porque quer ir a mais shows com amigos para apoiar artistas independentes.

DECLARAÇÃO DO PROBLEMA

Necalli é um desenvolvedor front-end que precisa de ingressos para shows com preços acessíveis porque nem todos os seus amigos podem aproveitar a experiência com ele.

Mapa da jornada do usuário

O mapa da jornada do usuário da experiência do Necalli revelou o quão importante é abordar pontos críticos simples, mas importantes, como acessibilidade para pessoas com deficiência, para encontrar oportunidades de melhoria.

Mapa do site

A dificuldade de navegação de sites devido a designs confusos e carregados era um dos principais problemas dos usuários, então criei um mapa do site com base nesse conhecimento.

Meu objetivo aqui era criar um mapa do site simples e fácil para melhorar a navegação geral do site.

Iniciando o design

Wireframes de papel

Em seguida, esbocei wireframes de papel para cada tela do site, mantendo em mente os pontos críticos do usuário.

As variações do wireframe de papel da tela inicial se concentram na otimização da experiência de navegação dos usuários.

Variações da tela inicial

Variações de tamanho de tela da tela inicial

Os usuários do Live Wire acessam o site em vários dispositivos diferentes, então comecei a trabalhar em designs para tamanhos de tela adicionais para garantir que o site fosse totalmente responsivo.

tablet
mobile

Fácil acesso à navegação de shows

A página inicial é otimizada para facilitar a navegação com um layout aberto e opções de menu de navegação.

Wireframes digitais

A mudança do papel para o digital tornou fácil entender como o redesign poderia ajudar a resolver os problemas do usuário e melhorar sua experiência.

Priorizar um layout aberto com posicionamento claro de elementos visuais na página inicial foi uma parte fundamental do design.

Wireframes digitais: Variações de tamanho de tela

PROTÓTIPO DE BAIXA FIDELIDADE

Para o protótipo de baixa fidelidade, conectei todas as telas do user flow principal, com um processo simples de pedido e checkout.

Nesse ponto, eu tinha recebido feedback de amigos e familiares sobre coisas como posicionamento de botões e organização de páginas. Fiz questão de ouvir o feedback deles e implementei várias sugestões em lugares que abordavam os pontos críticos do usuário.

ESTUDO DE USABILIDADE: PARÂMETROS

TIPO DE ESTUDO

Estudo de usabilidade não moderado

PARTICIPANTES

5 participantes

LOCALIZAÇÃO

Espanha, remoto

DURAÇÃO

20-30 minutos

ESTUDO DE USABILIDADE: RESULTADOS

Estas foram as principais descobertas do estudo de usabilidade:

1

2

3

Acessibilidade

Durante o processo de checkout, não há informações de acessibilidade sobre os locais.

Checkout

Os usuários querem um processo de checkout mais rápido e fácil.

Conta

Alguns usuários acham que criar uma conta é uma tarefa tediosa.

MOCKUPS (MAQUETES)

Com base nos insights do estudo de usabilidade, fiz alterações para melhorar o fluxo de checkout principal do site. Uma das alterações que fiz foi adicionar a opção de editar a quantidade de ingressos, enquanto o usuário faz o pedido antes do checkout com um simples "+" e "-". Isso deu aos usuários a opção de editar a quantidade de ingressos sem voltar no processo de checkout.

ANTES DO ESTUDO DE USABILIDADE

APÓS ESTUDO DE USABILIDADE

ANTES DO ESTUDO DE USABILIDADE

APÓS ESTUDO DE USABILIDADE

Refinando o design

Para facilitar o processo de checkout para os usuários, adicionei o processo de criação de conta como uma opção para usuários que não gostam dessa etapa.

Mockups: tamanho original da tela

Eu incluí considerações para tamanhos de tela adicionais em meus mockups com base nos wireframes principais. Como os usuários reservam ingressos de uma variedade de dispositivos, é crucial otimizar a experiência de navegação para uma variedade de tamanhos de dispositivos, como celulares e tablets, para que os usuários tenham a melhor experiência possível.

Mockups: variações de tamanho de tela

tablet

Mobile

PROTÓTIPO DE ALTA FIDELIDADE

O protótipo hi-fi seguiu o mesmo fluxo de usuário que o protótipo lo-fi. Eu incluí mudanças de design após o estudo de usabilidade, tal como mudanças baseadas no feedback de meus amigos e familiares.

1

Usei headings com texto de tamanhos diferentes para melhorar a hierarquia visual, juntamente com ícones familiares para tornar a navegação mais rápida

CONSIDERAÇÕES DE ACESSIBILIDADE

2

Usei pontos de referência para ajudar os usuários a navegar no site, incluindo usuários que dependem de tecnologias assistivas

Eu projetei o site com texto alternativo disponível em cada página para um acesso mais suave ao leitor de tela

3

CONCLUSÕES

IMPACTO

Nossos usuários-alvo compartilharam que o design era intuitivo para navegar, mais envolvente e atraente com as imagens, e demonstrava uma hierarquia visual clara.

O QUE EU APRENDI

Uma pequena mudança de design pode ter um grande impacto na experiência do usuário. O mais importante para mim é sempre focar nas necessidades reais do usuário ao criar ideias e soluções de design.

Daqui para frente

PRÓXIMOS PASSOS

1

Realizar testes de usabilidade de acompanhamento no novo site

2

Identificar quaisquer áreas adicionais de necessidade e idear sobre novos recursos

Obrigada pelo seu tempo analisando meu trabalho!

© 2024. Gabriela Lima

gabrielalimadesigns@gmail.com