War Dragons:
Interaction Design
Overview
"War Dragons" is a 3D real-time strategy game powered by the Mantis Engine, aiming to introduce a new MMO PVP feature with time-limited events. This feature adds a unique gameplay mechanic compared to the core War Dragons experience, requiring guidance to ensure users seamlessly integrate it without feeling it's a separate game.
My Roles:
Product Design
UX/UI Design
User Research and Testing
Deliverables:
End-to-end User flows
Wireframe & High-fidelity UI
User testing report
Prototype
Years:
2015-2021
Why did the team want to do this
Based on competitor research, the team learned that a high social interaction game feature is key to driving user excitement and extending the game life cycle. Therefore, the team aims to establish a web-view platform with an MMO PVP feature to enable users to engage with each other.
The Challenge
Visually, when compared to other features in War Dragons, this feature appears distinct, resembling a different game. Our goal is to provide the same in-game experience on the web-view and ensure visual cohesion.
Cohesiveness
The UI employs various interaction models, leading to potential disorientation for users. Additionally, many functions seem overly complicated from the user's perspective and should be simplified for a more intuitive experience.
Consistency
There is an abundance of information without proper grouping, making it challenging for users to find what they need within this game feature. Streamlining the information presentation is essential for an improved user experience.
Clutter
Goals
Successfully develop the web-view feature with high user retention, then the product team can iterate on the game feature weekly without needing Apple's approval after each submission.
Design a web-view UI template capable of showcasing weekly events and seasonal reward progression.
Design a web-view UI template for displaying players' team information, in-game progression, and activities.
Inspire and engage players by implementing a variety of in-game events.
Delight
Establish an in-game platform for players to monitor all seasonal event activities, including reward progress, event details, the gacha system, and leaderboards.
Flexibility
Ensure that the web view UX/UI delivers the same in-game experience while offering visually exciting twists.
Consistency
My Design Process
Check the UX/UI design patterns to ensure that the design layout and feature functions align with current trends in mobile gaming. As this feature is built on mobile web-view, it's imperative to maintain the web-view UI/UX flow while ensuring consistency and familiarity with the main game. The design underwent numerous iterations and testing to confirm that we have successfully preserved consistency and familiarity.
Research
Persona
Established a focus group to analyze user gameplay behavior
VIP users
Highly competitive
Enjoy master complicated feature rule
Build up in-app social connection
Strong voice in the community
General users
Competitive
Willing to learn the feature
Want to play with friends
Quiet in the community
Brainstorm
Ensure feature goals align with user expectations
Lower down the learning curve to encourage general users become VIP users
Improve the info architecture
Simplified and visualize the weekly events rules
Design Ideations
User Goals
Understand how the feature impacts to the user journey.
High Level Flow
Understand how the feature fits into the user flow map.
Measure the Scope
Discuss with the PM, list out all the functions, and explore the flow structures.
Internal Function testing
Collaborate directly with the Engineer to conduct internal technical testing.
Wireframe
Derived from the task flows, explore potential UI layouts.
Format
Implement the main game navigation system and minimize miss-tapping issues in complex features.
Iterations
Collaborate with visual designers to finalize UI layouts and conduct prototype testing.
Mock up & Prototype
User Testing
Collecting feedback from the community
Early Access
Release the new feature information to observe users' reactions.
Invite VIP users and active users to experience the new design.
Testing Goals
Is navigation easy?
Are the event rules easy to understand?
Is communication with other users easy?
Final design
AFTER
BEFORE
BEFORE
AFTER
BEFORE
AFTER
Hi-Fi Design
Result
This is the most crucial feature for War Dragons to drive revenue. It opens up various opportunities for the team to experiment with different features and iterate on game design quickly, incorporating player feedback. This feature is instrumental in keeping the team competitive in the mobile game market.
War Dragons maintained its position in the Top 25 iPhone mobile game rankings for grocery apps in 2017.
Category Ranking
Over 88% positive feedback was received from the War Dragons community in the 2021 user survey.
Positive feedback from our users