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
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
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
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
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
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
User Flow
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.
Design solutions
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
The theme
Design Strategy
I picked some colors off their website because I want the companion app to feel and look like it is part of the game
Typography
Design Iteration
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
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
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
Let's get social
I'm open to work!
