O processo de Redesign de um App – UX & UI Design

Vou contar aqui como foi o processo de criação da nova experiência mobile do jogo do Cartola FC. A intenção é contar, do começo ao fim, como cheguei ao resultado final, como é o processo de redesign de um app.

Cada passo no novo design é importante, como fase de descobertas (discovery phase), pesquisa de usuário (user research), estrutura de informação, análise de dados, concorrentes e análogos, personas, userflow, wireframes, protótipos.

Caso queira saber mais a fundo sobre UX, processos, se vale a pena migrar e se está realmente em alta, leia nossa artigo sobre o que é UX Design ⟶

O Aplicativo

Cartola FC é um fantasy game baseado em estatísticas oficiais dos jogadores do campeonato brasileiro de futebol criado pela Globo.com. O jogo possui mais de 2 milhões usuários e, no meio de 2015, a Globo.com decidiu que era hora de repensar a maneira em que os usuários interagiam com o jogo visando uma experiência mais fácil e divertida.

O Projeto

O Brasil é um país que respira futebol, e para ter uma noção precisa de como as pessoas realmente se relacionavam com futebol — e mais especificamente com Cartola — ao longo da temporada, fizemos entrevistas para coletar informações antecipadas sobre a nova experiência que iríamos projetar.

Estruturando a informação

User Research

Conhecer os usuários se torna essencial quando você está projetando uma experência em grande escala. Por isso como parte inicial do projeto, mergulhamos em um processo extenso de entrevistas para identificar as principais necessidades e pontos de dores que os usuários tinham.

Este processo de UX foi fundamental para coletar informações valiosas e insights importantes sobre o nosso público.

Leia também: O que é UX Design (Experiência do Usuário)

Feito as entrevistas e já com boas ideias e feedbacks documentados, lideramos uma atividade de um dia inteiro com a equipe da globo.com para obter mais detalhes, compartilhar o que tínhamos e alinhar nossas expectativas.

Análise & Roadmap

Trabalhamos juntos em atividades em grupo por 8 horas rascunhando soluções que iriam nos ajudar a tangibilizar melhor nosso trabalho mais tarde. Nesta fase começamos também a priorizar ideias para o nosso roadmap de funcionalidades principais que o novo Cartola deveria ter.

Este processo de colaboração mútua e feedback foi parte fundamental do processo, pois éramos duas equipes trabalhando remotamente ao mesmo tempo no mesmo produto.

Com as duas equipes alinhadas e objetivos estabelecidos claramente, finalmente era hora de começar a trabalhar na nova experiência do aplicativo.

Desenhando a nova experiência do Cartola FC

UI: Sketchs, Userflow, Wireframes

Nessa fase, iniciamos os primeiros esboços de experiência onde começamos a priorizar features e definir uma hierarquia de informações a serem exibidas de maneira inteligente.

Trabalhar dessa maneira é útil porque podemos manter a consistência quando avançamos para a fase de design visual.

Dividir a navegação em dois níveis de funcionalidades foi necessário para destacar as funcionalidades mais importantes para o usuário e manter uma ordem lógica simples e inteligente seguindo os novos recursos apresentados pelo time da globo.com.

Por mais que muitos dos elementos visuais de Cartola já estivessem bem estabelecidos pela equipe de design da Globo.com antes do início de nosso projeto, eles foram super abertos para as evoluções e criações de novos componentes que foram ocorrendo durante o projeto devido a necessidade do meu time.

Queríamos que a nova experiência do Cartola FC realmente refletisse as cores vivas e personalidade única do jogo, então novos tons de cores foram adicionados na paleta atual para suportar essa nova experiência mobile, assim como novos tons de cinza para garantir o contraste e legibilidade ideal entre texto e planos de fundo.

Tornando o consumo de informações mais amigável

Protótipos, Style Guide

Um dos nossos maiores desafios neste projeto foi desenhar uma maneira simples e amigável de mostrar as informações de cada jogador utilizando cards.

Veja também: 15 Style Guides de marcas famosas para ter como referências

Este elemento da interface conta com informações valiosas que acabam se tornando direcionadoras de decisão para os usuários, isso significa que precisam ser analisados e entendidos de maneira rápida e direta.

Antes de chegarmos na versão final, testamos algumas versões explorando diferentes posições e hierarquia das informações mostradas neste card e reunindo feedback de pessoas sobre a maneira que elas estavam entendendo as informações exibidas nele.

Ajudando os usuários com escolhas mais fáceis

Uma das ações principais do Cartola é escolher e comprar jogadores. Anteriormente essa ação era feita por meio de uma seção presente no marketplace mostrando todos os jogadores de todos os times, ordenados por critérios configuráveis pelo usuário.

Nos baseando pelas pesquisas, nós achamos que era mais fácil para o usuário exibir inicialmente os estados vazios das posições abertas, onde com apenas um toque, eles teriam acesso a lista de todos os jogadores que se encaixam nesta posição escolhida. Dessa maneira eliminaríamos a necessidade de um filtro em uma lista de centenas de jogadores para apenas 20 opções possíveis para a escolha do seu goleiro, por exemplo.

Criando um novo conceito de Ligas

Desde as primeiras pesquisas com os usuários, percebemos que os comentários e escolhas, feitas dentro Cartola, se extendiam entre grupos de amigos fora do jogo.

Existem blogs, sites e até mesmo outros apps onde a comunidade comenta e dá dicas sobre escolha de jogadores e técnicas para jogar.

Considerando este movimento, criamos um novo modelo de jogo dentro do Cartola: as ligas. Os usuários pagantes poderiam criar ligas de curta ou longa duração para desafiar seus amigos.

As ligas funcionam como uma competição ‘side-game’ durante toda a temporada, onde o usuário compete com seus próprios amigos com base no resultado e pontuação de cada jogador escalado ao final de cada partida da temporada.

Em apenas 3 passos simples, o usuário é capaz de criar a sua liga, definir as regras, convidar seus amigos e começar a competir.

Para as ligas patrocinadas, achamos uma boa oportunidade para se conectarem com marcas patrocinadoras dos times (como Nike e Adidas) e premiarem os vencedores com prêmios exclusivos.

Comparar os seus resultados com o de seus amigos em tempo real com a possibilidade de compartilhar diretamente em seu feed em redes sociais — foi um método que desenhamos para manter o jogo funcionando mesmo fora do aplicativo.

Resultados e números

O novo Cartola foi lançado em junho de 2016 e, logo nas primeiras 2 semanas após o lançamento, o número de usuários pagantes ultrapassou 20 mil, mais do que o dobro do esperado para todo o período de pré-temporada (que costuma durar 2-3 meses).

O ano de lançamento também marcou o recorde histórico de times reunidos no primeiro turno da Liga Brasileira: 2,7 milhões de times participando, mais de 54% acima do recorde anterior, um ano antes.

O recorde atual de número de times participando está hoje acima de 3,5 milhões, e foi alcançado na segunda metade da última temporada.

—

Time Fjord:

 Thiago Cassola – Senior Interaction Designer
; Jader Rubini – Visual Designer
; Rodolpho Henrique – Visual Designer; 
Bruno Perez – Senior Interaction Designer
; Danilo Marcondes – Interaction Designer
; Christina Cassens – Program Manager
; Emiliano Chinchelli – Design Director.

Rodolpho Henrique – Senior Digital Designer na McKinsey & Company
Twitter: rodhzz
Portfolio: http://www.rodolphohenrique.com