Awari

Estudo de caso UX/UI – Como tornar a experiência com o Prime Video mais imersiva

Um mergulho na plataforma de streaming da marca mais valiosa do mundo, e por que ela precisa ser melhorada.

Com o avanço da tecnologia as pessoas buscam cada vez mais trazer experiências externas para dentro de casa, agora então, mais do que nunca. Nos últimos 10 anos presenciamos as locadoras de DVDs e VHS fechando, as lojas de CDs sendo deixadas de lado e as pessoas consumindo cada vez mais conteúdos acessíveis através da tão amada internet.

A experiência do cinema é extremamente imersiva e sensorial. Essa experiência se dá através de todo o ambiente e mexe com todos os sentidos.

Com a audição através de uma alta qualidade de som e em alto volume; com a visão garantindo a imersão através do ambiente escuro, as cores e a tela enorme; com o olfato e o paladar através do cheiro e do sabor garantido da pipoca de cinema, porque não é qualquer pipoca já que elas até passaram a ser comercializadas; e por último com o tato através do ambiente e das poltronas de cinema que foram ganhando cada vez mais recursos.

Em 2011, a Amazon criou a “Amazon Prime Video” o serviço de streaming que conhecemos hoje como concorrente direto da Netflix. Mas foi em 2016, que ela expandiu globalmente chegando ao Brasil e vem crescendo desde então.

Me deparei com o desafio de escolher um problema real para solucionar. Demorei algumas semanas até perceber o quanto eu e pessoas próximas a mim reclamavam e tinham certas dificuldades com a plataforma do Prime Video.

Comecei a pesquisar e reparei que contestações estavam realmente presentes em todo o Brasil. Como adoro desafios, pensei “ora, por que não?”.

O desafio com este projeto então, foi trazer essa imersão do cinema para dentro de casa:

Como garantir a imersão através de um único produto?

Neste caso, certas experiências sensoriais ficam a critério de cada usuário, e é isso que torna mais interessante, pois cada um pode customizar a sua experiência como preferir.

E foi assim que em março iniciei o processo de redesign da plataforma de streaming da Amazon, e que vou contar a vocês abaixo.

Se você é um apressadinho, tá aqui o spoiler: bit.ly/primevideoporjade


Identificar

O processo criativo dentro do design pode variar bastante, costumo buscar e valorizar práticas alternativas, visando novas perspectivas e buscando a desinstrumentalização do processo de design.

Com um pé no Duplo Diamante eu costumo seguir três etapas chaves:

  • Identificar
  • Planejar, e
  • Criar.

Mas independentemente do processo, o importante é a experimentação, sempre com atenção aos detalhes, cuidado e precisão na concepção — Corita Kentbem colocou como regras:

“Considere tudo um experimento.”

“Não tente criar e analisar ao mesmo tempo. Esses são processos diferentes.”

Os processos podem ser distintos, mas uma coisa é certa, todo processo de design começa com um bom e recheado briefing. De acordo com o método 5W1H do designer Artiom Dashinsky, no briefing e durante as etapas objetivo responder as seguintes perguntas:

  • Why (Por quê?)
  • Who (Quem?)
  • When (Quando?)
  • Where (Onde?)
  • What (O quê?)
  • How (Como?)

Nesta primeira etapa busco identificar as fricções, o problema, para isso é necessário analisar, investigar e pesquisar. Buscar responder as perguntas de acordo com o produto atual.

Para responder as perguntas fui atrás do grande Google — já que Jeff Bezos andava bem ocupado para mim.

As perguntas contempladas no briefing circundavam: a empresa, o produto, o mercado, o público e os objetivos deste projeto.


Pesquisa

Sendo assim, elaborei um plano de pesquisa para nortear os objetivos que busco com toda a etapa de identificação e pesquisa. Uma vez analisado o briefing é hora de ir mais a fundo em busca de mais certezas.

Os principais pontos definidos a serem estudados foram:

  1. Identificar uma média de uso da plataforma;
  2. Identificar os principais problemas da plataforma e entender o contexto;
  3. Entender e conhecer melhor os usuários e suas necessidades, quem são, o que eles desejam com a plataforma e as tarefas exercidas por eles;
  4. Identificar os pontos de fricção no processo de assistir um filme ou série;
  5. Identificar os pontos fortes e fracos no produto;
  6. Descobrir a taxa de retenção;
  7. Descobrir MAU/DAU (Taxa de usuários ativos mensalmente e diariamente);
  8. Identificar as principais reclamações de desempenho;
  9. Identificar os principais dispositivos acessados pelos usuários;
  10. Descobrir a taxa de satisfação dos usuários com o visual estético da interface.

