← Todos los proyectos

UI diegética

  • Accesibilidad
  • Wireframe 3D

Shooting Range: un espacio de entrenamiento dentro del juego para puntería, retroceso y daño.

01

Resumen

El Shooting Range: un espacio de entrenamiento de puntería y daño, con distancias y objetivos ajustables, reinicio rápido y unos visuales pensados para la accesibilidad que mantienen los patrones de retroceso fáciles de distinguir.

Reto

Los jugadores probaban armas y retroceso dentro de las partidas o en modos inestables, algo poco eficiente y frustrante.

Solución

Un campo de prácticas donde los jugadores entrenan la puntería, el control del retroceso y el conocimiento del daño.

Impacto

El uso subió un 20%. Alcanza picos cuando salen armas o accesorios nuevos y cuando los jugadores preparan su equipamiento. Los profesionales lo usan antes de las partidas, y se añadió a la cola de emparejamiento.

Herramientas

Figma, motor 3D, análisis de accesibilidad, blueprints, wireframes 3D y priorización de funcionalidades.

02

En detalle

Los métodos y herramientas que elegí para este proyecto. Cambian en cada proyecto, según lo que necesite el problema.

Proceso

  1. Benchmark de competidores: Valorant, Overwatch, Call of Duty y Apex.
  2. Problem statement definido a partir de los puntos de dolor de nuestros jugadores.
  3. Estudio de accesibilidad para que los patrones de retroceso se distingan entre sí.

Funcionalidades

Carril de puntería

  • Diferenciar patrones de retroceso.
  • Practicar la precisión del disparo.
  • Elegir la distancia del objetivo.
  • Elegir diana o silueta.
  • Opción de reinicio.

Carril de daño

  • Entender el daño causado.
  • Practicar la precisión en disparos al cuerpo.
  • Elegir la distancia del objetivo.
  • Elegir la postura del maniquí.
  • Opción de reinicio.

Diseño de niveles vs. interacción

Blueprint de distancias

  • Distancias para cada arma, de la escopeta a corta distancia al francotirador.
  • El tamaño de los paneles equilibraba las proporciones con lo fácil que era dispararles.
Wireframe de la distribución del campo de tiro con la pared y los paneles de diana

Proporciones

Proporciones del campo de tiro, de la pared al panel diegético
El primer panel diegético del juego. Ajustar las proporciones de la pared al panel fue clave para reflejar los patrones de retroceso, dentro de las limitaciones técnicas.

Estudio de accesibilidad

Elegimos esta paleta porque mantenía más contraste que las alternativas en los distintos tipos de daltonismo.

Wireframe de la diana con la paleta de color bajo distintos tipos de daltonismo

Evolución de los carriles

Evolución del panel con silueta en el carril de tiro
Evolución del panel con diana en el carril de tiro
Evolución del panel con maniquí en el carril de daño
03

Aprendizajes

Lo más importante que me llevo del proyecto.

Versión final del panel del campo de tiro

Lo que mostraron los tests y el lanzamiento:

  • Un desajuste entre la pared de tiro y la pantalla espejo.
  • Las armas y sus patrones de retroceso eran difíciles de recordar juntos, lo que mostró la necesidad de un historial de disparos.
  • Cambiar de equipamiento era tedioso, lo que generó la necesidad de un atajo a los accesorios.
  • Las zonas de interacción eran demasiado pequeñas, así que las ampliamos.
  • Había una oportunidad de ofrecerlo durante el emparejamiento, como calentamiento.