RENATO RULLI
CASE STUDY: f1tv
Processo de Redesign - 2022
Processo de Redesign - 2022
Escopo do Projeto
Apenas processo de UI
Protótipo de alta fidelidade para Mobile
Front-end ou qualquer tipo de programação não foi incluída
Apenas processo de UI
Protótipo de alta fidelidade para Mobile
Front-end ou qualquer tipo de programação não foi incluída
Agenda
Introdução da Marca e do App
Pesquisa inicial
Teste de Usabilidade
Sobre o Redesign
Redesign
Conclusão
Introdução da Marca e do App
Pesquisa inicial
Teste de Usabilidade
Sobre o Redesign
Redesign
Conclusão
Introdução de Marca e o App
Introdução da Marca e do App
Sobre a F1TV
O aplicativo F1TV é a plataforma de streaming da Formula 1. Lançado em 2018, é uma adição relativamente nova ao mercado. Sua principal função é transmitir ao vivo as emocionantes corridas e sessões dos Grande Prêmios de Fórmula 1 ao longo do ano, oferecendo recursos exclusivos como câmeras embarcadas nos carros, opções de comentários em vários idiomas, estatísticas exclusivas e atualizações em tempo real.
O aplicativo F1TV é a plataforma de streaming da Formula 1. Lançado em 2018, é uma adição relativamente nova ao mercado. Sua principal função é transmitir ao vivo as emocionantes corridas e sessões dos Grande Prêmios de Fórmula 1 ao longo do ano, oferecendo recursos exclusivos como câmeras embarcadas nos carros, opções de comentários em vários idiomas, estatísticas exclusivas e atualizações em tempo real.
Slogan: We race as One
Slogan: We race as One
Sobre o App
Primeira Prioridade
O reprodutor de streaming impressiona pela sua sofisticação e variedade de funcionalidades. É possível argumentar que a Fórmula 1 executa essa prioridade com excelência, proporcionando um produto único no mercado. O usuário pode ver cameras dentro dos carros, estatísticas e coberturas exclusivas.
O reprodutor de streaming impressiona pela sua sofisticação e variedade de funcionalidades. É possível argumentar que a Fórmula 1 executa essa prioridade com excelência, proporcionando um produto único no mercado. O usuário pode ver cameras dentro dos carros, estatísticas e coberturas exclusivas.
Segunda Prioridade
O aplicativo oferece um vasto e completo catálogo de corridas históricas, remontando até 1970, e ainda disponibiliza programas exclusivos, incluindo documentários e entrevistas, alguns deles produzidos semanalmente. No entanto, a segunda prioridade do aplicativo levanta questões sobre o seu design geral, que não alcança o padrão esperado de um aplicativo líder de mercado.
O aplicativo oferece um vasto e completo catálogo de corridas históricas, remontando até 1970, e ainda disponibiliza programas exclusivos, incluindo documentários e entrevistas, alguns deles produzidos semanalmente. No entanto, a segunda prioridade do aplicativo levanta questões sobre o seu design geral, que não alcança o padrão esperado de um aplicativo líder de mercado.
Objetivo do Projeto: Reformular o aplicativo, focalizando na resolução dos problemas relacionados ao catálogo e conferindo-lhe a estética adequada que, como entusiasta da Fórmula 1, acredito que mereça.
pESQUISA INICIAL
pESQUISA INICIAL
Para compreender quais eram os problemas com o aplicativo, primeiro foi necessário realizar uma Pesquisa inicial, focando principalmente nas avaliações dos usuários em plataformas como a Google Play Store e a Apple Store. Como era de se esperar, houve uma quantidade absurda de avaliações inúteis (reclamações técnicas ou comentários aleatórios), mas um tópico em comum se destacou:
Para compreender quais eram os problemas com o aplicativo, primeiro foi necessário realizar uma Pesquisa inicial, focando principalmente nas avaliações dos usuários em plataformas como a Google Play Store e a Apple Store. Como era de se esperar, houve uma quantidade absurda de avaliações inúteis (reclamações técnicas ou comentários aleatórios), mas um tópico em comum se destacou:
"MUITO CONTEÚDO BOM, MAS O MENU É CONFUSO E ENGANOSO"
"MUITO CONTEÚDO BOM, MAS O MENU É CONFUSO E ENGANOSO"
Logo, o próximo passo seria confirmar esses insights com usuários reais.
Logo, o próximo passo seria confirmar esses insights com usuários reais.
Algumas outros insights das avaliações dos usuários incluíram:
Algumas outros insights das avaliações dos usuários incluíram:
Adicionar o recurso "Continuar assistindo"
Adicionar o recurso "Continuar assistindo"
Botão de download para pessoas com conexões ruins ou que desejam assistir offline
Botão de download para pessoas com conexões ruins ou que desejam assistir offline
TESTE DE USABILIDADE
TESTE DE USABILIDADE
Teste de Usabilidade
Conduzi um teste de Usabilidade Assíncrono com 5 usuários ao redor do mundo que utilizam o aplicativo regularmente. A tarefa que criei foi encontrar um programa específico em seu catálogo que teoricamente teria que ser fácil de se achar: "Os 10 momentos brilhantes de Martin Brundle".
É possível dizer que os usuários absolutamente detestaram a tarefa, relatando grande dificuldade para realizá-la ou até falhando, com categorias confusas e uma navegação difícil por todo o aplicativo (incluindo a falta de um mecanismo de pesquisa.
Conduzi um teste de Usabilidade Assíncrono com 5 usuários ao redor do mundo que utilizam o aplicativo regularmente. A tarefa que criei foi encontrar um programa específico em seu catálogo que teoricamente teria que ser fácil de se achar: "Os 10 momentos brilhantes de Martin Brundle".
É possível dizer que os usuários absolutamente detestaram a tarefa, relatando grande dificuldade para realizá-la ou até falhando, com categorias confusas e uma navegação difícil por todo o aplicativo (incluindo a falta de um mecanismo de pesquisa.
Alguns comentários dos usuários foram:
Alguns comentários dos usuários foram:
"Uma maldita barra de pesquisa..."
"Uma maldita barra de pesquisa..."
"Sinto que estou navegando na mesma página repetidamente, mas estou em uma categoria diferente"
"Sinto que estou navegando na mesma página repetidamente, mas estou em uma categoria diferente"
"Tanto conteúdo bom, mas sem estrutura ou operação para isso"
"Tanto conteúdo bom, mas sem estrutura ou operação para isso"
Interface do Aplicativo Atualmente
Interface do Aplicativo Atualmente
Home Page
Home Page
Title Page
Title Page
Weekend Schedule
Weekend Schedule
Cards
Cards
Sobre o Redesign
Sobre o Redesign
Metas do Redesign
Criação de um sistema de busca
Criação de uma barra de navegação na parte inferior, com o intuito de facilitar a navegação geral por todo o aplicativo.
Repensar a estética e organização geral do aplicativo.
Adicionar um recurso de "Meus Favoritos" e a opção de download, como um recurso adicional.
Criação de um sistema de busca
Criação de uma barra de navegação na parte inferior, com o intuito de facilitar a navegação geral por todo o aplicativo.
Repensar a estética e organização geral do aplicativo.
Adicionar um recurso de "Meus Favoritos" e a opção de download, como um recurso adicional.
Novo Moodboard
Novo User Flow Chart
É relevante destacar a maior eficiência e rapidez que o novo caminho proporciona ao usuário para navegar, em comparação com a abordagem mais exploratória que envolve o uso dos arquivos e a navegação na página inicial.
É relevante destacar a maior eficiência e rapidez que o novo caminho proporciona ao usuário para navegar, em comparação com a abordagem mais exploratória que envolve o uso dos arquivos e a navegação na página inicial.
Redesign
Redesign
Protótipo
É com prazer que apresento o meu Redesign do aplicativo F1TV
É com prazer que apresento o meu Redesign do aplicativo F1TV
Flow de Pesquisa
Adicionei um ícone de busca que equilibra o Header com o menu lateral à esquerda, criando uma apresentação mais simétrica no cabeçalho.
Ao clicar no ícone de busca, o usuário é direcionado para a página de pesquisa, onde são sugeridos programas relacionados ao gosto e histórico do usuário.
Ao tocar na barra de pesquisa, o usuário pode digitar o programa que está procurando (com uma opção de filtro adicional no canto direito da barra de pesquisa).
Adicionei um ícone de busca que equilibra o Header com o menu lateral à esquerda, criando uma apresentação mais simétrica no cabeçalho.
Ao clicar no ícone de busca, o usuário é direcionado para a página de pesquisa, onde são sugeridos programas relacionados ao gosto e histórico do usuário.
Ao tocar na barra de pesquisa, o usuário pode digitar o programa que está procurando (com uma opção de filtro adicional no canto direito da barra de pesquisa).
Barra de Navegação
Como o cabeçalho já incluía a pesquisa e até mesmo o menu lateral (com perfil e outras informações), não havia outra necessidade significativa além dos 3 ícones em termos de navegação.
Como o cabeçalho já incluía a pesquisa e até mesmo o menu lateral (com perfil e outras informações), não havia outra necessidade significativa além dos 3 ícones em termos de navegação.
Para ajudar os usuários a se localizarem dentro do aplicativo, adicionei uma linha branca que acompanha o ícone quando selecionado, além do efeito de preencher os ícones com a cor branca ao serem tocados.
Para ajudar os usuários a se localizarem dentro do aplicativo, adicionei uma linha branca que acompanha o ícone quando selecionado, além do efeito de preencher os ícones com a cor branca ao serem tocados.
Estética e Organização
O foco era ter fotografias maiores e mais impressionantes, inspiradas nos longos pôsteres da HBO Max que se integram à cor de fundo da Interface do Usuário. É possível observar esse efeito especialmente na Página Inicial e na Title Page, dando prioridade à beleza dinâmica e grandiosa da Fórmula 1.
O foco era ter fotografias maiores e mais impressionantes, inspiradas nos longos pôsteres da HBO Max que se integram à cor de fundo da Interface do Usuário. É possível observar esse efeito especialmente na Página Inicial e na Title Page, dando prioridade à beleza dinâmica e grandiosa da Fórmula 1.
Nota 1
A consistência era um fator chave no redesign, tanto que a Title Page quanto a Página Inicial compartilham o visual do pôster. Mas também na Title Page, a "Pasta" que compreende outros vídeos do evento (a pasta preta subdividindo entre F1, F2 e Shows), é a mesma na página de Arquivos, mas agora subdividida entre Corridas, Shows e Documentários.
A consistência era um fator chave no redesign, tanto que a Title Page quanto a Página Inicial compartilham o visual do pôster. Mas também na Title Page, a "Pasta" que compreende outros vídeos do evento (a pasta preta subdividindo entre F1, F2 e Shows), é a mesma na página de Arquivos, mas agora subdividida entre Corridas, Shows e Documentários.
Nota 2
É importante notar agora que as categorias para a página de Arquivos estão mais definidas e são facilmente intercambiáveis (encontrando-se na mesma tela), em vez de ter categorias confusas apresentadas no menu lateral como anteriormente. Em relação às categorias, também exemplifiquei na Página Inicial possíveis categorias melhores, como "Continuar Assistindo".
É importante notar agora que as categorias para a página de Arquivos estão mais definidas e são facilmente intercambiáveis (encontrando-se na mesma tela), em vez de ter categorias confusas apresentadas no menu lateral como anteriormente. Em relação às categorias, também exemplifiquei na Página Inicial possíveis categorias melhores, como "Continuar Assistindo".
Os cartões dos programas também foram reorganizados e otimizados de maneira focada na fotografia, com imagens maiores e bandeiras. O título do cartão agora é escrito na parte inferior das imagens. Além disso, adicionei uma sinalização de categoria de corrida nos cartões de Evento (aqueles sem o ícone de reprodução), exibindo F1 (em vermelho) e F2 se o evento incluir corridas da Fórmula 2 (em azul).
Os cartões dos programas também foram reorganizados e otimizados de maneira focada na fotografia, com imagens maiores e bandeiras. O título do cartão agora é escrito na parte inferior das imagens. Além disso, adicionei uma sinalização de categoria de corrida nos cartões de Evento (aqueles sem o ícone de reprodução), exibindo F1 (em vermelho) e F2 se o evento incluir corridas da Fórmula 2 (em azul).
Meus Favoritos e Download
Para salvar em meus favoritos, o usuário só precisa tocar no pequeno ícone de um coração branco vazio em qualquer uma das telas acima, com a opção de baixá-lo logo ao lado.
Quando tocado, o coração se torna cheio e o ícone de download se transforma em um ícone de check.
Para salvar em meus favoritos, o usuário só precisa tocar no pequeno ícone de um coração branco vazio em qualquer uma das telas acima, com a opção de baixá-lo logo ao lado.
Quando tocado, o coração se torna cheio e o ícone de download se transforma em um ícone de check.
Conclusão
Conclusão
Este projeto teve como objetivo exemplificar e apresentar possíveis maneiras melhores de criar um design para um aplicativo tão importante para os apaixonados por Fórmula 1. Não tem como objetivo resolver todos os problemas, mas expressar minha perspectiva sobre o assunto.
Este projeto teve como objetivo exemplificar e apresentar possíveis maneiras melhores de criar um design para um aplicativo tão importante para os apaixonados por Fórmula 1. Não tem como objetivo resolver todos os problemas, mas expressar minha perspectiva sobre o assunto.
Vale ressaltar que no dia em que concluí este estudo de caso, ocorreu uma atualização no aplicativo e eles finalmente introduziram um sistema de busca. O que é uma grande sorte para seus usuários e um pouco de azar para mim, já que grande parte do meu trabalho não terá tanto significado. No entanto, é possível argumentar que minha tese e perspectiva foram confirmadas pela atualização.
Vale ressaltar que no dia em que concluí este estudo de caso, ocorreu uma atualização no aplicativo e eles finalmente introduziram um sistema de busca. O que é uma grande sorte para seus usuários e um pouco de azar para mim, já que grande parte do meu trabalho não terá tanto significado. No entanto, é possível argumentar que minha tese e perspectiva foram confirmadas pela atualização.
RENATO RULLI
RENATO RULLI
Entre em contato através de:
Entre em contato através de:
