Eternal Crusade: Resurrection - Mobile HUD Breakdown
Figma
Role: UX/UI Designer
Stakeholders: Lead Programmer, Lead Designer
Involvement: Redesigning the HUD for Mobile Devices
These are the concept screens for a fan project to bring back Behaviour Entertainment’s Warhammer 40,000: Eternal Crusade. Art used created by the Warhammer Community all rights belong to their respective owners.
![Mobile_Thumbnail.png](https://static.wixstatic.com/media/727a23_e9244e383ceb4a368194173c17fece3d~mv2.png/v1/crop/x_1052,y_0,w_5577,h_4320/fill/w_355,h_275,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Mobile_Thumbnail.png)
The Pipeline
Grouping
The following is how the buttons are grouped based off of association. Vital information displayed at the top to increase visibility. On the lower left is navigation: movement and access to the map. On the right side are the combat controls: firing, melee attacks, dodging, items, and weapon management.
![Grouping.png](https://static.wixstatic.com/media/727a23_faa629dc3170430f9bcfbf78cf8422ca~mv2.png/v1/fill/w_622,h_287,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Grouping.png)
![Heatmap.png](https://static.wixstatic.com/media/727a23_d561fda324384f43a53da53ef7eb0ac3~mv2.png/v1/fill/w_600,h_277,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Heatmap.png)
Heatmap
The following heatmap shows the finger placement during gameplay and how often each area is interacted with.
The Result
![ECR-Mobile.png](https://static.wixstatic.com/media/727a23_040906bcabf24cdb8b16a18633411808~mv2.png/v1/fill/w_951,h_439,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/ECR-Mobile.png)