A fim de encontrar respostas para estas dez questões utilizei de algumas metodologias de pesquisa presentes no UX Design, foram elas: Questionário online, testes de usabilidade, criação de personas, mapas de empatia, análise heurística, atomic research e card sorting.


Antes de mostrar o resultado de cada metodologia é importante saber o que me levou a chegar até elas, e assim como no método científico os resultados surgem a partir de hipóteses. Como citei no início, a motivação deste projeto surgiu dentro da minha própria casa ao tentar assistir uma série e observar familiares e amigos ao fazer o mesmo. Sendo assim observei, julguei, levantei e coletei dados básicos e então gerei hipóteses.


Hipóteses

Segue então alguns dos pontos que presumi ao iniciar o projeto.

  • A preferência dos usuários por utilização do produto concorrente;
  • A não satisfação com o visual da interface atual (UI), pouco atrativa;
  • A dificuldade de usabilidade ao encontrar temporadas de séries;
  • A dificuldade para encontrar os gêneros dos filmes e séries;
  • Identificar se buscam a plataforma mais para assistir filmes ou séries;
  • A insatisfação com a falta de diferentes perfis de acesso;
  • A falta de personalização para o usuário;
  • A insatisfação com as propagandas antes de começar a assistir um filme ou série;
  • A vantagem de mostrar o elenco e música presentes em uma determinada cena da série ou filme e também o IMDB;
  • A desvantagem de não poder avaliar o conteúdo já assistido.

Agora sim, chegou a hora de validar as minhas hipóteses que foram coletadas a partir da observação, do briefing e de levantamento de dados básicos. Vamos então às metodologias.


Questionário online

Buscando entender melhor os pontos definidos a ser estudados e a validar ou não as hipóteses, elaborei um formulário online que contou com respostas de 50 participantes. Dentre os dados coletados citarei as de mais relevância para as mudanças que elaborei no projeto.

Através das respostas do formulário validei algumas hipóteses e descobri novos detalhes que não previ. Algumas das descobertas foram que apenas menos da metade dos participantes são usuários do Prime Video, e destes a maioria não tem vontade de assinar o serviço. A taxa de satisfação do serviço foi mediana para boa. A maior parte dos usuários acessam através da TV e o segundo meio mais utilizado é o computador, o que me levou a desenvolver a nova interface apenas para estes meios. 72% dos participantes dividem a conta com outras pessoas, o que justifica a necessidade de diferentes perfis de usuário (em julho, durante o projeto, a Amazon Prime Video implementou a criação de diferentes perfis).

Um dos aspectos que mais me chamou a atenção na plataforma, como designer e usuária, foi o visual da interface e houve uma comparação inconsciente com a plataforma concorrente. Sendo assim, considerei importante também na pesquisa fazer comparativos entre os dois serviços. O resultado validou o que eu já sentia.

Busquei também no questionário avaliar a importância de cada funcionalidade, analisando se os usuários lembravam da existência delas e se a usavam ou gostariam de vir a usar. Avaliei tanto funcionalidades já existentes, quanto inexistentes que poderiam ser implementadas.

Uma coisa todos os participantes do questionário tem em comum: são usuários da Netflix.

Esse questionário foi um importante norteador para todo o projeto, e a partir dele elaborei também as perguntas para a próxima etapa desenvolvida: os testes de usabilidade.


Testes de usabilidade

Acredito que o diferencial acontece quando olhamos para os detalhes. Sendo assim optei pela criação de Nuggets dentro do método Atomic Research, no qual consiste em fragmentar a pesquisa em pequenos compartimentos em busca de ter uma análise mais aprofundada. Para isto usei de referência o modelo do QuintoAndar ↗no qual um nugget equivale a uma fala do usuário e apliquei o modelo de pesquisa do Notion.

Foram cinco entrevistados ao todo, segue os nuggets mais interessantes:

Minha maior frustração é encontrar um filme e a personalização da interface. Podia ser mais exclusivo no gosto do cliente, não ser uma busca tão objetiva. As vezes sinto que preciso já vir com o nome do filme na cabeça para poder assistir.”
— Nugget de João, 20.

O jeito que eles apresentam as séries e também filtrar melhor pelos gostos da pessoa. Por exemplo, toda vez que abrir a Amazon Prime não mostrar as mesmas coisas que mostra para todo mundo.”
— Nugget de Maria, 21.

Me baseio muito na opinião dos meus amigos. Usaria a aba de amigos, acho genial, usaria 100%, e é muito bom porque não necessariamente você vai ver o que seu amigo está vendo, mas fica na cabeça e influencia. Vai que você vê uma propaganda dessa série dias depois, já é mais uma coisinha pra ficar na sua mente.”
— Nugget de Victor, 20.

