ux + ui + interaction + motion + visual design • art direction
year: 2017 • project length: 1.5 years • platform: ios/android/pc
Crusaders of Light is a cross-platform (PC, Android, iOS) massively multiplayer online role playing game that was originally developed by Netease Games in China. It was wholly localized and then customized for the Western markets at Netease North America in the San Francisco Bay Area.
I was the sole UX designer for the product up to and through its release in the West. I was responsible for high-level feature design, localization and copy writing, visual and interaction and animation design, art direction, and implementation. After a successful launch, and many live-operations improvements and updates, I hired, mentored, and trained a designer, to whom I was then confidently able to hand off the project.
Problems to Solve
• Fully localize a foreign MMORPG with massive amounts of visual content, interfaces, dialog
• Streamline and improve first time install experience
• Improve IAP conversion rates
• Adding features for user retention
Process toward Solutions
Of primary concern was localization. Crusaders was already a hugely popular hit in its native country of China and with content constantly being iterated upon and added, there was always translation work to be done. From a designer's standpoint converting Chinese text strings into English can be challenging due to horizontal space constraints - a lengthy proper noun or concept in English is often but a few characters' width in Chinese. As such, considerations and adjustments to the existing interfaces were often mandatory just to get things to function and look right. For instance abbreviated labeling and text was used when space was at a premium.
Abbreviated icon labels
Another challenge to localization was the sheer quantity of art assets that required having baked-in text translated. Crusaders featured a lengthy and complex game world replete with its own lore, and there were thousands (upon thousands) of fiddly little graphics that needed to be tracked down and manipulated in Photoshop. There were also many larger scale items that required special treatments, as seen below in the world map and this mysterious scroll.
World Map
Mysterious Scroll
Localized text effect [animated]
One of the first areas targeted for improvement was the first-time installation experience. The original Chinese version of the app required the immediate creation of a dedicated account through Netease's online services before play was allowed. We decided against funneling players through a unique account creation step, knowing this would lead to user drop-off, and instead opted to offer support for Apple Game Center, Google Play, and FaceBook to be able to quickly and easily onboard the largest cross section of mobile players.
Additionally we offered a binary choice between 'New Player' or 'Sign In' at the start, thus allowing players the chance to dive right into the game without the friction of first having to sign into a game service. We then would surface a dialog to sign in after the first time user experience and tutorial mode was completed. Also a prominent Sign In icon was placed in the main UI which would remain until the player eventually connected a game service to save their progress.
First-time install flowchart
First-time install user's journey
When we inherited the game to bring to the Western markets, the most popular in-app purchases came in the form of item bundles. These were set groupings of premium in-game currency and other desirable items, often rare mounts or items needed for crafting elite items.
The key problem with the existing system was its dependence on overseas designers and developers to establish, code, and create artwork for the bundles. These groupings of items were designed for Chinese players in mind, and the data showed higher conversion rates of high-value purchases from those players compared to our players.
Being tethered to localizing their pre-designed packages made experimenting and optimizing sales impractical and slow. In terms of development, additional designer resources would be needed to localize and repurpose artwork, which in turn was bulky in file size requirements as a stockpile of these packages grew over time (as seen below).
Examples of original sales bundle [animated]
Working in tandem with our data team and game designers, we designed and implemented a new modular, easily modifiable, lightweight system to address these issues. Using existing in-game resources I designed an animated (versus the previously static) presentation that offered our players the power of CHOICE in their buying tailored to their style of play. Using on-the-fly analysis of game milestones and other data points, we could determine what items would be most useful to players based on the amount of time they had been playing, their progress, and other criteria. The new system also used time as a factor to incentivize desirability of sales as they would always be limited in availability. Another added benefit was using existing interface motifs and design language to explicitly outline the contents of the bundles and allow players to view in detail what they would get for their money.
New sales system offered players choice and detailed buying information
Easily themeable for holidays and events (art credit: Emma Wang)
Specialty treasure chest artwork I created for use in new sales bundle system
As a direct result of the implementation of the redesigned bundle system Crusaders saw a substantial growth in conversion rates and ARPDAU. From the period of introduction from April to when I left the project in December the pay rate increased from below 1% to as high as 5%. Similarly the ARPDAU jumped from $0.13 to $1.29. Other major wins included the infinite ability to experiment and optimize sales, endless variability versus a fixed amount of offerings, reduction of application package size, ease of styling interfaces for special events and holidays, and superior utilization of designer man hours.
Pay rate
Average Revenue Per Daily Active User
To improve player retention, we designed and introduced a recurring subscription perk. The Elite Goblin Club provided a daily stream of premium in-game currency, along with buffs, or upgrades, to players' characters allowing quicker progress among other perks. To visually make the feature stand out, I added animations and visible indirect control in the form of a glowing bureau to generate a sense of discovery and then access to an exclusive club. Members of the club would also receive a custom title other players would see in their profiles, incentivizing exploration and discovery of the feature.
Elite Goblin Club feature
Achievements UI
Settings UI
Outcome and Lessons Learned
Crusaders of Light enjoyed a well-received and fairly pain-free launch and was even featured on the Apple Game Store for a time. We had a large pool of players, and, at the time, featured fairly groundbreaking cross-platform technology with the addition of PC users logging in through FaceBook arcade.
Being involved in such a large-scale translation project was a first for me and was an invaluable learning experience. We discovered early on the added time needed to be factored into our production cycles to accommodate receiving translations from vendors which were then handed off to a dedicated story writer whose job it was to tie together a vast and often complex mythology. Being a bilingual student of games and the fantasy genre was also a tremendous boon for me on this project. I was able to serve as a bridge between developers and studios alike both home and abroad, and was often able to provide sensible translations and tweaks to confusing material from external translation services.
Having a hand in such a noticeable improvement in conversion was a vindicating outcome of our design decisions and confirmation of our hypothesis: implementing a system that provided goods based on individual needs versus broad strokes to cover many bases.
A recurring technical hurdle we encountered was the integration or merging of new game content from the overseas developers. Our domestic team was scrappy and small (with fewer than 20) compared to the manpower in hundreds of the original Chinese devs. Frustratingly the data merging process needed to be handled manually, and frequently a lot of our customized changes would be overwritten in the process. This necessitated unexpected bonus all-hands bug checking and fixing sprints whenever significant updates were slated to come online. This required integrating very detailed logging, checks, and then double and triple checks of modified and localized content, particularly when it came time to be able to successfully hand the project off.
As a personal treat I was able to have a premium player mount named after my house cat Hashi (ᵒᴥᵒ)
Actual Hashi in the wild