I’ve never played original Prey. Yes, I’ve heard about a pretty good atmosphere and really interesting mechanics. Quite a few people were even disappointed that the new Prey was not a direct sequel but a completely new story. Well, frankly, I love how it turned out in the end. And if you ask me — I LOVE this version of Prey. Probably, it’s my favorite game in terms of atmosphere, story, and overall gameplay. The game gave me a lot of unforgettable moments. And not to mention mimics and their whole lore. Those are fantastic. And freaking scary at times.
So, a few weeks ago, after another playthrough, I found myself wondering why is game’s UI is so different from the overall game’s style, idea and, atmosphere. And I’m not even talking about any UX problems right now. The overall art-style is so good: a pretty dark universe with some impurity of retro-futurism, I’d say. So why user’s interface doesn’t keep the same aesthetics? I’m not saying it’s bad. It’s just so different from the game itself. Let’s take a closer look at the final UI.
From what I see:
○ hard-to-read texts (especially because of this “lens” effect);
○ lack of “white space” to visually distinguish the second navigation (!!!);
○ lack of consistency (even 2 navigation panels placed literally back to back look different);
○ a lot of visual junk just to fill up empty space (Why is UI permanently telling me what my character name is? (From the story perspective probably I can understand why, but it’s still not really obvious. Or why do I need to know what current in-game time is?);
○ strange brown-ish colors and messy gradients;
○ out-of-place “grungy” action states;
○ a bunch of unneeded lines and dividers;
○ for some reason, there’s even a “container” with rounded corners which contains all other “containers”… without rounded corners;
○ and the list goes on...
Ok, let’s be honest, did you see the second navigation at the first glance? I made some research and found out that a lot of players haven’t even noticed that there is second navigation. Neither do I. I mean it’s my third playthrough but it’s still a puzzle… What’s even more interesting— the game has no “direct cursor” to manipulate UI objects (which is a pretty common solution nowadays) and it makes navigation’s visibility problem even bigger.
So. Based on everything that I’ve already described, I sat down and started to make my very own take on this UI. It took me about 5 workdays of time to finish all main screens. Let’s look at how I did.
First step was inventory. And below you can see how it looks within the game. Just to compare.
I really wanted to make a clear, consistent, fitting, and easy-to-navigate UI. Keeping in mind the lack of cursor I pretty much decided to keep the initial layouts but with new styles and some important UX changes:
○ added some air between primary and secondary navigation so now they are distant from each other to make secondary visible enough. And, of course, now they share one style, simply because they are the same entity in terms of UX.
○ changed the initial fonts for a more condensed one and removed the “lens” effect because we need better readability, not just a “cool effect” causing eye pain. I also didn’t want to use any “fancy” or too “futuristic” fonts just because it’s simply not the right place for stuff like this since we need to deliver clear and easy-to-read text. “Fancy” ones are good for posters, not the UIs.
○ searching for fitting colors for the font I constantly tested it with “WCAG AA” tools. It should not only look “cool” but it’s got to be easy to read as well. So I tried to keep good overall contrast. We’re making stuff that people would use, right? That’s why we need tо think about better accessibility.
○ made a new background and changed the overall color scheme. Gave it a kind of more futuristic-look but without any unnecessary visual garbage.
○ for some reason, the main navigation tabs grouped a bit weirdly. “Inventory” is only a third one in the row but it’s kinda one of the most visited sections throughout the whole game. I rearranged tabs a bit but kept the logical “grouping” policy.
○ removed unnecessary “Morgan Yu” text and clocks from the bottom of the screen and moved “health bars” to the top of the screen where they are easy to distinguish from every other content.
○ it’s more of a gameplay change but I removed all materials from the inventory and placed their “total amount” section at the bottom of the screen. It’s not just to make a bit more space in the inventory but simply because searching for those in the inventory usually is a pain in the ass.
○ item “card” now has an image of the selected item. It’s a shame that the game has no “3D viewport” where you can look/rotate any item to take a closer look at those beautiful designs.
○ no more rainbow in the inventory. It’s now much easier to see a selected item. Inventory is much cleaner now.
○ added some air and icons to a context menu. Gave it a bit better look.
These are the biggest ones worth noticing. Based on this style I moved forward.
As I stated previously we do not have the cursor in the game so every section must be easy to navigate regardless of its content. I also made some really small changes like renaming “Suit chipsets” into “Suit Upgrades” just because “upgrading” really speaks for itself and overall more understandable what’s this stuff for.
Currently, the game doesn’t allow you to dismantle chipsets at all, so at some point, it becomes really hard to find and pick a worthy one. The simple dismantle through pressing R3 (which allows you to drop items from the inventory) option would be helpful a lot!
As you can see basically there are only 3–4 really different core layouts in the whole UI “system”. The fewer variations your UI provides the easier it becomes for a user to learn and navigate.
Throughout the whole process, I constantly checked texts with different localizations (it wasn’t a surprise for me that almost every time the “longest” one was the Russian language). That’s something that I tried to keep in mind working with text containers from the very beginning.
The real struggle for me was not designing the layouts themselves but finding the right graphic pieces like item illustrations for example. It’s really hard when you don’t have the original sources and have to comb through google and artstation spending hours just to find something with decent quality.
Well, that’s it. There were a lot of different variations throughout the whole process but I don’t see a reason to throw ’em here because I really like the final results.
In the end, I also made the main HUD even though I have almost zero complaints about it. But just to wrap this project up I had to do this :)
And splash screen with the new “logo” as the bonus.
Hope you enjoyed reading as much as I did while making this.
If you’re somehow interested in any sort of collaboration — feel free to drop me some lines on my mail — osipovskiymax@gmail.com or on LinkedIn.
Or simply hire me, because I’m currently open to any new opportunities especially in game dev :) You can find some of my other projects here.
Huge thanks for your time and have a lovely day!
