The designs showcased below are representative examples of work I have completed on an Unannounced, AAA Action game in the MMORPG genre.
They also serve as examples to illustrate the range and quality of my own work without including NDA material.
Throughout this page I will be showcasing my UX design and sharing with you more of my own design process. This will give you a better idea about how I view games, design, user experience and user emotions.
Due to confidentiality requirements, the full details of this unannounced project cannot be disclosed at this time.
Additional Locked Work available on request.
: Table of Contents
Development Process
The UX Development Process spans from ideation all the way to implementation.
Throughout my own process, I utilize paper sketches, rubber ducking, interactive prototypes, wireframes, and flow-charts to notate my ideas.
A core aspect of UX development is the creation of a Component Library, which allows for efficient and scalable construction of screens.
Censored for confidentiality
Paper Sketches & Rubber Ducking
⏷ Development Process
When I’m starting on a new UX design, the first tool I reach for is my notebook.
Pen and paper is still the fastest and most effective input method for allowing me to freely express my ideas as they arise, without the limitations and rigidity of software.
I can quietly sketch my ideas during a design meeting, without distracting any of my team members
I can log my ideas at any time of the day!
Sometimes the best ideas come when you’re in the shower!
This pairs well with the rubber duck method; vocalizing your thoughts while solving a problem
-
Creating a Component Library can be a rather large investment up-front, especially on a complex project such as an RPG. But it's easily worth it for the long term scalability and efficiency of your UX development.
As your development continues, aspects of your game will naturally shift and change. You may find that aspects of your own designs are not delivering on the intended experience. Or perhaps another team on your project is unhappy with their testing results and decides to shake up a fundamental gameplay system.
No matter the case; an adaptable designer is an effective designer.
A component library is your best friend in a case like this. For example, when you realize that your "Play" button isn't standing out enough to your players, you can simply adjust the Play Button Component - and have your changes propagated to all of the corresponding screens that are using your Play Button Component.
Instead of manually adjusting all of your screens, you can make broad sweeping changes across your entire UX project in a drastically shorter time by utilizing your Library.
Figma Skills : Creating a Component Library
⏷ Development Process
One of the many keys to sustainable, large scale UX development is creating a Component Library.
Components allow you to assemble screens quickly using re-usable elements
Re-using components creates consistency across all of your screens
Figma also allows for Themes to be created for Text Styles, Colors, Effects, etc.
Themes allow for quick adjustments and testing across all of your screens
For example, you can increase the text scale of your entire project by adjusting your Text Themes
Navigation Tools
⏷ Player Navigation
The player has multiple “tools” shall we say at their disposal for navigation.
HUD elements like the Compass and Quest Objectives provide immediately accessible information
Locational elements like in-World Markers, Nameplates, and Off-Screen Indicators help orient the player to their surroundings.
It is through a learned ability to utilize these features simultaneously that allows the player to reach an intrinsic - almost subconscious connection with the world around them.
-
As the UX designer collaborating on a project, you should be enabling your team to create the most engaging content possible - without being restrictive due to your rigid and inflexible UI design.
Your quest design will inevitably change and evolve over the course of development : By building a reactive system you can mold your UI to the needs of your quest designers while creating a deeply collaborative environment.
-
Navigation plays a major role in immersion or “game feel” despite its primary purpose of being informative.
With a frictionless navigation system - the player can become more easily immersed in the game world.
This is because your players can traverse and explore the game world in much the same way as they do the real world. After all, much of this technology exists in some form in real life, and so players already have a level of familiarity with them (Google Maps, location based VR and AR, etc).
Only now, your players have an abundance of information at their fingertips that they don’t normally have access to in the real world.
-
Part of the challenge in designing a complete Navigation experience is displaying all of the information players need to know without overwhelming them. In an open-world game there is only so much you can remove from the HUD before it becomes ineffective - so how do you reconcile showing players genuinely helpful information without compromising the immersion of the experience?
The way to accomplish this feat is to play into the themes of your game world.
Your interface does not need to be diagetic - literally existing inside of the game world as a physical thing - to be immersive.
But, it does need to feel as if it belongs as part of the user experience. Create an interface that is of the game world, even if it is not literally inside of the game world. Much in the same way as technology and interfaces like the smartphone have become a part of our daily lives, your UI should feel as if it is part of the daily existence of your game characters.
Quest Objectives
⏷ Player Navigation
The Quest Objective UI is a contextual HUD element that displays the player’s tracked Quest and their current goals.
It was important for this design to be expandable and modular in order to support many different types of content and objectives.
In - World Markers & The Compass
⏷ Player Navigation
In - World Markers keep the player informed about the content around them by highlighting interactables and Points of Interest.
These markers also give the player some indication of an interaction’s purpose before the player interacts with it.
The Compass serves much of the same purpose, displaying the cardinal locations of each in-world marker relative to the player camera.
As a persistent HUD element, the player can always reference the Compass for situational awareness.
Quest Log
MMO RPGs are packed with many types of content for players to engage with. The Quest Log is designed to be a UI hub for surfacing, managing, and tracking this content.
It showcases what the player is currently doing, what they could be doing, and what they should be doing.
Featured Quests Page
⏷ Quest Log
The Featured Quests Page is the landing page for all Quest content. It surfaces Quests the player may be interested in, with an emphasis on Active Events and the player’s last known Quest activity.
The core Info is displayed in the center of the screen, showcasing data that may be important to the player
Quest Type
Location
Time investment.
The list of highlightable buttons to the left corresponds with the player’s Active Quests
-
When you are the UX designer working in such a huge possibility space as an MMO RPG, you must take action and develop your own systems and tools to make things easier. Not only for the sake of your players, but for yourself as the developer.
The Quest Log is designed rather traditionally for the sake of player’s expectations (more on this in the section below) however the Tagging system makes its first appearance here. Tags may seem like a simple addition, but their implications are much farther-reaching when applied across your experience. Tags can apply to a wide variety of different features, as you will see throughout this page.
The strength in Tags is their ability to quickly and efficiently get the point across. They effectively categorize complicated ideas & content into buckets that are more easily understood by your players. Tags also create the potential for filterable options just by existing - allowing players to filter for exactly what they are looking for in a sea of otherwise unorganized content.
-
It's important to understand your players as people who play games, they are not single-minded machines created only to consume your designs. Their experiences outside of your game will absolutely have an impact on how they experience your game. Sometimes, you need to play to your strengths instead of taking a huge swing and totally whiffing it.
Something I use often while designing is what I call the Three I's : Imitate, Iterate, Innovate.
Imitation is the highest form of flattery, taking a design that already works and mirroring it. Iteration is the game developer's lifeblood, identifying where your design is lacking and improving upon it. Innovation is the tallest order, throwing out all you thought you knew and creating something truly original.
Of these three approaches, Innovation is often viewed as the highest form. After all it is the innovative games that we most often celebrate and admire, the ones that make the biggest impression and stay in the public consciousness for years to come. Which is why it may sound counter-intuitive when I say that ~
Innovating is not always the best approach.
When a feature becomes synonymous within a genre, your players will naturally develop a sense for how that feature should behave in your game. These players develop this ‘sense’ through their experiences with other games in the genre (Mental Modeling, in cognitive psychology terms).
As players begin to interact with your feature, they bring their previously established expectations into the experience with them. In a case like this, anything you do to go against those expectations will cause dissonance and discomfort in your players 🤨 You will create this Sisyphean cycle wherein players must expend additional mental energy to adjust to the specific workings of your game, before rapidly unlearning these concepts as soon as they play a more "traditionally designed" game in the genre - making it all the more uncomfortable to jump back into your game and repeat this uncomfortable adjustment period.
Social Feature : Quest Sharing
⏷ Quest Log
To improve upon the multiplayer questing experience, players are able to share Quests directly with their Squadmates by holding the Share button.
This adds the Shared Quest to the Squadmates’ own Quest Log - allowing players to immediately Quest together without having to interact with the Quest pickup.
Live Service Feature : Event Quests
⏷ Quest Log
Live Events periodically provide players with special quests and offer unique gameplay modifiers for a limited time.
They are a major part of the Live Ops toolkit!
Live Events contain unique messaging to ensure players are aware of when they are starting and ending - increasing the likelihood for players to engage with them.
The Events page features a unique landing page for tracking the player’s overall Event progress and their long term goals.
Weapon Customization
Weapon Customization is the process of crafting the visual appearance of the player’s weapon, often referred to as Transmog.
Players can create a weapon that fits their own personal style; enhancing their roleplaying experience regardless of their gameplay role.
Selecting from The Inventory
⏷ Weapon Customization
The player begins the process by selecting their gear from an itemized list corresponding with their inventory. This list is filtered to different categories with ineligible items filtered out to make large inventories easier to parse.
The weapon’s physical appearance is at the core of this experience, thus the weapon is always kept as the focal point throughout the entire process.
Customizing Weapon Parts
⏷ Weapon Customization
Selecting Weapon Parts involves breaking the weapon’s model into its individual pieces and selectively customizing each of them.
Each piece contributes to the weapon’s overall appearance, while emphasizing its gameplay purpose.
This process is done entirely visually using a carousel style selection, as opposed to a menu.
The carousel will spin as the player cycles through their options, moving the newly highlighted part to the center of the screen.
-
This is a great example of Emotional Design in action, which can often be rather amorphous and difficult to explain.
The core tenets are primarily based on Don Norman’s book of the same name, Emotional Design : Why we love (or hate) everyday things. There are 3 levels of Emotional Design that Norman outlines : visceral, behavioral, and reflective.
Visceral Design refers to the visual and perceptible elements of a design and how it immediately makes you feel. For example, by showing the model of each part of the weapon you are able to appeal to the player’s initial emotional response to the aesthetics of each customization option.
Behavioral Design refers to the ease of use when interacting with a design (this is effectively the same as “usability”). For example, all customization is designed in a dive in - dive out menu style you are able to evoke traditional design sensibilities - making the design easier to pick up and use immediately for new players.
Reflective Design refers to a users intellectualization and rationalization of a design. For example, by placing the weapon at the forefront of the experience you are able to appeal to players sense of self-expression, and prompt them to think more consciously about the effects of their customization decisions. Such as “what will another player think of me when they see me using this weapon?”
Confirming Your Customizations
⏷ Weapon Customization
To deliver on the promise of the premise; intimately assembling your own unique piece of gear, the player always has a clear view of their weapon with all their chosen customizations applied - as well as the price of each.
The total cost of the player’s customizations is also shown on the main page before Checking Out.
The final product is the result of the player’s unique aesthetic choices in line with their roleplaying goals
Even though transmog is not literally a crafting system we can still evoke the same emotions that a player experiences when crafting an item by hand.
Storefront & Purchase Page
⏷ Premium Storefront
The Storefront is broken into categories containing a specified amount of items, represented as various sizes of tiles.
The main landing page surfaces promotional and recommended items to players.
Categories stack vertically, corresponding with the navbar on the left side of the screen.
Selecting an individual item will allow the player to view additional details before purchasing.
-
The worst case scenario when it comes to a storefront ~ is a player making an uninformed purchase.
This is almost always an extremely negative experience, and can completely burn your players from ever spending a cent in your store again.
When a player makes an uninformed purchase, their first inclination is to blame the seller for tricking or fooling them into buying it. Come to think of it, they didn’t even want item to begin with and had no intention of purchasing in the first place! (They may say…)
Even if this is not your intention and you truly wished to present the item honestly, it is much easier for us to blame an outside source for our troubles than to blame ourselves.
It is key to present every purchase in as simple, transparent, crystal clear terms as possible to avoid this unpleasant outcome.
-
When designing for an online game such as an MMO, you face a different set of problems as compared to a single-player experience.
Your game, and thus all of your designs, must exist in the constantly changing ecosystem of Live Operations. Though your initial design may be wonderfully engaging and polished on release day, if it doesn’t serve the needs of the game over time - it has categorically failed.
Make no mistake - it is your job to make your team’s life easier.
Your Live Ops team will thank you!
Live designs must prioritize flexibility and scalability over all else. Most of us do not possess the pre-cognition to anticipate the needs of our players (and the development team) 10 years from now. And so, you must create a design that bends to the will of your Live Ops without breaking under the pressure of time.
For example, this storefront design is built on a grid with variable-size tiles used to showcase individual items. This expandable system allows the Live Ops team to use their own judgment in deciding what item goes where and what size tile it should use - It enables them to do their job more effectively now and in the future which benefits everybody.
Previewing an Item
⏷ Premium Storefront
By selecting an individual sale item, players can preview how an item will appear when equipped to their character.
The player has full control on the camera here to rotate, pan, and zoom around as they inspect.
Players can also choose from a variety of options to adjust the preview in order to see the item in different contexts, such as different environments and character poses.
This ensures players are crystal clear on exactly what they’re buying and can feel confident about their purchase.
The Scanner
The Scanner is a Modal Shift that allows players instant access to information about the world around them - at the push of a button.
This feature allows the player to view the world through a different “layer” revealing new interactions and things to discover.
Modal Shift
⏷ The Scanner
The player activates the so called Modal Shift by pressing in on the Right Stick. In doing this the player is able to swap between two distinct gameplay “modes” with different rulesets by turning the Scanner on and off.
While the Scanner is active, the player’s vision is augmented and all in-World Markers around the player will reveal themselves.
The control scheme stays consistent, but the way the player interacts with the environment is different.
-
I created the Scanner to solve a common problem that effects open-world games; understanding where you are relative to the interesting content around you.
There is a modern trend in gaming to try and reduce the amount of UI on screen whenever possible - to keep players focused on the action at the center of the screen and create a more immersive experience.
But ~ when you do this, you inevitably limit the amount of information a player has access to on demand. This forces your players to open complex menus like the World Map for example - when they decide they do want access to this info.
The Modal Shift provides players agency over when they want the maximum amount of information - and when they want to filter out everything that isn’t immediately relevant. All without opening a single menu!
By projecting the World Map through the game camera using the Scanner - the player has access to world info on demand at the push of a button. And when the player decides they don’t want to see this info any longer; they can filter it out immediately by pressing the button again.
Once you have a feature like this working in practice, you can easily connect it to all sorts of other systems (Social, Quests, Pathfinding, etc). Providing players with more immersive methods of experiencing the game without compromising your traditional menu management for those that prefer it.
-
Traditionally, the RPG experience involves a lot of menu navigation. This is a necessary if not tedious task, but it does enable players to fully experience the game.
At their core RPGs are about managing resources, and the most easily understood and convenient method of doing this is through menus.
This is doubly true for MMOs, where social and monetization features are stacked atop the already dense feature list of the RPG genre.
So then, as the UX designer working in this space, how do you maintain a player’s connection to the game world when so much of their time is spent navigating through menus?
Simply, you decrease this reliance on menus by bringing them into the game world. Thus reducing the amount of time players spend disconnected from the world - while creating a more interactive and reactive game world at the same time.
Next time you are designing a menu, ask yourself :
“Does this really need its own full screen menu? Could I incorporate this directly into the gameplay experience without taking players out of the game world?”
Scanning Interactions
⏷ The Scanner
By aiming the reticle - players can highlight markers and various other elements in the world. Highlighting an object will “Scan” it, displaying a panel with additional information.
Instead of navigating through menus to find what they are looking for - players can Scan objects around the world to interact with them directly.
Such as adding another player as a friend, or tracking a new Quest.
Dialogue
Dialogue is the voice of the characters within the game world - those directly speaking with the player and those ambiently existing in the background.
These characters and their voices have significant consequences on the story, world, and the relationship between the player and the game.
Conversations & Lore Lookup
⏷ Dialogue
NPC Conversations are staged dialogue interactions between the player character and NPC(s). They include player choices, which are instrumental in crafting the player character’s personality.
Each Dialogue Option is presented in a visually distinct way, with enough detail for players to fully understand the actions their character will take.
Players can open the Conversation Log to view the history of all dialogue and player choices.
This also enables the Lore Lookup feature, which contextually displays Lore Library entries for relevant in-world terms and concepts referenced in dialogue.
-
The Conversation Log is a feature that went through many iterations throughout development, and serves as a great example for why it is important to be flexible and player-focused above all else as a UX Designer.
You must always be considerate of how different types of players will interact with your feature.
Ask yourself; what is the purpose of this feature’s existence and what are all of the usecases I need to consider?
Originally, the Log was intended to be integrated as part of the main Dialogue UI. This would have allowed players to view the Dialogue history down in the corner, without diverting them to a separate screen. This maintained the focus on the NPC they were conversing with.
However, when testing with larger accessibility-friendly font sizes, this design started to break down. Only a few small lines of Dialogue could be displayed without scrolling, which admittedly did serve those players who simply wanted to see the last line of dialogue they may have missed.
Where this design failed was that it didn’t serve those players who wanted a full refresher on previous conversations with the NPC. As such the Full Screen option served as a more complete solution, and even allowed for the integration of the Lore Lookup feature.
-
In games, having a conversation with an NPC is typically a very constrained and orchestrated experience.
You cannot just blurt out whatever you like, as we are like to do in the real world. Instead, you must choose from a selection of options defined by the developer to decide what your character should say and do. This is a key part of the roleplaying experience, as your character’s personality and temperament will be almost entirely determined by the dialogue options you choose.
There is an art to writing game dialogue - wherein the tone and content of each choice is clearly indicated, as well as the gameplay implications of selecting them.
When you are playing as a character, especially one of your own creation, nothing is worse than watching that character say or do something that isn’t in line with their personality or alignment you’ve established in your mind. This experience can totally shatter a player’s immersion in a matter of seconds.
When you are designing a conversation experience, it is paramount that you establish Dialogue Option Types. You must clearly convey to players the actions their character is going to take before they take them.
The verbosity of your player character is often limited - as each dialogue option can only comfortably display so much text. This can create a disconnect between what the player thinks will happen when they select a Dialogue Option, and what actually happens. For narrative heavy games - it is essential to solve for this, especially when your dialogue can have significant consequences on the relationships of your characters and the story at large.
In - World Chatter
⏷ Dialogue
In-World Dialogue is represented visually, and is located near the audio source as opposed to being displayed on the HUD.
This prevents the dialogue UI from becoming overwhelming in crowded environments, such as hub areas.
It also ensures that players do not feel spammed with dialogue notifications as they are exploring some of the densest and most engaging areas of the world.
With this style of presentation, players are able to quickly process large amounts of ambient dialogue. Selective Attention allows players to focus on the dialogue that interests them, while subconsciously filtering out the surrounding noise and clutter.
Lore Library
The Lore Library is an archive of in-game concepts, characters, objects, etc the player has come across and learned about throughout their journey.
Players naturally complete entries over time as they play, receiving actionable gameplay information and rewards for their progress.
Navigating the Lore Library
⏷ Lore Library
The top level navigation of the Lore Library is designed in a familiar “File Explorer” format.
This creates a level of parity between the Lore Library and other traditional databases, making it easier for players to pickup and use immediately based on their previous experiences.
Expandability is a huge priority for a system like this :
As the game lives on, more entries can be added based on new content.
By designing the Lore Library as an infinitely-expandable database - we ensure the design will hold up over time and not require a significant redesign later down the road.
-
The Lore Library and features like it are designed for a very particular type of player ; one who doesn’t just want to experience the world but wants to know everything about it.
Typically, walls of text and dense amounts of information can be intimidating when you first see them (kind of like this writeup!). But since this is not a typical case - it is actually more beneficial for you to present each entry as a piece of long-form content.
Players who get a kick out of reading about in-game lore are the same people who spend hours researching into the night - going down rabbit holes about their favorite topics and consuming as much info as they possibly can. They have a passion for learning and knowledge and find great satisfaction in becoming experts on niche topics.
If you can enable this experience inside of your game and create that same emotional response - your players will be very happy indeed.
-
When you are creating a lore-delivery feature like this - you are really doing Tools UX as much as you are doing Game UX.
Your Lore Library is not just a tool for your players to use to learn more about the world : It is also a tool for your Narrative Designers to craft engaging stories.
In order for your own Lore Library to be truly great - the entries themselves must contain a wealth of interesting information. It doesn’t matter how well designed and usable your lore database is if there is no interesting lore worth reading about.
Make your Narrative Designers lives easier by providing them with the freedom and flexibility to present this lore information in the way that best facilitates the stories they want to tell.
The needs of your Narrative Designers should outweigh your own in this case. Your narrative-loving players will have a better experience if you remain flexible and bend your design to present a more engaging and fulfilling story - allowing your writers to experiment with different POVs, data sources, characters, etc.
Lore Entries
⏷ Lore Library
Lore Entries contain all of the information a player has catalogued about the subject, alongside a visual representation of the subject.
As the player continues to learn more about the world they will naturally fill out each entry, represented by the “Research Level” indicating how much the player still has to learn.
Entries are broken into Sections :
Overview, providing a general breakdown of the info the player has collected up to this point,
Key Information, which highlights any actionable gameplay information the player has learned. such as strengths and weaknesses.
Player Guilds
Guilds are player organized, persistent in-game communities. Guilds are able to easily communicate and plan their own play-sessions, enabling and incentivizing all types of players to benefit from Social Play.
Through the Guild experience; players are given the tools to self-organize and structure themselves into communities that reflect their identity and purpose.
Landing Page & Guild Management
⏷ Player Guilds
The Guild Landing Page is the primary location for outreach, coordination, creation and management of Guilds.
No two Guilds are the same, as every Guild is given tools to and is responsible for establishing their own unique identity and purpose in the overall community.
As it is a core part of the experience; there is a deliberate visual emphasis on Guild Identity - placing the iconography and members of the Guild at the forefront of all Guild related screens.
-
Designing for a Guild experience is truly an exercise in information hierarchy and management.
As the Game Designer - you’ve created a wonderfully rich and engaging system with a dense feature list and a deluge of elements for savvy players to manage.
As the UI Designer - you now have to layout and display all of this information in an easily parse-able and understandable format.
As the UX Designer - you must somehow maintain the player’s connection to the game world throughout this experience, while maintaining the usability of the feature.
There is a saying I like to keep in mind while I am designing : “Always keep the number one thing the number one thing.”
In this case, keep the focal point as the focal point.
For example if you are designing for a Guild, the Guild Identity is the focal point. It is the branding and the members of the Guild that make up the identity, so keep them at the forefront of the experience throughout - while avoiding bland and anonymous menus and forms.
The rest of the information should base its’ presence on its’ importance. Do not be afraid to obscure or minimize tertiary information - keep your most important info at the forefront and let the rest stay on the sidelines where it is still accessible for players that look for it.
Always reinforce to your players what is important and ground their actions in the game world.
-
A complex menu such as this becomes particularly challenging when designing for a controller first experience.
As modern day designers - we really take for granted the advent of a cursor. There are so many designs that “just work” with next to no friction when your players have access to a mouse. Being able to freely navigate the entire screen space at your whim is an extremely powerful ability, and one that feels very intuitive to modern day players.
When you bind your experience to a game controller, suddenly you have a major issue with focusing and highlighting.
A player using a control stick cannot freely highlight any element on the screen : It now becomes the designer’s problem to ensure the player knows exactly where they are highlighting and how to navigate to other elements they want to interact with.
Instead of having only one method of interaction to worry about (point and click) you’re now operating on a totally different ruleset with multiple methods of interaction (control stick movement, hotkeys, button combos & chords, hold interactions, etc).
That is of course unless you implement a cursor yourself, which has become increasingly common in console games. This certainly makes your life easier as a designer, but often doesn’t feel as effective on a controller as compared to traditional menu navigation.
Most players who play on console have strong mental models and muscle memory for how menu navigation works on a controller. They intuitively understand what a highlight state, disabled state, button prompt, etc. look and feel like due to their experience with other games. It is to your advantage as a designer to play into these expectations and make for an easier navigation experience for your players.
(After all, even if you do implement a cursor in your game your players will still need to use the console’s OS to get there - which all use traditional menu navigation!)
Social Feature : Guild Finder
⏷ Player Guilds
The Guild Finder allows players to search for active Guilds based on pre-selected criteria, and find communities that align with their interests.
Players are able to view all the information they need to know before applying to join, and can automatically match with an appropriate Guild if they are having difficulty deciding.
This makes it exceedingly easy for players to find like-minded communities, incentivizing cooperation and social play throughout the playerbase at large.
MMORPG Designs
Thank you for reading this far and checking out my work ♡
You can find my info and resume below ▼
Credits :
to thenounproject.com for just, a ton of icons.
to Diego Solas, Trendify, Canva, glowtxt.com for stock assets.