Reputation UI Redesign

Click an image to enlarge

My Role

UX Designer

Tools

Figma & Illustrator

Type

Self-Initiated

Duration

4 Weeks

A Mythic Challenge

THE QUEST

Players looking to collect rewards, complete achievements, or unlock questlines through reputations are hindered by the lack of in-game information and limited tracking options. Out of game resources are often required as a result.

A New Approach

THE REWARD

This redesign looks to solve these issues through a variety of features to better locate, understand, and gain insights on each faction and what they offer.

  • Search & Filter

    Allows the player to search by faction or reward name whilst providing various filtering options.

  • Track Factions

    This feature allows the player to focus up to four factions along with the traditional “show as experience bar” option.

  • View Rewards

    Organized by rank, the rewards of the faction are communicated to the player, along with a map marker indicating the location of the quartermaster.

  • View Standing

    Matching the current renown system, each rank is clearly displayed to not only allow players to view their current progress, but view the other rank’s information and rewards.

  • Additional Information

    Information that affects reputation with a faction is displayed. From increased reputation, at war status, and emissary rewards.

Potential Threats

CHALLENGES

When approaching this redesign, it was important to take stock of the constraints and challenges to not only be realistic in my expectations, but also successful in the goal of improving the UI of this feature.

Design

  • Remain consistent with other in-game interfaces

  • Game designer’s mechanics are clearly communicated

  • Incorporate all features and functions of the UI

Development

  • Features that can be reasonably implemented in the allotted time

  • A design that realistically works within the game engine

  • Integration with the game’s existing HUD and interface

Biases

  • It is important that accessibility is properly addressed

  • Value the perspectives of multiple player types and why they might interact with this feature

  • Separating my experiences as a player of the game

The Starting Point

CURRENT DESIGN

When approaching this project, it was important to account for the various features and attributes of the current design and features.

  • Faction information and description displayed

  • Categorizes based on expansion and subcategory

  • Emissary progress displayed as a hover state

  • Dragonflight renown displayed within interface

  • Shows a selected faction as an experience bar

The Renown System

The Renown system, added in Shadowlands, is the current iteration of reputation feature in World of Warcraft®. Contrary to the traditional UI, the Renown system uses a numerical level system to communicate the progress to the player.

This new system also shows rewards and future ranks, communicating progress more clearly and providing helpful information to the player.

While this is a huge improvement, the Renown system is only in practice for factions of Dragonflight and Shadowlands, leaving two very different interfaces and approaches for the same feature.

Along with this, I felt it necessary to speculate…

Why hasn’t the interface been redesigned?

While I am not affiliated, nor have ever been involved in the production of World of Warcraft®, research could lead to some potential answers to this question. I felt this was an important step as I could begin to understand the realistic constraints of game design and development.

I connected with professionals involved with various stages of the game design process from a plethora of studios to address this, here are the key insights:

  • With the UI overhaul introduced in Dragonflight®, time and resources may have been allocated to more high priority features.

  • Since the base design of the reputations UI has been present since launch, an overhaul may disrupt and overwhelm longtime players.

  • A complete overhaul of this interface could potentially cause the development to stretch beyond the project scope.

Azeroth has Spoken

UNDERSTANDING THE PLAYER

To fully understand how a redesign could benefit the player experience, it is worth investigating if a redesign is needed in the first place. After all, why fix what’s not broken. Who better to ask than the players who spend countless hours on this game.

Gathering feedback from a variety of players with differing playstyles and objectives is crucial to gaining a holistic perspective. Doing so can reduce the chances of skewed or biased data influencing the design.

This research was conducted through the following methods:

Surveys & Questionnaires

A form was created and submitted to various forums & Discord groups to gather quantitative data.

1

Player Interviews

A select group of players agreed to an interview via Discord to share their experiences.

2

Observation & Playtesting

Several participants, both in person and through screen-share, carried out a series of actions.

3

Making Sense of the Data

The research phase yielded unique and unexpected insights to help uncover the problem space.

This included…

  • 38 Survey Responses

  • 7 Interviewers

  • 3 Observation Participants

Each participant was asked to rank their primary reasons for interacting with the reputation interface. From this, various motivations could be formed to not only understand what types of players were recorded, but also what aspects shaped their overall experience with the feature.

The Marauder

The Marauder is a player seeking to complete endgame content, primarily Raiding, and Mythic+, aiming for a competitive edge.

43%

of participants

  • 71% exclusively or primarily interact with Dragonflight® Renown and Factions

  • 81% prefer the Renown interface over the traditional faction UI

  • 52% feel the UI contains inadequate faction information.

  • 29% often need outside sources for information on Dragonflight® Renown and Factions

The Collector

The Collector’s primary goal is to gather as many collectibles as possible. From mounts to pets, item appearances to tabards, this player seeks self-expression and customization.

35%

of participants

  • All of the recorded Collector players often interacts with factions from prior expansions

  • 88% prefer the Renown interface over the traditional faction UI

  • 95% feel the UI contains inadequate faction information

  • 88% heavily relies on outside sources for faction offerings

The Achiever

The Achiever’s initiative is to complete the many challenges Azeroth has to offer, primarily in the form of achievements, titles, and exploration.

22%

