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.



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


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


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

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

wow sktech 1.png

After studying and experimenting with both platforms, I ensured the grid and elements strictly followed both design guidelines

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



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




Gold formatting on the auction screens


Gear color coding

(indicates item rarity)

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

Send me an e-mail:

Connect with me on Linkedin!

  • LinkedIn
bottom of page