Acho o produto bom, acho que uma coisa que tem que ser e não pode fugir disso é a praticidade. Geralmente você não quer passar muito tempo escolhendo alguma coisa, vendo as opções.”
— Nugget de Victor, 21.

O IMDB tem relevância para mim, as vezes além dele eu vejo alguns sites de crítica a nota pra ter uma ideia do que esperar, não vejo a sinopse e trailer mas vejo a nota para escolher.”
— Nugget de Felipe, 21.

“Deveria personalizar os filmes que eu assisti bem como os meus gostos.”
— Nugget de Yasmin, 46.

Início dos nuggets dos testes de usabilidade, determinando a jornada, experiência, e o tipo de nugget adaptado com base no template do Notion disponibilizado pelo QuintoAndar.

Foi possível perceber diversos pontos a partir dos testes de usabilidade, como por exemplo, a comparação natural com a Netflix sempre considerando-a como referência em streaming e a descoberta por parte dos usuários de funcionalidades na interface do Prime Video durante a entrevista. É importante relembrar que cada usuário é único, cada um tem sua personalidade e suas necessidades podem variar bastante, por isto a importância dessas entrevistas, sem elas o resultado final definitivamente não seria o mesmo.

Determinei os perfis de usuários baseado na faixa etária, e as jornadas de acordo com as funcionalidades e pontos importantes que foram avaliados durante as entrevistas.

Personas

Para a criação de personas também me inspirei nos resultados dos testes de usabilidade, mais importante do que dados demográficos são as diferentes personalidades, necessidades, desejos e frustrações, ainda mais quando se leva em conta um público vasto e variado.

Sendo assim, diferenciei as personas em cinco personalidades:

  • “A indecisa”
  • “A influenciada”
  • “Fim de expediente”
  • “O decidido”, e
  • “O maratonista”.


Mapas de Empatia

Com os mapas de empatia não foi muito diferente. De acordo com as personas, apliquei seus critérios e personalidades aos mapas, pois nos possibilitam ir ainda mais a fundo na perspectiva dos usuários, nos colocando no lugar da persona para compreender ainda mais o que ela escuta, pensa e sente, vê, fala e faz.

Análise Heurística

Selecionei os concorrentes principais diretos e fiz duas análises heurísticas, a com base em Jakob Nielsen e outra com base em Abby Covert. A análise heurística nos leva a avaliar pontos cruciais tanto no nosso produto quanto no dos concorrentes e, através dela, apontamos os pontos positivos, negativos e a serem melhorados.

A análise heurística de Jakob Nielsen ↗ é a mais conhecida e usada, centra mais na questão da usabilidade, deixando um pouco de lado a estética. Já a análise heurística de Abby Covert ↗ é mais completa, consegue equilibrar estética e funcionalidade, considero-a também mais objetiva e de fácil entendimento, principalmente quando se está trabalhando em times.

Abaixo você encontra o início de ambas as análises que fiz. Através delas obtive uma compreensão ainda maior sobre a qualidade do produto, as necessidades e os pontos de fricção a serem melhorados.

Análise Heurística com base em Jakob Nielsen

Análise Heurística com base em Abby Covert

Planejar

Depois de muito analisar, chegou a hora de pensar nas soluções, nas possíveis mudanças e melhorias, sempre visando as necessidades dos usuários. Mas não se engane, identificar novos detalhes acontece em todo o processo.

Muitas das minhas hipóteses que trouxe no início foram validadas, umas nem tanto, e consegui ter visões que não tive no começo do projeto. Ampliar perspectivas é muito importante no processo de design e para isso é preciso humildade e reconhecer os erros, acertos e o momento de cada coisa.


Card Sorting & Sitemap

Então foi momento de arquitetar as mudanças no produto. Nada melhor do que fazer isto através do Card Sorting e muitos, muitos post-its. O Card Sorting ajuda a estruturar o produto antes de se iniciar o sitemap, e os post-its, nos permitem flexibilidade para mudar de lugar o que for necessário e fazer diversas alterações.

Card sorting com post-its na parede.

Já o sitemap funciona como um mapa do site, estrutura a navegação, os fluxos, onde cada conteúdo ficará posicionado e qual deve ser reproduzido a partir das ações do usuário. É a partir dele que podemos ir para os sketches no papel e wireframes reais, tudo com base nas pesquisas realizadas.

Sitemap finalizado.

Criar

Depois de implementada toda a estrutura, chegou o momento tão esperado: a criação. Uma vez elaborado os sketches no papel, comecei a criação dos wireframes no Figma.

Protótipo de algumas telas em baixa fidelidade no papel.

Os wireframes são extremamente importantes, eles nos ajudam a focar no que deve vir antes, como na estrutura, na informação e na disposição dos elementos. Além disso, nos influenciam a validar os itens antes de desenvolver a parte visual e maiores detalhes.