of participants

  • 91% of Achievers often interact with factions from prior expansions

  • 73% prefer the Renown interface over the traditional faction UI

  • 36% feel the UI contains inadequate faction information

  • 64% commonly needs outside resources for information regarding faction offerings.

A Missing Perspective

After the first round of player feedback was collected and analyzed, a key target audience was missing: New Players.

To account for this, a modified survey was shared in various forums centered around novice players, allowing this key player-group to share their experiences with the UI.

52%

found the interface somewhat to very difficult to navigate.

of participants

66%

expressed uncertainty regarding the purposes of the reputations feature.

of participants

73%

of participants

were unclear about the progression and standings for reputations.

Conjuring the (Brain)Storm

SUMMONING A SOLUTION

From gaining an understanding of the players, the two archetypes to regularly interact with the traditional interface are the Collector and Achiever. This research helped me paint the picture of not only what was missing for these players, but what aspects of the redesign were the top priority.

Areas of Focus

With a pen in my hand, and keeping the end goal in mind, I began brainstorming the primary focus areas:

  • Tracking: How players can easily access each faction and view progress.

  • Renown: How to harmonize both systems into a single interface, borrowing elements that resonated with players the most.

  • Faction Information: How the faction’s description, rewards, and other information are displayed to reduce the need for outside resources.

Brainstorming Through Primary Task flows

I’ve found that creating task flows to fuel ideation can be really helpful as it allows me to consider the user experience before beginning the design process. By creating the key task flows, I can begin to understand how these potential features work together to achieve my goal of improving the interface.

Click an image to enlarge

Forging the Design

INITIAL DESIGN

By creating the task flows defined from the user research, I can begin fleshing out the most important screens. Starting with hand-drawn wireframes, I gathered all the required features for each screen. Through many iterations, I combined the most effective elements from each into a single design. These were then translated into low-fidelity mockups to prepare for user testing.

Expansion Selection

I decided to go with a “breadcrumb” navigation style, modeling the adventure guide to create consistency.

Faction Selection

This screen is possibly the most difficult to execute, making it imperative to find a way to organize the factions in a way that is simple, yet structured.

Faction Information

Based on user feedback, a large portion of responses noted a resonance with the renown ranking style. To better unify the interfaces, this was applied to the traditional factions.

Putting the Design to the Test

After creating the initial design, I felt it necessary to validate (or invalidate) my proposed solution through two user testing sessions. I gathered various players, all under the Collector, Achiever, or New player archetypes, to perform a series of tasks while sharing their experience.

This led to a substantial overhaul of the original design.

➡️

This page was found to be unnecessary, as many users preferred the drop down menu. Most users had difficulties navigating back when wanting to change expansions, so I saw it best to display the expansion menu on the “faction selection” page". Although the “breadcrumb” style navigation is within certain interfaces in the game, it often disoriented the users rather than being a guide.

➡️

This page was received best by users, with only minor adjustments needed. Most of the issues that arose came from the navigation troubles, however, some needed guidance to find important indicators such as finding an emissary reward, or which reputations had a commendation (bonus reputation increase).

➡️

Most users found difficulty when looking to navigate to a previous page from the “faction information” screen, making the change in navigation even more important. This wasn’t something I considered, assuming users would know to click to the previous page in the “breadcrumb” nav bar. To reduce the number of pages, using a window expand would help users easily navigate to the previous pages.

From Iteration to Impact

MEASURING THE DESIGN

Leveraging findings from the testing phases, I established specific metrics to validate whether the new design adequately solved the problem space.

A mix of returning and new testers yielded richer usability data and a more comprehensive understanding of the design’s effectiveness.

Key Metrics

The Final Design

DELIVERING THE SOLUTION

The final design includes a variety of elements that were refined through the testing phases. This includes borrowed elements from the Renown and other World of Warcraft interfaces to create single, consistent design to allow players to efficiently use the reputation feature.

An All-In-One Solution

The integration of the Renown system was a tough decision at first, but learning from player experiences, made it much more clear. From the simple fact that there were two interfaces for the same feature, to needed to fly across the world to view Shadowlands Renown, consolidating the two was a great improvement to the user experience.

A Heroic Prototype

Recounting the Adventure

KEY FINDINGS

What an incredible experience this was.

It was not only my introduction to interface design within gaming, but it was also for a product and feature I interact with consistently. Despite my familiarity with the game itself, I learned much about the player experience.

What I would Change

  • As long as the project scope allowed, another round of testing could’ve pushed the design further.

  • Tackling what aspects of Renown could be improved, and how the redesign could benefit the Marauder player archetype.

  • Experiment with different design and prototype tools to take the project to a new level.

Next Steps

  • In a realistic scenario, the design would be ready for the UI artists and developers after approval, as the feature gets prepared for integration with the game client.

  • Break out into different: games, types of interfaces, and genres. This will help challenge myself to become a better designer.

Notable Learnings

  • Designing within a game is not done in isolation, changes are felt throughout the entire experience.

  • It is important to separate personal experiences when working with a familiar product.

  • Understanding the role and perspective of the Game Designer, and what that means as a UX designer.

  • Learning where friction is, and isn’t, needed in a game. With this type of interface, it is best to prioritize efficiency.