PRINCIPAL UX DESIGNER
I provided extensive UX work and leadership for Age of Empires IV including user flows, wireframes, prototypes, user research, front-end development, mentorship, cross-team reviews, and more.
Tools: Figma, Axure RP, Adobe XD, Adobe Photoshop, Adobe Illustrator, XAML, Facebook Origami, Protopie
In many RTSes, the HUD takes up a lot of permanent screen real estate. We wanted to minimize the wasted space whilst making it more efficient to navigate and more obvious how to construct all available buildings with villagers.
Given that the game would be available on multiple storefronts, including Gamepass for Windows, we needed to scruitinze our approach to onboarding and ensure that new players and returning players alike could find their footing.
Age of Empires IV was designed to provide an excellent social, multiplayer expeirence and to allow seamless cross-play between Steam and Xbox users. There's no out-of-the-box solution for this so we built our own social layer into the game.
Partway through development, we made the call to allow UI text to scale up as an Accessibility feature. I led the charge on crafting a strategic approach to develop this functionality.
I kicked off the project by working with the team to hone our vision and define our UX principles.
The UI style should connect with the historical theme and feel of Age of Empires while also being a more modern, timeless take.
Infuse the game with the best conventions from other games - whether Age of Empires, Relic, or other strategy games.
Follow best practices for Accessibility and use integrated dynamic teaching systems to catch those who don't engage with linear tutorials.
Every design should have a hypothesis and the UX for that design should support creating certain player behaviours. Not everything should be simple and easy.
To understand how people think about the nouns and verbs of Age of Empires, I ran card sorting exercises. It revealed that people naturally grouped offline game modes together and online game modes together. This translated to a menu design focused on creating two "hubs" - one for singleplayer and one for multiplayer content, with clear pathways to get there from the very first screen in the game.
Because so many things could appear on the main menu, we had to be very clear about the information hierarchy:
I supported our other UX & UI designers, artists, and engineers in developing and refining processes including reviews & handoffs, task scheduling, and bug tracking. The key point was to foster collaboration and have multiple, inclusive review points rather than only showing engineers a design at the very end. Designs can be better and more problems can be caught early this way.
We largely relied on hypothesis-driven design. Each design decision we made should have an accompanying hypothesis on how this will affect player behaviour; this was tested and monitored as we developed the product.
Good UX helps emphasize the point that you generally don't design for yourself. To this end, I helped run some usability studies with Relicans from other teams and created a how-to-conduct-playtesting guide for our campaign designers when they wanted to run playtests on their missions. It's crucial to observe how your designs are used by people other than yourself. Additionally, I worked closely with Microsoft UR to define a plethora of external playtests and then made design improvements based on their results.
As outlined in this behind the scenes video, we also formed a Community Countil comprised of different Age of Empires players. I interacted with them on a regular basis to gather their feedback and steer the direction of the game's UX.
Decision time increases with the number of choices available (Hick's Law). RTS games already max out one's attentional bandwidth and decision-making capabilities. To alleviate this, and to visually show more of the game world, we wanted to minimize the footprint of the HUD and keep decorative elements to a minimum.
Lists are more efficient to scan vertically than horizontally. Taking a page from Age of Empires 3, I ensured resources were listed vertically and placed them as close as possible to the units and buildings you'd be purchasing. This way, any cost comparisons would have the shortest possible eye movement, saving valuable milliseconds.
Previous games used nested sub-menus to hold all of the buildings a villager can build. This doesn't visualize the process of aging up and gaining access to those buildings, and it's quite hidden if you're new to the game. I worked with our Lead Gameplay Designer to design a stacking menu that clearly visualizes the need to progress in the ages, yet keeps full hotkey support for high level players.
Where possible, I tried to integrate UX advancements from all Age of Empires games. For example, the vertically stacked resources from Age of Empires 3 were combined with worker shortcut buttons from Age of Empires Online that displays and allows you to cycle through all workers on a particular resource.
A smaller but pet improvement of mine was the appearance of toggle buttons in the UI. Historically we struggled to make it clear whether a toggle button was on or off when it didn't have a unique "toggled on" state. To remedy this, I worked with a UI artist and built a prototype of a more physical "on/off toggle" switch. From that point on, users were much more certain of the button's state.
I was responsible for outlining and overseeing the overall plan for onboarding and learning systems in Age of Empires 4. First, I made an onboarding plan - a spreadsheet of all concepts that need to be taught in the game, prioritized by importance, ease, and sequence of teaching.
I ultimately proposed and we built out the following:
Art of War missions emphasize learning-by-doing. Art of War missions give the user one topic at a time, give them an end goal, then introduce a challenge (ie. timer, high score). Each mission will help the user figure out one aspect of the game at a time by requiring them to learn high performance skills to get the best score in each mission.
My initial proposal only walked users through a few critical concepts like unit selection, orders, building units, and gathering resources. Through usability and playtesting, we discovered this left users ill-equipped to play a full mission so a game designer on the team took another stab at creating a more detailed tutorial. I assisted in finding the right balance of giving the user goals to achieve without always telling them exactly what to do - learning by doing, for better internalization. To help, I designed an "information" objective type in the UI we could use to display hints to the user in the objectives area of the HUD.
Sometimes people skip tutorials or miss something the first time around. Even worse, they may jump directly into multiplayer. To provide a good baseline for these players I concepted Dynamic Training. The system uses telemetry-like hooks to analyze your actions in any game mode. If you don't do something important, a training hint will appear. Crucially: if you are an expert player and already do these actions, the game will skip those hints to avoid annoying you. Once the feature was through usability testing and proven out, other game designers on the team helped design and implement a full library of hints to display.
See dynamic training in action above. As a new player not intuitively using all the controls, the game steps in to show you the critical steps of aging up and controlling villagers.
We wanted to ensure that players could always find and interact with their friends, so I worked with another UX designer to propose a "taskbar" that would be present on every screen showing friends, parties, chat, and more.
Because this game supports cross-play between Steam and Xbox, it has its own friends list. This could be a point of confusion. We ensured that not only does the friends list show you people you recently played, but also shows your friends from those platforms who also have Age of Empires 4. This way you can immediately add them and start playing.
Matchmaking and custom game setup can take a while. Early on I proposed (and we built!) the ability to "miminize" these windows to the taskbar so you can continue browsing the rest of the UI while waiting to start a match.
I began an inventory of every screen in the game, which the entire UX/UI team rallied around to complete. We took screenshots and called out areas where scaling was causing issues.
I ultimately came up with a non-linear text scaling solution where not everything needs to scale uniformly. For example: body text should scale all the way up, but large headers may not need to scale at all as they are already larger than the largest possible body size. I then helped to organize all of our new text styles and assisted with implementation in-engine (XAML).
"The UI for Age of Empires IV has gotten a solid upgrade, as have the controls. The improvements are literally everywhere, so it’s hard to call out just one. There are a metric ton of accessibility options such as remappable keys, contrast adjustments and subtitles, as well as text scaling and more. It helps as the game can be played at resolutions at up to 4K with the text adjusting automatically."
I created some documentation with examples for things like page types, button types, modals, rules for placement of primary, secondary, destructive actions, patterns for searching, and more. This helped us stay consistent and helped QA in being able to spot design issues and log them as bugs. See a few examples below.
This was an incredibly large, complex, and rewarding project. I am grateful to all of the team members I worked with and, more than anything, grateful that the game was well received both reviewers and players alike. Our efforts to improve the game's usability, accessibility, and onboarding are making an impact.
"It’s still every bit the 'PC game' that Age of Empires II is, albeit with several key refinements. From the clean and intuitive UI to the wonderful Art of War missions that teach you high-level play via simple to follow instructions, there’s a simplicity here that doesn’t belittle or soften the deep layer of strategy sitting below the surface."
Principal UX Designer, Relic Entertainment
Barry McDougall, Dave Cheong, Eli Masi, Euphemia Wong, Garson Kwan, Jaro Jelovac, Jonathan Lai, Michael Lee, Quinn Duffy, Theo Wong, Zach Schlappi
Check out the game at ageofempires.com
Let's talk shop! Feel free to shoot me an email about what you see here, future work, or anything else you'd like to chat about.
EMAIL ME