Battledump

Prueba de habilidad

Este proyecto fue parte de una prueba de habilidad de diseño de 10 días destinada a asegurar un puesto de diseñador de UI/UX con una compañía de juegos internacional. La prueba requería que los solicitantes entregaran los siguientes assets:

• Un mockup de alta definición para un selector de menú de acceso rápido con nueve opciones que se usa en mitad del juego.
• Un mockup de alta definición para un menú de inventario.

Rediseñé todos los assets del juego, modifiqué todo el copy y modelé elementos 3D, para convertir Battledump en un proyecto completamente original.

Investigación y empatía

Para comprender mejor la experiencia del usuario, profundicé en los foros de jugadores y las reseñas de los juegos de estrategia de acción. Esto ayudó a identificar pain points comunes y quejas de los usuarios sobre interfaces complejas en juegos similares.

Ideas clave

Espacio de pantalla y legibilidad: Los jugadores encuentran las fuentes no convencionales y el texto pequeño difíciles de leer, usar fuentes altamente legibles y de tamaño apropiado es esencial.

Estética moderna: Las comparaciones con juegos más antiguos destacaron la importancia de las tendencias de diseño contemporáneas para evitar una apariencia anticuada.

Diseño específico de la consola: Los elementos como botones de gran tamaño y la falta de pistas para controlar el juego a menudo apuntan a un diseño adaptado a partir de un juego de móvil, algo no deseable para usuarios de consola.
Utilicé un diagrama de afinidad para compilar y analizar estas ideas, guiando el proceso de ideación para mejorar la experiencia del usuario.

Ideación y esbozos

Selector de menú de acceso rápido

En los bocetos iniciales exploré varias opciones, incluida la navegación por botón de gatillo, los menús de cajones y los menús de estilo ruleta. Sin embargo, estos diseños no proporcionaban un acceso rápido sencillo.

Solución final: el menú radial

Seleccioné el menú radial por su eficiencia al permitir un acceso rápido a nueve opciones diferentes. Este menú aparece con una tecla de acceso rápido y utiliza la dirección del joystick para la selección, lo que permite seguir jugando sin pausar.

Menú de inventario: Dada la complejidad del inventario, opté por un diseño de cuadrícula convencional. Los bocetos incluyeron opciones de filtrado para cribar los numerosos estados de elemento.

Flujo de usuario y wireframes

Para refinar el diseño de interacción, creé un detallado flujo de usuario, abordando escenarios como la cancelación de la acción, la alternancia de información modal y los requisitos de confirmación. Este proceso me permitió comprender las necesidades del usuario y las posibles interacciones que podían llevarse a cabo.

Luego diseñé wireframes, presentando estructuras para definir tanto el menú radial como el inventario. El menú radial incluiría un modal de información, mientras que el inventario presentaría un sistema de filtros por casillas de verificación.

Prototipos de alta fidelidad

Elementos visuales

Tomando inspiración de las señalizaciones en las zonas en obras, los elementos visuales enfatizan el motivo de la construcción y el ensamblaje. Son frecuentes las formas hexagonales, que simbolizan el trabajo en equipo y la cooperación.

Iconos: Diseñé los iconos de las unidades y secundarios utilizando formas hexagonales. Estos iconos sirven de indicadores visuales en el menú radial y el minimap.

Modelos 3D: Creé los modelos 3D low-poly para complementar y mostrar los diseños de interfaz en situación. Estos representan las diversas unidades de robot y materiales del juego.

Componentes del HUD: Diseñé las barras de vida hexagonales y un minimap para transmitir el estado y las posiciones de cada unidad. Incluí una barra con pistas para controlar el juego, facilitando así la jugabilidad.

Componentes del inventario: El marco de cada elemento del inventario indica estados del item en cuestión, como por ejemplo: disponible, necesita reparación o se puede construir. Un marco blanco brillante resalta el elemento enfocado.

Mockups de alta fidelidad

Mockup de la escena 3D

Modelé una escena de batalla caótica sobre la que mostrar los elementos de la interfaz. El menú radial permite a los jugadores seleccionar opciones rápidamente sin detener el juego, mientras que el inventario muestra elementos en una cuadrícula, con información detallada y sus estados actuales.

Mockup de menú radial

El diseño final destaca la dirección del joystick con indicadores visuales, reduciendo asi la probabilidad de error al escoger. El personaje del jugador destaca con un trazo blanco, asegurando una visibilidad clara durante la selección.

Mockup de inventario

El mockup del inventario presenta un diseño cuadriculado con interruptores y filtros para una búsqueda de items eficiente. Información detallada del elemento escogido y el estado del equipo se muestran en el lado derecho de la pantalla.

Conclusión

Pese a no conseguir el puesto de trabajo, el proyecto Battledump demostró mi capacidad para diseñar una interfaz de usuario completa para un juego de consola dentro de un plazo de tiempo ajustado. El proyecto alcanzó la ronda final del proceso de contratación y me proporcionó una valiosa experiencia como práctica para abordar distintos matices del diseño de juegos de consola.

¡Da un vistazo al proceso de diseño en el archivo Figma del proyecto!