Papel de fundo mostrando o logo do Dota 2.
Papel de fundo mostrando o logo do Dota 2.

Dota 2 Arcade

UI / UX

Ano
Abril / 2021 — Atualmente
Função
UI / UX Artist
Companhia
Spirit Bear
Ferramentas
Illustrator, Photoshop, Figma

Nos últimos 5 anos, tenho atuado como UI/UX designer e artist para mods de grande escala dentro do ecossistema do Dota 2, com nossos jogos personalizados ultrapassando a marca de 6 milhões de downloads combinados.

Trabalho em colaboração com uma equipe global de desenvolvedores e atuei em mais de 10 projetos, cada um com sua complexidade própria, onde problemas como economia, HUDs de combate, navegação de inventário, banners sazonais, painel de ranking e liderança, iconografia, desenho de logo e ilustração são comuns de serem minha responsabilidade.

2.467.541 downloads.
2.467.541 downloads.
1.852.739 downloads.
1.852.739 downloads.
2.181.823 downloads.
2.181.823 downloads.
116.864 downloads (logo desenvolvido por mim).
116.864 downloads (logo desenvolvido por mim).

Revolt é um modo de jogo personalizado centrado em gerenciamento de inventário de alta complexidade. O loop principal exige que os jogadores gerenciem um inventário de 8 slots de runas elementais, sendo que as runas podem ser combinadas até 3 vezes, criando um número exponencial de variações de ataque.

↗ Link para a página na Steam Community

Interface de usuário desenvolvida pelo time de desenvolvimento. Interface de usuário desenvolvida pelo time de desenvolvimento.
Interface de usuário desenvolvida pelo time de desenvolvimento.

Os desafios do MOD foram centrados em:

  • Reduzir a carga cognitiva na identificação dos elementos durante combates em ritmo acelerado;
  • Suavizar a curva de aprendizado para a mecânica de combinação de runas;
  • Projetar a identidade visual completa, incluindo criação de logo e assets de UI prontos para produção, otimizados para o motor Source 2;
  • Estabelecer loops de feedback para o jogador por meio de pesquisa com usuários, a fim de validar os fluxos de onboarding e a clareza do HUD.

↗ Leia a documentação completa no Notion

Início da exploração da jornada de usuário.
Início da exploração da jornada de usuário.

Para otimizar o ciclo principal de jogabilidade, reestruturei o componente principal de retrato do jogador em um hub centralizado para gerenciamento rápido. Ao realocar as ações principais para o quadrante inferior, os jogadores podem equipar, desequipar e utilizar recursos de qualidade de vida (QoL) com facilidade, como o Auto-Upgrade em um clique, simplificando significativamente o gerenciamento durante o combate.

Desenvolvimento da interface de stats e habilidades. Desenvolvimento da interface de stats e habilidades. Desenvolvimento da interface de stats e habilidades.
Desenvolvimento da interface de stats e habilidades.
Desenvolvimento da interface de stats e habilidades.

Eu sempre tento buscar referências narrativas para criar uma interface que tenha um sentido mais profundo na narrativa do jogo. A principal inspiração para a interface foi a circularidade do próprio herói, já que o IO é uma esfera, e também utilizei elementos da skin de crossover entre Dota 2 e Portal.

Para resolver o problema de escalabilidade de runas, devido às infinitas combinações possíveis, usei como referência o formato da Magatama, o que permitiu que os elementos se mesclassem sem a exigência de um ícone diferente para cada nova runa.

Skin crossover Dota 2 e Portal para o herói IO, e conjunto de magatamas: símbolo referencial para a combinação de elementos nas runas. Skin crossover Dota 2 e Portal para o herói IO, e conjunto de magatamas: símbolo referencial para a combinação de elementos nas runas.
Skin crossover Dota 2 e Portal para o herói IO, e conjunto de magatamas: símbolo referencial para a combinação de elementos nas runas.

Todas as interfaces passam por etapas de sketch, protótipo animado de baixa fidelidade para testar fluxo, e protótipo de alta fidelidade para validação do visual e das interações finais.

Tela introdutória de tutorial e recebimento da primeira runa. Tela introdutória de tutorial e recebimento da primeira runa.
Tela introdutória de tutorial e recebimento da primeira runa.
Painéis de gerenciamento de runas. Painéis de gerenciamento de runas.
Painéis de gerenciamento de runas.
HUD geral e inventário de runas. HUD geral e inventário de runas.
HUD geral e inventário de runas.

Todos os assets foram organizados no Figma para acesso e controle do time de desenvolvimento.

Ícones gerais utilizados ao longo da experiência. Ícones gerais utilizados ao longo da experiência.
Ícones gerais utilizados ao longo da experiência.

O logo foi desenvolvido a partir da mescla do conceito narrativo do jogo, tendo o IO como letra O e as runas elementais ao redor para representar superficialmente a dinâmica de gameplay e o mod geral.

Logo Revolt.
Logo Revolt.

Screenshots de algumas das interfaces ativas nos novos mods.

Tela de escolha de herói e painel de temporada. Tela de escolha de herói e painel de temporada.
Tela de escolha de herói e painel de temporada.
Painel para escolha de perks no início do jogo e ilustrações para report de player. Painel para escolha de perks no início do jogo e ilustrações para report de player.
Painel para escolha de perks no início do jogo e ilustrações para report de player.
Painel de criação de build e painel para customização de mensagens sonoras. Painel de criação de build e painel para customização de mensagens sonoras.
Painel de criação de build e painel para customização de mensagens sonoras.
Painel de tasks e leaderboard. Painel de tasks e leaderboard.
Painel de tasks e leaderboard.
Voltar para a página principal