Noxious Quest
Internal Map Editor, UI Redesign
Noxious Quest is a free-to-play 2D isometric MMORPG game. Players choose one of five factions, which offers unique starting abilities, storylines and challenges.
Noxious Quest early in-game interface
Problem
Noxious Quest's internal map editor tool made creating in-game maps slow and frustrating for developers.
Research Methods
Heuristic evaluation, Accessibility guidelines, Competitive Analysis
Noxious Quest's internal map editor tool before improvements
Early Discovery and Feedback
- Map is obstructed by large, free-floating asset panel
- Changing and choosing asset types (tile, object, etc.) happens in two separate panels (bottom left and top right)
- Asset panel search is limited to asset type, not global search
- Badges on assets cause confusion
- Assets defined in backend by color
- Development team to add over 1,600+ assets and tags in near future
Iterating
To keep the game map/artboard visible, we docked the editing panel on the right side of the UI, rather than let it float freely. This way, the editing panel will never obstruct the game map/artboard.
We tested 3 different systems of asset organization to see which method would increase mapbuilding usability and efficiency;
1. Toggle System; user toggles on/off specific asset types in a persistent list
2. Tab System; user selects different tabs corresponding with desired asset type
3. Hidden List System; user selects specific asses type from dropdown menu
Tab System
Hidden List System
Solution
Efficiency ratings for the 3 systems were similar, but the Hidden List System was easiest to implement while retaining a positive experience. The system helped organize the game's 3k+ assets, while future-proofing the UI for larger asset libraries in the future. Because most users were already reliant on tag searching, we streamlined the flow and set every asset searchable by default. We also made a backend update to tag attributes of each asset, which allowed users to search for tags like "left," "top," or "dirt," in addition to color. This set a precedent for new assets moving forward.
The side panel was given an updated, thoughtful hierarchy that considers users' workflow.
Badges on assets were removed, as they were indicators of color groups and made redundant by the updated tag search.
Asset selection functionality was relocated from the bottom panel (typically reserved for tool selection), to the right side panel which elaborates on contextual tool settings, and is consistent with other tools.
Outcomes
Better/faster workflow efficiency
Increased engagement with asset search