Redesigning [Lord of Heroes] UI/UX — a Game UX case study

Choo Sooa
12 min readApr 24, 2021

--

Brief: Based on my experience as a novice user and interviews on LOH(Lord of Heroes) expert users, I came up with a prototype that makes core gameplay more seamless. I surveyed LOH players about it on Twitter for a week. I present here overall UI/UX enhancement with its current design and an improved prototype.

Note: Even though it is important, Official Clovergames cares less about [Character collection] and [Turn-based RPG combat]. As a UX designer, I tried to help my LOH playing friends and “Chrome”(one of LOH Heroes).

*This article was first published in Korean; 1/2▶, 2/2▶

“ I started with 1,000K points of ‘Renown’”

I have some friends who have played LOH for a long time. Though they love characters, sometimes they complained and talked about some unsolved issues, which is normal.

I started this game because LOH won the grand prize at Korea Game Awards 2020 and that, Clovergames provided “1,000K points of Renown” to each player, a significant resource in LOH. Moreover, I thought it was a great chance for qualitative research as a UX designer.

Sooa Choo

I primarily work in Game UI/UX Design, working at…

MMORPG live services(2),
Redesigning overall UI/UX of an MMORPG (1),
Designing overall UI/UX of a PC MORPG(PVE) (1)

Design process

*The survey is a personal side project that it has a longer timeline compared to other UI/UX studies.

  • 7d — Qualitative exploration as a UX designer
  • 3d — Usability test at expert players (3) — focusing on UI
  • 14d — Organisation of issues
  • 21d —Proposal and prototyping
  • 3d — Article and Survey

Problem

Lord of Heroes is a game where you can enjoy “strategy RPG” and “Character Collection”. The game has simple battle tactics and presents few features because it launched last year. (March 26, 2021) “Novice players” found the gameplay hard to learn, and “Expert players” have been using tactics features in a complicated way.

  • Hard to check information of hero, and difficult to recruit and grow
  • Difficult to check heroes decks, weapons, and status through routine battle experience
  • The most appealing point of LOH is [Characters], but at the same time, the related functions are unsatisfactory.

Goal

  • To make players focus on the growth of heroes and strategy for battle.
  • To make heroes more attractive, and encourage players to collect more of them.

Proposal

If found issues are well solved, LOH might get higher retention of [novice players], lower negative opinions from [expert player], and higher transaction rate in the shop.

  • To remove any uncomfortable process or expression difficult to understand except the strategy factors
  • To offer convenience and appeal points for target player of [character collecting genre]
  • To deliver information efficiently in every section of game UI

“About LOH, Records of 7 days”

Records of Early section (7d)

201118–201124

I wrote 7-day play experiences and satisfaction and found expected issues in the early section. If you want to read detailed diaries, please go to notion pages(kor).

Profile of RASILL

Quantic Foundry classified over 500k gamers based on 12 gaming motivations. They offer a free test.

Records

  • Playing LOH 1–2h/a day during 7-days
  • Daily records of Satisfaction degree(0 to 10) and retention of playing
  • Thoughts while playing

Emotion Curve

After analyzing the data for 7-days, I realized that satisfaction and retention of playing declined, when it is hard to set goals and to find ways to grow heroes.

After 7days of play…

Satisfaction 6/10, retention of playing O

  • I found characters highly attractive compared to other games of the same genre, and the gameplay was plain.
  • As the LOH community around me has rich resources and is very active currently, it helped me to carry on playing a game.
  • Essential information for tasks wasn’t delivered in time that, I had difficulty in setting goals for continuing to play. And I am confused with ways of raising heroes.

Heroes were as fascinating as I heard before, and the gameplay was funnier than I thought. However, UI delivered simple game rules confusingly. Also, it interrupted the formation of a mental model about entire contents in LOH.

Whether they are games or apps, early- and late-stage can be always different by the level of learning and experiences of players, and considerate design examines both of them. Even as a Game UX designer, I couldn’t learn routines experiences for longtime play and core-gameplay because I was a novice player.

So I planned to kidnap(?) Expert players.

My target was RABBIT PRINCESS of LOH (A famous meme of Korean gamer)

“The people who know LOH best are Lv.2000 RABBIT princesses”

In addition to UI, the game is a mixture of the world, diverse gameplay, and economy. Sometimes designers remove UI for the immersive experience.

