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.
The W.O.W companion app gives players access to small parts of the game while away from their computers.
Project Learning Focus
This project focuses on learning Material design and Human interface guidelines, the UI design strictly follows the design patterns of both platforms, such as spacing, navigation and buttons
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
They need a mobile solution to check that information when they don't have access to their desktop devices.
Insight & Discovery
I chatted with 7 daily players to confirm my observation and talked about their daily interactions and in-game habits
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
First, I conducted a quick competitive analysis of a few companion apps and game-related apps to better understand what functionalities they have, why they are helpful, and the design patterns they use.
Learning from others
Learning from Others
Reddit - Forum Layout
World of Final Fantasy Companion App - Auction house layout
The user flow for the companion app is very simple. The intention is to give players access to the small parts of the game that are the most important to them.
Using the user flow above as guidance, I sketched out possible solutions for iOS and Android platforms. I made some changes along the way while referencing the results from my competitive analysis.
Understanding the human interface guidelines & Material Design
After studying and experimenting with both platforms, I ensured the grid and elements strictly followed both design guidelines
I picked some colors off their website because I want the companion app to feel and look like it is part of the game
After completing the high-fidelity wireframes, I recruited some players to test the companion app. They provided some excellent feedback and suggested keeping the app elements as consistent with the game as possible. For example, the gold formatting on the auction screens and the gear color coding (indicates item rarity) on the character info screen are important in the game.
*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
As a player myself, I would find it very exciting if this product existed. However, it could require a lot of effort and time from a business and technical standpoint because many players have more than one character and might even be on different servers. But I really enjoyed this project. Especially learning about both design guidelines.
*This project was developed during the Career Foundry UI design course