Good day!
I’m Jiroro, the UX designer on Imperator: Rome. I’ve been on the Stockholm team since November 2019. Nice to finally meet you officially!
So… what is UX?
Sometimes UX and UI get mixed up. The UX - User experience - designers at Paradox are focused on grouping and presenting information, taking the players’ perspective into account. We want to make approachable games, design experiences with a flow that feels intuitive and natural (and sometimes we get it wrong, lol, so thank you always for your feedback). Are concepts introduced properly? Is information achievable? What is the players’ expectation in this system, this game? Are colors, icons or words used in a consistent way throughout all corners of the game? We analyze, then put things into their designated place in the UI, using the gorgeous bits and pieces that our UI artists created. So sure, I do UI. However, I don’t create the color schemes, ornaments or textures of our UI. I design the experience the player will have in the UI.
UI Rework
It’s finally happening, people! The UI rework has been my main focus since I started working on Imperator. Me and my little Stockholm based strike team have been working away from the shadows for a while now. We wanted to take our time to truly figure out our new direction and identify some pain points that needed attention.
To summarize, my UX mission is: Declutter and reorganize the UI for the whole game, without reducing the amount of information you can access. If we removed parts of the core game, it wouldn’t be Imperator: Rome anymore. Sounds like a fun challenge, huh?
Some high priority points for me:
And now that 2.0 is announced, I can finally get into some details with you all!
Small disclaimer is of course that this is under development as we speak, and the final result may look slightly different from the screenshots.
Let’s start with… probably the busiest window of the game: Province & Territory UI.
You know this view.
What I did first was to analyze what we have here. What does everything mean, what belongs to what? I usually create flat uncolored vector icons - low fidelity - to avoid getting distracted by styling at this stage.
After identifying some problems that I want to solve, it’s drag and drop time. Grouping the pieces to add some structure! I ended up with a wireframe like this:
And through some sort of dark, mysterious magic it turns into this latest version, implemented (usually by Arheo or myself) in game:
Tadaa! We decided to have a designated color for buttons in the UI rework. Everything clickable is now teal colored in some way, with the exception of flags. In headers, buttons are white since it blends in better than teal.
In Province & Territory UI, we still have Province on top, Territory on bottom. The two sections get a clearer separation now with our bold headers.
Various things have been cleaned up and aligned, like the progress bars, Province income is now combined into one value (you can still find commerce and tax income separately in the tooltip). Trade goods get more space than before, too.
The terrain image is used in a bigger format to bring more focus to that. On the right side we have new illustrations to show the territory status (this one’s the settlement image).
And, of course, the tabs. Pops, Buildings, Tactical.
Moving on to the top bar navigation. We scrapped that and moved the buttons to the side:
The gods in the old buttons are extremely beautiful, but it was often hard to remember which god represented which UI. We went for a flat icon approach instead. I want players to quickly recognize icons for the UI they want to open. I also changed the order slightly, it makes sense like this I think. The opened UI’s icon will highlight to tell you where you are.
Another UI that got a makeover is Nation Overview:
For 1.5 I decided to move Decisions into the Nation Overview. Here it is in the new UI for 2.0. Now, you select a decision to read more about and enact it with a separate button.
And oh, you will be able to access Nation Overview by clicking the big Nation flag in the corner. So many of us try to do this all the time (yes, we tracked it in usability tests, and I’ve seen your comments about it). So I added that for the UI rework.
We also gave the Outliner some love:
The Outliner has gotten a more compact look. It’s slimmer, information is tightly packed within it to avoid too much scrolling, some added consistency for the button hiding or showing the Outliner and Queued Events.
Next up is Character UI:
This view has gotten some of that art boost I mentioned as one of my goals for the rework. I felt that characters should have more of a personal touch to them. In fact, we have added a series of backgrounds for character portraits for this update, and in the detailed Character UI - as well as in the Nested Tooltip card - you see the full width version of that image. The backgrounds provide flavor and contextual information. Apart from terrain images based on the character’s location and government related backgrounds, we also have specific images behind characters who are dead or imprisoned.
That’s all from me for this week. I appreciate all your feedback on last week’s UI rework reveal. Not to mention improvement suggestions here and on other platforms before that. Your comments and suggestions influence my work and that’s a really cool position for me to be in. With UX design, I truly believe there needs to be a back-and-forth. Thank you.
/Jiroro
...... But wait!
Before we wrap up completely, Arheo has something to share:
Hi all! In usual fashion, we can't leave a dev diary without a small teaser of something new... without telling you what it is, naturally. Thus, with no further comment, I'll leave this (WIP) window here:
I’m Jiroro, the UX designer on Imperator: Rome. I’ve been on the Stockholm team since November 2019. Nice to finally meet you officially!
So… what is UX?
Sometimes UX and UI get mixed up. The UX - User experience - designers at Paradox are focused on grouping and presenting information, taking the players’ perspective into account. We want to make approachable games, design experiences with a flow that feels intuitive and natural (and sometimes we get it wrong, lol, so thank you always for your feedback). Are concepts introduced properly? Is information achievable? What is the players’ expectation in this system, this game? Are colors, icons or words used in a consistent way throughout all corners of the game? We analyze, then put things into their designated place in the UI, using the gorgeous bits and pieces that our UI artists created. So sure, I do UI. However, I don’t create the color schemes, ornaments or textures of our UI. I design the experience the player will have in the UI.
UI Rework
It’s finally happening, people! The UI rework has been my main focus since I started working on Imperator. Me and my little Stockholm based strike team have been working away from the shadows for a while now. We wanted to take our time to truly figure out our new direction and identify some pain points that needed attention.
To summarize, my UX mission is: Declutter and reorganize the UI for the whole game, without reducing the amount of information you can access. If we removed parts of the core game, it wouldn’t be Imperator: Rome anymore. Sounds like a fun challenge, huh?
Some high priority points for me:
- More art! Let art take up more space to enhance the feeling of immersion. Without letting gameplay or functionality suffer.
- Visual consistency. Introduce a visual language that makes a distinction between what’s clickable and what’s not, for example.
- Tabs and headers to group information.
And now that 2.0 is announced, I can finally get into some details with you all!
Small disclaimer is of course that this is under development as we speak, and the final result may look slightly different from the screenshots.
Let’s start with… probably the busiest window of the game: Province & Territory UI.
You know this view.
What I did first was to analyze what we have here. What does everything mean, what belongs to what? I usually create flat uncolored vector icons - low fidelity - to avoid getting distracted by styling at this stage.
After identifying some problems that I want to solve, it’s drag and drop time. Grouping the pieces to add some structure! I ended up with a wireframe like this:
And through some sort of dark, mysterious magic it turns into this latest version, implemented (usually by Arheo or myself) in game:
Tadaa! We decided to have a designated color for buttons in the UI rework. Everything clickable is now teal colored in some way, with the exception of flags. In headers, buttons are white since it blends in better than teal.
In Province & Territory UI, we still have Province on top, Territory on bottom. The two sections get a clearer separation now with our bold headers.
Various things have been cleaned up and aligned, like the progress bars, Province income is now combined into one value (you can still find commerce and tax income separately in the tooltip). Trade goods get more space than before, too.
The terrain image is used in a bigger format to bring more focus to that. On the right side we have new illustrations to show the territory status (this one’s the settlement image).
And, of course, the tabs. Pops, Buildings, Tactical.
Moving on to the top bar navigation. We scrapped that and moved the buttons to the side:
The gods in the old buttons are extremely beautiful, but it was often hard to remember which god represented which UI. We went for a flat icon approach instead. I want players to quickly recognize icons for the UI they want to open. I also changed the order slightly, it makes sense like this I think. The opened UI’s icon will highlight to tell you where you are.
Another UI that got a makeover is Nation Overview:
For 1.5 I decided to move Decisions into the Nation Overview. Here it is in the new UI for 2.0. Now, you select a decision to read more about and enact it with a separate button.
And oh, you will be able to access Nation Overview by clicking the big Nation flag in the corner. So many of us try to do this all the time (yes, we tracked it in usability tests, and I’ve seen your comments about it). So I added that for the UI rework.
We also gave the Outliner some love:
The Outliner has gotten a more compact look. It’s slimmer, information is tightly packed within it to avoid too much scrolling, some added consistency for the button hiding or showing the Outliner and Queued Events.
Next up is Character UI:
This view has gotten some of that art boost I mentioned as one of my goals for the rework. I felt that characters should have more of a personal touch to them. In fact, we have added a series of backgrounds for character portraits for this update, and in the detailed Character UI - as well as in the Nested Tooltip card - you see the full width version of that image. The backgrounds provide flavor and contextual information. Apart from terrain images based on the character’s location and government related backgrounds, we also have specific images behind characters who are dead or imprisoned.
That’s all from me for this week. I appreciate all your feedback on last week’s UI rework reveal. Not to mention improvement suggestions here and on other platforms before that. Your comments and suggestions influence my work and that’s a really cool position for me to be in. With UX design, I truly believe there needs to be a back-and-forth. Thank you.
/Jiroro
...... But wait!
Before we wrap up completely, Arheo has something to share:
Hi all! In usual fashion, we can't leave a dev diary without a small teaser of something new... without telling you what it is, naturally. Thus, with no further comment, I'll leave this (WIP) window here:
- 159
- 118
- 11
- 9
- 7
- 3
.png){kind=avatar}