However, regardless of these design intentions, players should control the UI to complete many complicated tasks on the restricted mobile screen. If designers modify UI to be easier and clearer, players can enjoy fast the essential fun of the game, without any interruption.

As a UI/UX designer, I concentrated on exploring routines and pain points from expert players around me. I asked them mainly about when and what functions they felt uncomfortable with.

User Profile

There were lots of expert players around me who have been playing since right after the launch. I set the [Standard properties of players] by talking with them before the test. I succeeded in kidnapping them for a few minutes.

Point to remark — Player 2(P2) and Player 3(P3) usually do not spend time and money on mobile games.

User Interview

I interviewed a bit longer than normal research, since I could ask about every detail, making the most of having friends as testers. It could be demanding, but fortunately they enjoyed the interview. One of the reasons might be their affection for LOH and Clovergames.

  • Usability Test focused on UI/UX — 3 hours
  • Date: P1 (20/12/02), P2 (20/12/04), P3 (20/12/05)
  1. Daily routine
  2. Usage pattern and appeal/pain points by page following their routine
  3. Overall opinion

User Journey Map

When novice players get used to LOH, their play pattern becomes similar to that of expert players. After compiling their routines, I visualized a user journey map of general experts*. I wrote only tasks here (for the sake of time).

  • A journey map is a visualization of the process that a person goes through to accomplish a goal. (source)
Routine from P1 / P2 / P3
[LOH Core user’s Journey map] from mentions

Affinity Diagramming*

Besides, I deduced the main issues from the mentions I collected. What difficulties do experts face in what UI during their journey?

To find answers, I arranged all the voices depending on the context. There were many remarkable data, but I selected those which are mentioned at least twice considering the length of the article.

*Affinity diagramming in UX is used to organize research findings or to sort design ideas in ideation workshops

—All testers were attracted to heroes and stories.

—Controlling heroes tactically was interesting, especially in the raid(Calamity’s cradle) and the obelisk.

  • Compared to other resources, gold consumption was the highest, so its supply was important in routine. As a result, the gold value seems high, the price of items in the shop seems overpriced.
  • An app is slow and heavy, making crashes and overheating.
  • When bought heroes, evaluation from the public and performance such as skills are important.
  • In general, players checked information they needed toughly and uncomfortably on the Heroes page. They were confused about alert systems(ascension, notification mark), hardly found heroes they want(Sorting), and got insufficient information on the pages(status, equipment, skill, and hero rating).
  • Players needed several functions for heroes and stories. (Such as lists of voices and skins, dialogues in the obelisk and new events)
  • Players set different squads and equipment in battles depending on the contents. But LOH has no [preset function] so that players should have a long journey to go to the heroes page when they want to change equipment.
  • After updating the Alliance raid, players assumed that they get a higher contribution rate when they killed the middle-level monsters rather than the high-level. (Unfair to high-level players) They still couldn’t learn ‘duplicate participation’ and searched manually ‘start intention’ and raid history in the chat system. (Except for this, the usage rate of the chat was low)

Direct Key Quotes from Players

“I can get these four items in just 10 seconds, but earning 18,000 gold is so hard. I think the price of items in-game is inappropriate…”

“The heroes page needs to be changed. It’s not good from the start.”

“(In the heroes page) These buttons have no meaning. No detailed information about what I need here, they are just for decoration.”

“Usually I joined raid actively, changed each equipment of hero according to each raid and auto-battle. I have to go to the lobby, through almost three pages, and even screen change is heavy.”

“This is the most interesting part. Sometimes I changed heroes because their element was the counterpart to a raid monster. Well, Changing equipment is annoying for me, but some guys do that. That’s the normal play.”

“(In the Obelisk) I hope to see sub-stories of heroes here, but it doesn’t show. Many people will be satisfied with just a single line of dialogue.”

Others organized with Excel (375) / Only an image

“It’s time to solve”

I used Adobe XD because of limited time / (source)

The user experience for each learning section is different. Thus I explored issues as a novice user and interviewed expert users to find usage patterns and appeal/pain points.

It means I gathered all ingredients.

Design principles

A good list conveys all contents of the book easily. A good structure of UI/UX teaches simply all the contents of the game.

It means that wherever players are they should learn the whole contents without any difficulties, and eventually reach the usage pattern of experts in an efficient way.

  1. Seamless integration
    Does every gameplay connect seamlessly?
  2. Easy understanding
    do they have good Learnability and Memorability?
  3. Efficient Playing
    How fast did they achieve the whole task?

