Companion App
Studying Human Interface Guidelines & Material Design
*The logo and images in this case study belong to Blizzard Entertainment
#UI #UX #iOS #Andriod #Humaninterfaceguidelines
#Materialdesign
INTRODUCTION
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.
Overview
About
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.
Duration
4 Weeks
Platform
-
iOS
-
Andriod
My Role
UI/UX Designer
Tools
-
Figma
-
Photoshop
-
Discord
The Journey
Empathize > Define > Ideate > Design > Prototype > Testing > Iterate
-
Competitive analysis
-
User interview
-
MVP
-
User flow
-
Low-High fidelity wireframes
-
Prototype
-
Usability Testing
-
Iterate
-
Feedback & Critique
Problem Discovery
The Problem
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.
MVP
Chat
Connecting with their friends and other players in the game.
Updates
Keeping track of important updates and special events
Auction House
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
User Flow
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.
Design solutions
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.
The theme
Design Strategy
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.
Typography
Design Iteration
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
In-game
Before
After
Gold formatting on the auction screens
Gear color coding
(indicates item rarity)
HOME
Auction House
Chat
Login & Character info
Final Comment
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
Let's get social
I'm open to work!
