Modernizing Tibia: UX Redesign for the Customize Character Feature

Tibia is one of the longest-running MMORPGs on the market. Over the years, the game has continuously received new content, which has led to the addition of numerous new features requiring UI updates. When I logged in after many years of absence, I felt lost and realized that I would enjoy redesigning some of these features—if only for fun.

One of the key in-game functionalities that every player will encounter sooner or later is "Customize Character." This feature allows players to define their character's outfit, colors, addons, and mounts. Additionally, they can preview outfits they don’t yet own, including those available for purchase with premium currency.

‍I find the UX of this window somewhat disorganized—content is scattered, lacks proper grouping, and overall, the experience could be significantly improved.

‍

Analyzing the Current UX: Pain Points & Opportunities

The current UX is technically divided into six sections, but visually, there are many more. At first glance, there is a large preview area with its settings on the left. Below it, we find two groups that can be categorized as appearance settings. However, for some reason, these settings also contain toggles that affect a separate section on the right—the appearance list (where the displayed content depends on the active toggle in the appearance settings).

The overall structure feels disorganized, both in information architecture and element grouping. Appearance settings should be in a single, unified group, while settings related to the appearance list should be grouped within the list itself rather than mixed with other controls. This would create a more coherent and visually structured experience.

‍Beyond grouping issues, there are other usability concerns. For example, what is the exact difference between the "Copy (all)" and "Copy (colours)" buttons in the outfit color settings? Even for long-time players, this distinction is unclear, highlighting a need for better labeling and affordance.

Optimizing the Customize Character Experience: Key UX Improvements

Preview Settings

All preview settings are now grouped into a single, left-aligned column or (condensed into buttons within the preview itself). This creates a clear, structured layout, reducing cognitive load and allowing users to focus on customization without distractions.

Character Preview

The preview functionality stays the same, but the character is now visually centered, improving balance and focus.

Appearance Settings

Appearance settings are now merged into a single, well-organized panel instead of being split into two groups. This follows Hick’s Law, which states that fewer, well-grouped options reduce cognitive load and decision fatigue, making customization faster and more intuitive.

Presets now have their own dedicated tab within appearance settings, allowing users to easily save and switch between favorite outfit and mount combinations with minimal effort.

Outfits List

The outfit list is now categorized into collapsible sections, using Progressive Disclosure to reduce information overload while keeping navigation smooth and intuitive.

Additionally, addon visibility is integrated directly into each outfit card, eliminating unnecessary clicks. This follows Jakob’s Law, ensuring that users can quickly find information where they expect it, based on familiar UI patterns.

The "Show Only Obtained" checkbox is now placed below shop items, ensuring that purchasable content is seen first. This strategic placement leverages choice architecture to subtly encourage purchase consideration.

Clear View at the Redesigned Customise Character UI

CTA buttons now feature distinct colors and clear, action-driven labels, leveraging Color Psychology and the Von Restorff Effect to make key actions stand out. This improves user focus, engagement, and decision-making efficiency.

Seamless & Intuitive Purchase Flow

If a selected outfit is unavailable but purchasable, users can preview and customize its colors without leaving the Customize Character screen. A contextual purchase button is embedded directly within the interface, eliminating unnecessary navigation. This applies Interaction Cost Reduction, ensuring a seamless, efficient experience by minimizing effort, clicks, and cognitive load.

Opening the full shop panel when a user is going through the purchase flow via character customization is unnecessary and overloads the player's cognitive resources with excessive information. Instead, we can display a simple purchase confirmation that clearly shows the outfit price and the user’s available premium currency balance.

By reducing distractions and streamlining the process, this approach simplifies the purchase flow, enhances player satisfaction, and ultimately boosts outfit sales.

Before & After Grouping