DIEGETIC UI

DIEGETIC UI

DESCRIPTION

DESCRIPTION

Creation of Shooting Range, a training (aim + damage) with adjustable distance/targets and quick reset, plus accessibility-aware visual design for recoil pattern differentiation

Creation of Shooting Range, a training (aim + damage) with adjustable distance/targets and quick reset, plus accessibility-aware visual design for recoil pattern differentiation

TOOLS

TOOLS

Figma, 3D Engine, Accessibility analysis, blueprints, 3D wireframes, and functionality prioritization

Figma, 3D Engine, Accessibility analysis, blueprints, 3D wireframes, and functionality prioritization

CHALLENGE

CHALLENGE

Players tuning weapons and recoil inside matches or unstable modes, inefficient and frustrating

Players tuning weapons and recoil inside matches or unstable modes, inefficient and frustrating

SOLUTION

SOLUTION

Designed a practice range gameplay feature to help players train aim, recoil control, and damage knowledge

Designed a practice range gameplay feature to help players train aim, recoil control, and damage knowledge

IMPACT

IMPACT

Peak usage when introducing new weapons or attachments or when defining loadouts. Used by pros before matches and introduced in the matchmaking queue. Usage went up 20%

Peak usage when introducing new weapons or attachments or when defining loadouts. Used by pros before matches and introduced in the matchmaking queue. Usage went up 20%

IN DEPTH

IN DEPTH

1

1

Competitor Benchmark on Valorant, Overwatch Call of Duty and Apex

Competitor Benchmark on Valorant, Overwatch Call of Duty and Apex

2

2

Problem statement (In summary) definition based on pain points from our players

Problem statement (In summary) definition based on pain points from our players

3

3

Accessibility study to make recoil patterns differentiate from one another

Accessibility study to make recoil patterns differentiate from one another

FUNCTIONALITIES

FUNCTIONALITIES

AIMING LANE

AIMING LANE

  • Differentiate recoil patterns.

  • Practice shot accuracy.

  • Choose distance of target.

  • Choose bullseye or silhouette.

  • Reset option.

  • Differentiate recoil patterns.

  • Practice shot accuracy.

  • Choose distance of target.

  • Choose bullseye or silhouette.

  • Reset option.

DAMAGE LANE

DAMAGE LANE

  • Understand damage dealt.

  • Practice body shot accuracy.

  • Choose the distance of the target.

  • Choose a dummy stance.

  • Reset option.

  • Understand damage dealt.

  • Practice body shot accuracy.

  • Choose the distance of the target.

  • Choose a dummy stance.

  • Reset option.

LEVEL DESIGN VS INTERACTION

LEVEL DESIGN VS INTERACTION

DISTANCE BLUEPRINT

DISTANCE BLUEPRINT

  • Multiple options to adapt. From close shotgun to sniper distance.

  • Size of panel dependeded on proprotions and shooting ease of use.

  • Multiple options to adapt. From close shotgun to sniper distance.

  • Size of panel dependeded on proprotions and shooting ease of use.

Wireframe of shooting range level distribution with wall and panel's bulleye
Wireframe of shooting range level distribution with wall and panel's bulleye

PROPORTIONS

PROPORTIONS

PROPORTIONS

Image of shooting range proportion from wall to diegetic panel

1st Diegetic Panel in-game, adapting proportions from wall to diegetic panel was key to mirror bullet patterns of recoil. Good ones depended on tech restraints.

1st Diegetic Panel in-game, adapting proportions from wall to diegetic panel was key to mirror bullet patterns of recoil. Good ones depended on tech restraints.

ACCESSIBILITY STUDY

ACCESSIBILITY STUDY

We went for this palette cause it showed higher contrast compared to others.

We went for this palette cause it showed higher contrast compared to others.

Bulleye wireframe showcasing color palette with different color blindness examples

EVOLUTION OF LANES

EVOLUTION OF LANES

Image of Diegetic panel evolution with siluette on shooting lane
Image of Diegetic panel evolution with Bullseye on shooting lane
Image of Diegetic panel evolution with dummy on damage lane

INSIGHTS

INSIGHTS

Image of shooting range panel, last version

Interesting findings when testing and releasing:

  • Mismatch between shooting wall and mirror screen.

  • Hard to remember weapons and recoil patterns altogether, which made us see the need for shooting records.

  • Changing loadouts is something tedious which also created a need to look into creating a shortcut for accessories..

  • The interaction areas were too small, grew area of interaction by having a bigger space.

  • In the tests we also saw the opportunity to add it while in matchmaking to promote its warm up use.

All in all, it was well received and a needed feature.

Interesting findings when testing and releasing:

  • Mismatch between shooting wall and mirror screen.

  • Hard to remember weapons and recoil patterns altogether, which made us see the need for shooting records.

  • Changing loadouts is something tedious which also created a need to look into creating a shortcut for accessories..

  • The interaction areas were too small, grew area of interaction by having a bigger space.

  • In the tests we also saw the opportunity to add it while in matchmaking to promote its warm up use.

All in all, it was well received and a needed feature.