Wireframe de média fidelidade de algumas telas.

O objetivo era tornar a experiência do usuário o mais intuitiva e prazerosa possível, eliminando os pontos de fricção do produto atual, percebidos durante toda a etapa de identificação. A solução foi desenvolvida pensada nas versões para desktop e smart TV, uma vez que estes são os dois dispositivos mais acessados pelos usuários para uso do produto. Sendo assim, resolvi focar nos seguintes pontos:

  • Transmitir uma experiência fácil, imersiva e prazerosa;
  • Simplificar, eliminando funcionalidades pouco utilizadas e transformando funcionalidades que poderiam ser melhoradas;
  • Diferenciar, destacando este produto dos concorrentes e não ser apenas mais do mesmo;
  • Influenciar, levando mais pessoas a se conectarem com este produto, aumentando a taxa de retenção, a média de uso, o tornando favorito e mais desejado.

Foi pensando nestes pontos que elaborei novas funcionalidades, como a possibilidade de criar diferentes perfis, bem como playlists, conectar com amigos, acompanhar o que estão assistindo no momento e seguir playlists diversas de outros usuários e da própria plataforma.

A ideia não é tornar o produto mais uma rede social, mas sim ajudar no processo de decisão de qual conteúdo assistir. Toda essa nova conectividade é optativa, tornando a plataforma personalizável, uma vez que você pode facilmente desabilitar essas funcionalidades.


Design Visual

Ao analisar todo o conteúdo visual fui notando possíveis melhorias a serem feitas no contraste, nas cores, na hierarquia e em outros princípios do design. Antes de começar a elaborar o novo visual fui em busca de referências. Gosto de ir além do óbvio, de imaginar o produto dentro de um ambiente, por isso costumo utilizar de referências fotográficas e arquitetônicas nos meus projetos.

Photo by Kam Idris on Unsplash

Para as cores, estava em busca de uma cor que trouxesse maior contraste para a plataforma escura, o azul não trazia a atenção que a imersão pede. Comecei a buscar pelas cores alternativas do cinema, já que a vermelha pertence a principal marca concorrente. Foi então que pesquisando, me deparei com o amarelo presente, direta ou indiretamente, nas fotografias de cinema, afinal, amarelo é luz e atenção, não é mesmo?

O amarelo também está presente na questão urbana e iluminada, nos movimentos dos carros, na transmissão de luz de uma televisão ou um telão. E por último, mas não menos importe: a cor da Amazon é o amarelo. Um amarelo forte, que transmite energia, traz atenção e possui um ótimo contraste junto a cores escuras. Ora, não é por que é um produto diferente que precisa ter uma cor diferente, na verdade é até bom pela associação.

Logo Prime Video com a cor amarelo original da Amazon.

Quanto a tipografia, fui em busca de algo um pouco menos arredondado, mas mantendo a estética da tipografia da própria Amazon.

Optei pela Lato, que tem uma família grande de fontes, garante boa legibilidade para telas e remete a “Amazon Ember” levando assim a uma alteração não drástica.

A criação de ícones novos não se fez necessária a princípio. Os componentes da interface como botões e estados, ícones e campos, foram pensados para ser acessíveis, reaproveitados e escaláveis.


Resultado

Certo, finalmente, o protótipo final em alta fidelidade. Para testá-lo basta acessar o link abaixo:

bit.ly/primevideoporjade

Conclusão

De fato, transmitir a imersão garantindo a melhor experiência possível para o usuário através de um produto não é uma tarefa fácil, e muito menos tarefa para uma pessoa só. É necessário pesquisas mais aprofundadas, dados, feedbacks, custos de viabilidade, testes e mais testes. Lembrando que esta é uma tarefa contínua, você deve sempre acompanhar o andamento do seu produto e ir implementando melhorias.

A aplicação de metodologias é super importante, assim como ter noções de áreas externas ao design também. Entender de negócios, psicologia, dos diversos ramos dentro do design visando sempre maior acessibilidade para todas as pessoas. O design está em todo lugar, expandir os olhares é engrandecedor.

Design não é sobre si, é sobre o outro. E para termos o melhor resultado precisamos entender o máximo possível sobre esta outra pessoa, ter empatia em todo o processo, e por mais piegas que isso soe, é uma grande verdade.


Um obrigada especial a Lucas Neumann que me mentorou em todo o processo, me ensinando novas práticas, trazendo novas referências, mostrando detalhes que eu não fui capaz de enxergar sozinha, e relembrando que, independentemente de se estar certo ou não, o importante é estar aberto para reconhecer.


Esse texto foi originalmente publicado no medium da Jade e pode ser encontrado aqui.

Jade Rocha

Escrito por

Jade Rocha

foi aluna do curso de UX Design da Awari em março de 2020.