References
*10 Usability Heuristics for User Interface Design / nngroup
*Usability 101: Introduction to Usability / nngroup

LOH Prototype

I spread my prototype with the google survey through Twitter to get responses from players. (Period is expired at Feb 08, 2021)

You can go anywhere, the image doesn’t show every page of the prototype.

Prototype survey

  • Date: Feb,2,2021 — Feb,8,2021 (A week)
  • Target: (KOR) LOH players
  • Place: Twitter (I figured out that many LOH players are on Twitter because UT(Usability Test) mentioned a Twitter account that announces timely products of the Mystic shop)
  • Num: 788 (After data cleaning, 725)
  • Possible to have sampling bias in data.
  • As a personal study, I did not receive any IDs that can identify players. At the same time, this means some data below might be inaccurate.
  • When I published on Twitter, I got some negative feedback for the first 2–3 hours from a few LOH players who misunderstood that rebuilding UX structure is a copy of UI graphic design. It made some negative impacts which led to spreading the survey ironically.
Response by date

I removed careless responses like [zero standard deviation] or [Non-profile]. It didn’t affect the result.

Careless responses

Overall satisfaction — Improved across every level section

Reactions from users were hardly positive because the usage of UI is related to habit. through its simplistic and limited interaction, Adobe XD is great for presenting blueprints in a short time. It is a bit far from the actual control.

Nevertheless, overall satisfaction improved. I assumed many players have been using UI functions uncomfortably.

Basic summary from Google survey (Before data cleaning)
Overall satisfaction / Average

Satisfaction in each level section is similar. An inconvenience that players felt might not be related to the learning curve, because I added several functions that expert players want from research.

Only the 21–29 range varies; players can get the purple label at level 30
It’s no wonder that the more satisfied, the more negative people are against changes

Improvement and Reaction in each context

— I compare here only the screenshots that have remarkable change.

  • Satisfaction of every context except main and lobby significantly increased.
  • The main page of the prototype doesn’t have a big change since I added just a few buttons. Declining satisfaction of the lobby is caused by a trade-off between immersive design and functions.

Main, Lobby, Setting

“Formation of a quick mental model and flexible usage throughout the game”

Main —Convenient functions like Setting and Account link and prevention from cell phone overheating

Lobby—All-buttons-in-one-screen without scrolling for convenient control and a quick mental model
Shortcut Menu — Access to all the contents from anywhere
Preferences — Grouping of similar contexts and use of proper UI components

  • Scrolling is hard to find information and uncomfortable, though it gives exploration and immersion. Suggestion of [interaction with heroes] or [camera dolly in(out)]

Heroes

“Provide usability for target players of character collecting games”
“Improve for easy tactical consideration”

Heroes — the Most important page in LOH

  • The difficulty of raising heroes — Heroes list, status, equipment, and skill page
  • Though already have contents of collective elements about heroes, LOH does not provide contents nor provide in an uncomfortable way — Skin, Voice and Video list / Hero rating and Preset
  • Decrease depth to each information

Battle—World, Area, Ready, Alliance raid and Coliseum

“ Improve for easy tactical consideration for battle”
(Not remove intentional obstacle
)

Ready to battle — Preset for the formation of heroes and equipment
Alliance raid — Mark concurrent entrance
Auto battle — Add more HUD components

ETC

Provide enough information or convenient functions”

  • Alliance shop, Mystic shop, Alchemy(+Craft), Shop and Player info — Improve layout for getting more information easily on one page, group similar contents for easy understanding
  • Questline — Access to anywhere to motivate the play and improvement of the readability of the list
  • Documentation — Addition of images and grouping of similar contents
  • Result pages after the repetition of auto-gameplay — Players should interact with buttons because the Rewards are results from their actions.
  • Chat, Setting — Remember the last chats and settings of the same account because they are related to their daily routine
  • Put pop-up before converting to external apps (like internet community)

Post-mortem

I drew favorite heroes of P2, a real lover of LOH
  • I appreciate lots of answers I received, though it was a personal study. I could get more than 80% of responses in 22 hours on Twitter RT, Medium traffic, and the survey.
  • I should replace short-answer questions with multiple choice. I did not analyze a total of 1,172 responses because of the quantity.
  • Always think about Where the trade-off between function and immersion. Online games are long-term services, have lots of accumulated features and the circulation of players.

Reference of article structure is Redesigning the New York Times app — a UX case study.

Thank you for reading.

Twitter▶
Behance▶

--

--