Skip to main content
UX Work

Division 2 x Star Wars

I am a huge fan of the Star Wars universe, including movies, series and games. Recently, I picked up The Division 2 again, and imagined what a mix-up of the two would look like.
Because of this, I took it upon myself to explore this mix-up of both parts, and make a little challenge out of it – I gave myself one afternoon to do some research, find one screen to remake/mock-up and create this mockup.
Tools used:
Figma
Photoshop

Final Result

This is the final outcome of my challenge – if you are interested in reading how it came together, scroll down and take a look!

Goals / Objectives

Combination of Styles

Goal of this case study was to combine the UI/UX of The Division 2 with modern Star Wars video game aesthetics (with a sprinkle of my own idea of what a Star Wars game in this style could be like in regards to features, etc.)

Game-ready

I wanted this case study to theoretically be capable of being implemented into a video game. What I mean by this is that its navigation should be logical and possible with a gamepad.

Look the Part

This case study was supposed to look legit – look like an interface that a AAA production would ship with, and like something that would fit nicely into the Star Wars universe.

Research & References

I looked up a lot of different screens for The Division 2, as well as screens of different Star Wars games, such as Battlefront 2 and Jedi: Fallen Order.

Process

I knew that I wanted to keep the player on the left side of the screen at all times, in order to see changes to their equipment live.
I kept the layout of the entire inventory very similar to The Division 2, including its grouping of items.
The top-bar for navigation/pagination through different aspects of the player character is also heavily inspired by The Division 2, but features the different categories that I thought of for this hybrid game.
One of the most important categories for any inventory – the weapons. I wanted to put them high up in this list and make them stand out!
The gear is also a very important element of an inventory. I wanted to give it enough room to stand for itself, and already know that I wanted to somewhat color-code it for rarities (same as for weapons).
This section is also heavily inspired by The Division 2, but I wanted to include the elements that would be important for this mash-up – the player level, their rank and role (+ level), their reputation, etc.)

This is my grey-box of the screen as I wanted to build it. I took heavy inspiration from The Division 2 (which was my goal, somewhat) and tried to already include some of the gameplay features that I envisioned for this mash-up.

This is what I ended up with after fleshing out my greybox a bit more and building out the style of my design, with nicer UI elements and proper item graphics.

Revision

After looking back at my design and talking with a UI Designer friend of mine, I got some feedback and made a list of improvements for this design.

My main points were clarity and sizing/spacing, so I changed some fonts (titles vs body/content fonts), increased font sizes, adding spacing between elements, and most importantly changed the transparency/shading of different elements in order to show which buttons are currently hovered/focused, and which are not.

Second Version

During this challenge, I noticed that while I seemingly managed to replicate the The Division 2 style to some degree, I wanted to explore into a different direction – something different and slightly inspired by Jedi: Fallen Order (one of the games I referenced in my preliminary research).

I kept the layout identical to the first version, but styled all the elements different.

Feel free to use the slider to compare version 1 and 2!

Conclusion

While I had a lot of fun during this challenge and learnt a lot, I found that good game UIs just need more time in order to evolve into what they end up being.

I also learned that Star Wars is not necessarily a thing to reference, but rather a vibe/feeling that can come from an experience – a lot of recent video games of this franchise have taken drastically different approaches in their user interfaces but they all shared the unique Star Wars identity.

Finally, I would definitely be interested, to explore this universe more and give it a unique touch while still staying true to the franchise!