Type of Project:
UI/UX Redesign of the game Atlyss
UI/UX Redesign of the game Atlyss
Project Duration:
~2 months
~2 months
Tools Used:
- Adobe Photoshop (Creation of Assets, Drawing and Painting)
- Adobe Illustrator (Specific Vector Work)
- Figma (Sitemap, User Flow, Wireframing, UI Design, Prototyping)
- Adobe Photoshop (Creation of Assets, Drawing and Painting)
- Adobe Illustrator (Specific Vector Work)
- Figma (Sitemap, User Flow, Wireframing, UI Design, Prototyping)
Introduction
Atlyss is an indie action role-playing game developed by Kiseff and published under the name KisSoft. It's a game I particularly enjoy playing due to its fun and responsive combat mechanics, as well as its nostalgic aesthetics, which resemble an MMO from the 2000s.
Atlyss is an indie action role-playing game developed by Kiseff and published under the name KisSoft. It's a game I particularly enjoy playing due to its fun and responsive combat mechanics, as well as its nostalgic aesthetics, which resemble an MMO from the 2000s.
However, after playing a few sessions of it both alone and with friends, I noticed that a recurring struggle was interacting with the game's UI. While functional, its design is unintuitive, inconsistent, and often unclear. Some friends of mine would struggle to find commonly used menus, and certain UI elements that served completely different purposes looked too similar.
As a regular player of action RPGs, I felt this was a good opportunity to redesign the game's UI and propose a better, more intuitive approach to the user interface, while giving it a makeover with an aesthetically pleasing art style that fits the game's theme and direction.
Redesigning the UI for a whole game would be an enormous feat, and completely out of scope for this project. Therefore, I prioritized the main screens related to single-player gameplay. The title screen and other menus were left out for the time being.
Identifying Issues
The first steps I needed to take in this project were to list down the tasks that needed to be tackled, then create a schedule based. For that, I needed to identify the issues I wanted to address. I played a couple of sessions of Atlyss to observe and write down what I wanted to address.
Here are a few of the issues I identified:
- Design Inconsistencies (multiple typefaces being used, buttons that don't look like buttons, etc.)
- Lack of clarity ON HOW TO ACCESS MENUS (no shortcut labels anywhere, and navigating from one menu to the next felt very unintuitive).
- Critical elements are too close to the edges of the screen, far from the focal area of the gameplay (quick slots with important items are too far from the focus area on the screen to be easily checked during combat).
- Unnecessary information cluttering the screen (we don't need to see how many items we have in our inventory at all times).
- Lack of clarity ON HOW TO ACCESS MENUS (no shortcut labels anywhere, and navigating from one menu to the next felt very unintuitive).
- Critical elements are too close to the edges of the screen, far from the focal area of the gameplay (quick slots with important items are too far from the focus area on the screen to be easily checked during combat).
- Unnecessary information cluttering the screen (we don't need to see how many items we have in our inventory at all times).
Although I observed other issues that could use some improvement, I limited myself to these, which I judged to be of higher priority over the others.
NOTES MADE ON TOP OF ORIGINAL HUD.
Research and Design direction
Now that I had a clear goal in sight, I began researching. I gathered all the screenshots I took of the game's UI and saved references of interfaces from other games for inspiration.
I also decided to define a solid direction for the visual aesthetics of this project, taking inspiration from Celtic patterns, materials and architectures. Considering the fantastical and bucolic theme of the game, I thought this was a fitting choice.
Information Architecture
For me to have a clear idea of what screens needed to be designed, I started by creating a sitemap of the game. Then, to know what elements needed to be designed and how, the creation of a user flow was essential to understand all the steps players would take to complete tasks in the game's interface.
Atlyss's sitemap for this project
User Flow
The user flow was essential for me not only to understand how players would interact with the game's interface, but also the scope of the project and how much I would be able to tackle. Some of the screens laid out in the diagrams below were not designed as they were out of scope of this type of project, but the main ones were finalized.
Below is a compressed version of the full user flow, showing the main screens and interactions. I'll be breaking them down further in this case study.
Compressed view of this project's user flow.
Overall Taskflows
Below are the taskflows for most of the interactions players would have with the game's interface during gameplay. Compared to the inventory, these taskflows are simpler, involving fewer steps.
Inventory Taskflows
Inventory management and loot are core parts of action RPG games. Therefore, the taskflows for this system are much more involved, containing far more steps than the other interactions. Atlyss has 3 different types of items, all with slightly different flows.
OVERALL USER FLOW
Here's a full overview of this project's user flow. These are only the main tasks that players would be handling in-game. Some other tasks were left out for scope reasons.
Overview of the entire user flow for this project.
With the information architecture figured out, I was ready to move on to some sketching. I started by wireframing on paper, exploring different layout ideas for the game's HUD and in-game menus.
I then moved on to Figma to create a low-fidelity wireframe based on the sketches I had done. Since a good chunk of the exploration had been done on paper, it was mostly a matter of translating it into a digital format.
HUD Low-Fidelity wIREFRAME
Inventory
Character Stats
Skills
Quests
Shop
Quest Giver
Concept Art
I wanted to make a hand-painted UI for this game, meaning that I took some time to develop static concepts of the interface in Photoshop, where I painted most of the assets used in this project. Many of the icons used in this project were taken directly from the game's wiki page, but some new ones had to be created, and others were redone from scratch due to low resolution.
I started with perhaps the most important element of the HUD, which is the central piece where the player's skills, health, mana, experience, and quick slots are. My goal was to take some creative liberties and align the design more with the design direction I established, while also trying to keep it close to the original idea.
Rough concepts for HUD elements
Final concept for central HUD element
(The HP and MP text was created through the modification of the "Nightmare Hero" typeface).
(Skill icons taken from the game's wiki page)
For the central HUD element, I made some significant modifications to the original layout. For starters, I incorporated the quick slots that were originally located at the bottom right corner of the screen into the top of the central bar, which should allow players to see the items they have in their quick slots more easily.
The other change I made was to move the level number right next to the experience bar to ensure natural mapping. While players could easily deduce that the number next to the health was representative of their level, the placement was odd. Placing it right next to the experience bar will ensure no confusion.
First Concept of the HUD done in Photoshop.
Initial Menu Concepts
Asset Creation
Most of the assets were created during the concept stage. When approved (by me), I would export the separate parts that compose that UI element and bring them over to Figma to add the final touches and make them into interactable components.
New HUD icons created by me. Most of them were redesigned from scratch, except the money bag, which was redrawn in higher resolution.
Stats icons. Most of them were existing icons redrawn from scratch in a higher resolution. The axe icon was completely redesigned, and the shield and skull icons were designed by me from scratch.
Attribute cards that appear when the player hovers the mouse over an item in their inventory.
UI Kit created in Figma to easily assemble UI elements and menus.
High-Fidelity Wireframe - First Version
At this point, I had all I needed to create a first pass of the high-fidelity wireframe. At this point in the process, most skeuomorphic assets were already done, meaning that building and experimenting with designs in Figma was faster than in Photoshop. This first version was essential to collect feedback from users.
First version of the new HUD
Inventory
Character Stats
Skills
Quests
Quest Giver
Store
Design Evaluation
With the high-fidelity wireframe assembled, I was finally able to start collecting some feedback. I conducted an A/B Test in the form of an online survey. In it, I placed the original UI of the game alongside my redesign and asked participants to choose which one they preferred. Of course, I did not inform them which one was the original and which one was the redesign I made. The test revealed glaring issues with my redesign that needed to be addressed.
While 70-85% of the participants preferred most of the new interface elements I have made, only 15-30% preferred the redesigned Inventory and Stats menus, with the majority sticking to the original.
The main reason was that although the new UI is generally more aesthetically pleasing, it was not as clear and intuitive as the original one.
Additionally, the vast majority of the participants pointed out that everything felt too big, especially for a PC game.
On the bright side, 85.7% of the participants thought that the new version fits the game better than the original, with ~85% preferring the new Skills menu over the old one, and 71.4% preferring the new Quests menu. That being said, out of the 28.6% of those who preferred the original Quests menu, at least half of them pointed out that their preference depended on the number of quests the player could have in the quest log at a time, which in Atlyss is limited to 5.
With those results, the next steps became very clear: I had to analyze and redesign the inventory and stats menus to be clearer, reduce the scale of UI components and the number of elements simultaneously on screen.
Changes to the inventory menu design. Based on user feedback.
Redesign process of the character stats menu based on user feedback.
High-Fidelity Wireframe - Final Version
A new wireframe was assembled based on the feedback I gathered from users and survey participants. Several changes were made, especially to the menus, which not only changed in design, but also in size. The big sidebar menus, although standard in action RPGs like Diablo and Torchlight, felt too overwhelming for this game. Therefore, I scaled them down and redesigned them to work as floating windows instead, giving breathing room around the components.
Additionally, I made a few changes to the HUD. I toned down most of its elements so it doesn't take away the immersion from the gameplay. I made the quests list on the left side less intrusive by removing the green banner and reducing the opacity of the backdrop to allow players to see through the list (and I also added the option of retracting it by pressing TAB in the prototype). The buttons on the right side that indicate the menus the player can access during gameplay have been reduced in scale and also in opacity, unobstructing their peripheral view. The health and mana bars were brightened up for better visibility, and the minimap has been updated to reflect the actual game's world more accurately.
New HUD with all elements on (minimal examples at the top of this page)
New Inventory Menu
New Character Stats Menu (each stat gets coloured while hovering the cursor on top of it).
Skills menu
Quests Menu
Shop
Quest Giver
Side-by-Side Comparison
Below is a comparison between the original UI of the game (Left) and the new, redesigned one (Right).
Original UI
Redesigned UI
Original UI
Redesigned UI
Original UI
Redesigned UI
Original UI
Redesigned UI
Original UI
Redesigned UI
Takeaways
This project was quite the lengthy one, but a fantastic opportunity to learn more about UI/UX Design for games, especially for those with hand-painted assets and action RPGs. Going through a project like this makes it very clear which approaches work and which ones don't.
In this project, I have confirmed that starting by figuring out the information architecture of the game helps to determine the scope of the project, takes less effort than starting to design UI elements, and saves tons of time later on. This is not the first project that I started by figuring out a sitemap and a user flow before moving on to the visuals, yet it confirms this feeling I've been having.
In this project, I have confirmed that starting by figuring out the information architecture of the game helps to determine the scope of the project, takes less effort than starting to design UI elements, and saves tons of time later on. This is not the first project that I started by figuring out a sitemap and a user flow before moving on to the visuals, yet it confirms this feeling I've been having.
During the process, I ended up designing ineffective and unappealing UI elements, and for these moments, a design evaluation process and user feedback were fundamental to the improvement of the user interface. Every time I suspected something was off, or I wasn't sure which version was the best, I turned to the community to ask for their input. The creation of a survey comparing the original version to what I had initially done was even more valuable, as it put a spotlight on bad decisions I had initially made, getting carried away with putting more stuff in menus when, in reality, they needed less.
It also made me realize certain design conventions that I can take to life. Although it's standard for most action RPGs I've played in my life to have sidebar menus that go from edge to edge vertically, most of the ones I played were from a top-down perspective, which feels a lot less limiting and claustrophobic than from a behind-the-back third-person perspective. It also became clear how UI elements attached to the edges of the screen can be uncomfortable for players, which led me to change the menus to floating windows instead. I assume that's due to the tension that's created by the tangents.
I also learned some valuable lessons in collecting user feedback with this project. Reducing the number of steps to get to a survey and the time it takes to complete it brings more participants. The more lengthy A/B test survey I made with Google Forms garnered far fewer participants than the multiple one-question polls I hosted on Discord and WhatsApp. There were no links and only one question to answer. There was absolutely no friction, and completing it took just a couple of seconds. I intend to explore this method of research further in the future.