top of page

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



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.


4 Weeks


  • iOS

  • Andriod

My Role

UI/UX Designer


  • 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.



Connecting with their friends and other players in the game.


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
wow ref 3.png
wow ref 2.png
wow ref1.png

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

wow sktech 1.png

I carefully studied and experimented with both platforms to ensure that the grid and elements adhered to their respective design guidelines.

ios wireframes.png
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.



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




Gold formatting on the auction screens


Gear color coding

(indicates item rarity)

Auction House
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!

Send me an e-mail:

Connect with me on Linkedin!

  • LinkedIn
bottom of page