1. Visual Direction

For this project, I wanted to imagine what a Story mode for Overwatch would look like. Consider a PVE mode would be significantly different from the main PVP modes, I wanted to make the UI very distinct.

Overwatch features a ton of FUI elements throughout its maps. I wanted to make the Story Mode UI as narratively immersive as possible so I took inspiration from those in-game FUI.

My visual direction was aimed to make players feel like they were one of the Overwatch characters using a diegetic interface that exists in the in-game world.

2. Updated Frontend flow

To get familiar with Overwatch’s UI, I created mockup for an updated Game Mode menu as well as a sub-menu for Story Mode. This was a really good exercise in “reverse-engineering” and train myself to follow an existing art direction.

It was also a good UX exercise to make new content feel at home and integrated in existing flows.

3. Mission Select mockups

Finally, I made some mockups for various states of the Mission Select screen. The Mission Select menu is divided in 3 chapters to match the Overwatch story beats.

Each mockup showcases different completion levels, locked content and different buttons states.