Studying Human Interface Guidelines & Material Design
*The logo and images in this case study belong to Blizzard Entertainment
#UI #UX #iOS #Andriod #Humaninterfaceguidelines
World of Warcraft is a massively multiplayer online role-playing game (MMORPG) released initially in 2004. W.O.W Classic is a remake of the original game based on a release from 2009 by Blizzard Entertainment.
With the W.O.W companion app, gamers can enjoy certain aspects of the game even when they are not in front of their computers.
Project Learning Focus
In this project, we are dedicated to mastering Material design and Human interface guidelines. Our UI design adheres closely to the design patterns of both platforms, including proper spacing, navigation, and button placement.
Empathize > Define > Ideate > Design > Prototype > Testing > Iterate
Low-High fidelity wireframes
Feedback & Critique
As a player myself, I noticed two common problems the majority of players encounter.
Players are losing gold
Missing cheap items
Missing high selling prices
Missing Speacial Events
Not informed of important events quickly enough
In situations where desktop devices are not accessible, a mobile solution is necessary to access the required information.
Insight & Discovery
To verify my observation, I conversed with seven players who play on a daily basis. During our discussions, we delved into their daily interactions and habits within the game.
Connecting with their friends and other players in the game.
Keeping track of important updates and special events
Access their auction items while they are away because gold is important to them
To gain a better understanding of the features, benefits, and design elements of companion apps and game-related apps, I performed a brief competitive analysis.
Learning from others
Learning from Others
Reddit - Forum Layout
World of Final Fantasy Companion App - Auction house layout
The process of using the companion app is quite straightforward. Its purpose is to grant players access to the crucial aspects of the game, while keeping it simple and easy.
Based on the user flow, I created sketches of potential solutions for both iOS and Android platforms. Throughout the process, I made adjustments while taking into consideration insights gained from my competitive analysis.
Understanding the human interface guidelines & Material Design
I carefully studied and experimented with both platforms to ensure that the grid and elements adhered to their respective design guidelines.
I selected certain colors from their website to ensure that the companion app seamlessly integrates with the game by having a consistent look and feel.
Once I finished creating the high-fidelity wireframes, I enlisted a group of players to test the companion app. Their feedback was very valuable, and they recommended that we maintain consistency between the app and the game. Specifically, they highlighted the significance of certain elements such as the gold formatting on the auction screens and the gear color coding, which indicates item rarity, on the character info screen.
*Keep the app elements as consistent with the game as possible
Gold formatting on the auction screens
Gear color coding
(indicates item rarity)
Login & Character info
Speaking from personal experience as a player, I find the idea of this product very thrilling. However, it would entail a significant amount of effort and time from a business and technical perspective since many players have multiple characters across various servers. Nevertheless, I thoroughly enjoyed working on this project and learning about design guidelines in the process.
*This project was developed during the Career Foundry UI design course