EverPlanet Redesign
Role
UI/UX Designer
Duration
August - November 2024
Project Size
1 member
Type
Personal Passion Project
Background
A personal passion project importing Nexon’s MMO RPG game EverPlanet, from a PC interface to a mobile.
EverPlanet was a Korean MMO RPG game with a loyal following of players aged 13–18. This is a demographic that skews heavily toward mobile platforms. With 67% of U.S. gamers playing on mobile and a $246B global mobile market, the case for adapting EverPlanet's role-selection screen to mobile was clear.
Something to Note
All character artwork and visual assets are sourced from the original game and are used for UI design purposes only. This project focuses on layout, interaction design, and visual hierarchy rather than asset creation.
I translated all in-game information and EverPlanet related research from Korean to English, as the game was not available to play in English. This introduced me to a new set of challenges that I found development in, while spending more time on this project.
Introduction: EverPlanet's Background
EverPlanet was a Massive Multiplayer Online Role Playing Game (MMO RPG) created by Nexon Korea, running from 2010 to 2017. Like other MMO RPG games, EverPlanet allowed users to create characters, select roles, complete quests, and interact with other players. EverPlanet took a refreshing take on standard MMO RPG designs by incorporating a 2D character models with a 3D landscape. With this unique offering, the vast amount of users were teenagers aged 13 to 18.
With the game’s younger audience, a feature that many complimented were the simple and colorful user interface designs. Expanding its servers from South Korea to Japan and Thailand, the game hinted at the potential for global sucess.
EverPlanet featured a vibrant color scheme, cute avatars and simple UI layout that appealed to a younger audience.
It is evident that creating a mobile platform for a video game can be highly beneficial, especially due to the largest audience of gamers being mobile users. By leveraging the accessibility and portability of mobile games, EverPlanet could have reached the wider public and sustained its growing popularity.
End of Service in 2017
However, EverPlanet ended its service in 2017, marking a surprisingly quick end to its service despite expanding to multiple servers. One possible method of expanding to a greater audience could have been an adaptation to a mobile platform. Such decision might have targeted the increasing popularity of mobile games, particularly among younger players.
Global Game Market by Platform, 2022
Mobile games in the market had the greatest percentage
245.99 billion dollar market for mobile games
Platforms Played among U.S. households
67 percent of users are mobile gamers
Followed by 53% for PC, 36% for console
Research
Potential Problems: PC to Mobile Adaptation
However, transitioning an interface from a PC version to a mobile introduces new challenges. Mobile devices having smaller screens and touch based input can lead to various design dilemmas, shifting away from its original PC design.
Limited Screen Size and Resolution
With the limited screen space on mobile devices, designs need to be simplified
Limited to Touch Screen Interaction
Relying on touch input, user feedback options are limited
Navigation Challenges
Intricate navigation features and small buttons are difficult to press
With these potential problems, each design decisions must prioritize simplicity and convenience. Highly detailed interfaces on mobile screens can overwhelm users, especially in video game screens where new users may struggle to understand both the game mechanics and user interface. Balancing between the showing of critical information and maintaining a clean interface is critical to ensure a positive user experience.
Interviews
To better understand the real-world challenges of mobile game interfaces, I conducted interviews with six individuals—both gamers and non-gamers— aged 13-20. This young demographic was chosen to represent the EverPlanet player base.
Among the six individuals, I interviewed a 13-year old gamer with prior experience in mobile games. I asked the following questions to better understand their experience and uncover potential problems when playing mobile games:
When playing mobile games, do you encounter instances of clutter or confusion in the interface that may hinder your overall experience?
In terms of first impression of game’s designs, do you prefer aesthetics or ease of use?
Are there any specific mobile interfaces in games that you wish were added or improved?
Interview Takeaways
“I’d rather play games that are easy to navigate because I might uninstall instantly if the first impression is bad.”
The interviewee emphasized how create-character screens should be simple rather than cluttered with information, especially because this is the first screen that users encounter. With mobile devices lacking space compared to computers and tablets, the priority of clean flow and minimalistic layout is a must.
“Information should be introduced one at a time to avoid confusion.”
While playing games like MMO RPGs, the interviewee usually goes into games based on the character stats and abilities given. In terms of characters with a large background story, they would prefer information to be shown one at a time so it doesn't confuse new players like them.
Research
It is crucial to consider the demographic of EverPlanet users . As mentioned before, the colorful and simple game interface appealed to a young group of users, rather than adult users.
https://www.dt.co.kr/contents.html?article_no=2009091102019922733001
“If ‘MapleStory ‘ is a game for not only children but for adults, I wouldn’t be over-exaggerating if ‘EverPlanet’ was solely targeted towards a younger audience pool.
Although some adults may find enjoyment in playing EverPlanet, every aspect of the game was created for the eye level of children, so the fulfillment of gameplay for adults is obviously not satisfying”. - Review of EverPlanet from 2009, Pre-Beta
EverPlanet was often compared with a game, MapleStory, which is a popular MMO RPG game with similar features.
EverPlanet: create character screen
Maple Story: create character screen
Both EverPlanet and MapleStory’s create-character screen consists of:
Bold letters that are easy to read
Vibrant colors that catch the user’s attention
High usage of character artwork
Large buttons that are easy to distinguish
Create-character screens are the first interfaces users are introduced when playing MMO RPG games.
Features of "Create Character"
With that in mind, well made create-character screens are necessary for making a positive first-impression of games. I focused on designing a specific part of this process, the role-selection screen. Based on my research, the following are features of role selection screens for MMO RPG games that are necessary:
Name of the character role
Description and lore of character roles
Stats ratings (ex: difficulty levels)
List of Abilities
Conclusion After Research
With EverPlanet’s service ending, designing a mobile adaptation of the create-character screen to catch the attention of younger audiences and expand the platform to a wider pool of gamers was appealing for this project. Knowing that this interface would be the user’s first impression, I had three main goals when designing.
Maintain consistency with the PC's aesthetics and designs
Optimize for the limited space in mobile platforms
Provide clear and efficient user feedback
Design Goals
I had three measurable goals for every design decision.
Reduce the cognitive load for new and first time players.
Ensure that active and static elements were clearly distinguishable.
Ensure the visual identity of the PC interface, while maintaining a smaller viewport for mobile.
Style Guide
Fonts
Font: Inria Sans
TITLE FONT (Bold)
40 px
SUBTITLE FONT (Bold)
18 px
CONTENT FONT (Bold)
14 px
Color Palette
Design Iterations
I started off with two different iterations of the role-selection screen. My wireframes designs heavily referenced the interface already created in the PC version.
I decided to move the role description under the role title, to make it more consistent. This second design iteration was easier to follow.
High-Fi: First Draft
With the second wireframe to base off of, I created my very first Mockup.
I displayed the various role options, role name, story of role, stats rating, abilities, and evolution phases in this role-selection screen.
First Draft Feedback
Surveying a pool of six gamers and non gamers aged 13 - 20, I received the following feedback:
The highlighted border around role name and description seems unnecessary
Hard to understand what the four (ability) icons mean without a heading
Different sized boxes look awkward and out of place
Character artwork on the left seems out of place
High-Fi: Second Draft
Along with the feedback received, I created the second mock-up of the role selection screen.
Second Draft: What I've Changed
Users feedback from 6 participants (ages 13-20) revealed two critical issues: interactive elements weren't distinguishable from static ones, and the boxed sections added too much noise.
I resolved them by adding yellow highlighted states for interactive elements and adjusted the box size to match other UI elements for less noise.
Regarding the pictures:
Changed the order of the abilities and stats rating
Added a heading for the skills tab
Adjusted box size to match skill icon sizes
Other features I adjusted:
Changed the background to fit the “EverPlanet” color scheme of green and blue
Removed the yellow border around role description
Added a white border around character artwork
Second Draft Feedback
Features are easier to follow.
Better readability with the new gradient background.
Boxes look like buttons you can press, but they’re not.
White border around character art looks awkward.
Too many boxed sections that are unnecessary.
How do you distinguish features that are interactive versus not?
High-Fi: Final Draft
My final draft of the mockup took into more details and interface feedback into account, as well as readability and scaling.
Final Draft: What I've Changed
Increased and matched the sizing of the heading to the box below, so it is easier to press on mobile.
Buttons are now bordered and highlighted yellow when option is selected for better feedback.
Reduced the amount of character lore to reduce cognitive load.
New users are more focused on in-game playability rather than the story.
Removed “Hero” label to minimize repetitiveness.
Created even boxes for Evolution Phases and Skills
These buttons are interactive
Got rid of white boxes bordering attack, durability, difficulty, and range
The white boxes made it seem like interactive buttons
Adjusted the skill rating icons to all stars for consistency
Selected Evolution Phase is highlighted yellow
Increased character artwork
Got rid of white box
Changed design for Confirm Character button
Final Prototype
Interactivity
There are various features that are interactive including the role type heading, role type, evolution phase button and skills icon. When selecting each interactive feature, yellow borders and highlights the selected state. After selecting a skill, a brief description is shown.
Prototype
Watch the demo or click around to explore the role-selection screen!
Conclusion & Impact
What did you learn?
During the process, I learned how to independently conduct research and design, without feedback or assistance from teammates. Working independently on this case study pushed me to pay closer attention to small details and approach research with more precision. On top of that, conducting all research in Korean challenged me to translate only the necessary information in English, and precisely choose words that fit the original description (ex: when adding them to the role selection screen).
What would you do differently?
When creating initial sketches and wire frames, I wish I made more variations and surveyed individuals based on this design, instead of jumping to high-fidelity designs. This way, I would've focused more on planning and refining rather than editing the finalized high-fidelity mock-ups. Thus, I wish I researched more on what individuals thought on the original PC EverPlanet design, to get a better insight on what to adjust to my mobile designs.
What were the obstacles?
The biggest obstacle for me was making design decisions based on the limited number of reviews of EverPlanet during its time of service. When researching, I noticed that most user reviews had feedback regarding solely gameplay and meta, instead of game UI. Additionally, the amount of reviews were small, since EverPlanet was not a widespread game. This made it extra difficult to conclude design decisions. Thus, translating written content from Korean and English took me extra time to ensure that all information was accurate. Balancing this case study with the complexity of translation was quite challenging, but it made this project extra rewarding at the end.
Impact & Outcome
Across the 3 rounds of iteration and feedback that I conducted across 12 participants, the final prototype resolved the usability issues that were brought up during earlier iteration rounds. This redesign project showed that a once complex character-selection screen's flow, usually build for large screens, can be adapted for mobile as well without great sacrifice.